Flutter教程开坑篇,由简至难教你胡辣汤的31种做法…

Flutter教程开坑篇,由简至难教你胡辣汤的31种做法…那个年代的FLASH可以做出很多酷炫的UI,是当时首屈一指的“跨端”技术,当然那会儿的还没有“跨端”这个概念,我们都被叫做多媒体设计师….直到FLASH犯下几个致命的错误,又被乔帮主判处死刑… 可以看到Flutter的架构主要分为三层:Framework,Engine和…

Flutter = 胡辣汤

写在开坑之前

18年前我是一名设计师,做FLASH动画的。当时有一个FLASH编程的入门课程对我影响很大,直接导致了我后来“沦落为”一名程序员。那个入门课程作者叫ayychina,第一课叫《点不到的按钮》。在这个课程里,我掌握了入门任何新UI框架的武功秘籍,记得那会儿还用3.5寸软盘给我“梦情”做了个点不到的爱心…技术肥宅的浪漫真是很难get到吧… Flutter教程开坑篇,由简至难教你胡辣汤的31种做法... Flutter教程开坑篇,由简至难教你胡辣汤的31种做法...

那个年代的FLASH可以做出很多酷炫的UI,是当时首屈一指的“跨端”技术,当然那会儿的还没有“跨端”这个概念,我们都被叫做多媒体设计师….直到FLASH犯下几个致命的错误,又被乔帮主判处死刑… Flutter教程开坑篇,由简至难教你胡辣汤的31种做法...

  • 无论什么框架,咱前端用起来不外乎就做几件事
1. 创建显示对象,比如button,text,image等等...
2. 弄明白显示对象的层级关系...容器,层级
3. 设置显示对象的属性,宽高大小颜色等等...
4. 显示对象的事件系统,click,mousemove等等...
5. 绘制/渲染系统...重绘机制等等...
  • 在开始之前,我们先来了解下Flutter的架构和渲染机制 Flutter教程开坑篇,由简至难教你胡辣汤的31种做法...

可以看到Flutter的架构主要分为三层:Framework,Engine和Embedder。

1.Framework使用dart实现,包括Material Design风格的Widget,Cupertino(针对iOS)风格的Widgets,文本/图片/按钮等基础Widgets,渲染,动画,手势等。此部分的核心代码是:flutter仓库下的flutter package,以及sky_engine仓库下的io,async,ui(dart:ui库提供了Flutter框架和引擎之间的接口)等package。

2.Engine使用C++实现,主要包括:Skia,Dart和Text。Skia是开源的二维图形库,提供了适用于多种软硬件平台的通用API。

3.Embedder是一个嵌入层,即把Flutter嵌入到各个平台上去,这里做的主要工作包括渲染Surface设置,线程设置,以及插件等。从这里可以看出,Flutter的平台相关层很低,平台(如iOS)只是提供一个画布,剩余的所有渲染相关的逻辑都在Flutter内部,这就使得它具有了很好的跨端一致性。

  • 从网上摘了一段,也是Flutter标志自己完全不同于RN类框架或其他Hybrid跨端框架的核心要素

我试着用一句话讲明白flutter为什么可以跨端+高性能的原理

这货就是个跨端“游戏”引擎呀(打了引号)

一块画布(SGL),使用Dart语言编写Framework制定的API,由Framework调用Engine层实现绘制,Embedder层负责跨端运行和渲染。

再想想那些能跨平台的游戏引擎unreal,unity3d,你想想是不是都是这么回事呀?


创建一个Flutter应用

原理就聊到这里,回到我们的课程,快速的让大家先来上个手《点不到的按钮》

  1. flutter create myapp
  2. “myapp”是你应用的名称
  3. 完成后用vscode打开这个目录

先搞清楚在哪里写代码

Flutter教程开坑篇,由简至难教你胡辣汤的31种做法...

lib/main.dart就是咱们新建的这个应用的入口代码

先不说别的,run一下(按F5),第一次很慢,之后会快很多

Flutter教程开坑篇,由简至难教你胡辣汤的31种做法... 你可以选择使用苹果模拟器或是安卓模拟器来调试

随便改改代码试试看调试模式下的热重载

比如找到这一行代码
primarySwatch: Colors.blue,
改为
primarySwatch: Colors.red,
保存

这次不需要经过编译,模拟器里的UI就实时改变了。所以热重载是一个非常高效的调试方式。 (这样的特性还用跟Web前端开发者说嘛?是不是太out了)

回到我们的课程案例上,需求是

在界面里放置一个按钮,按钮上文字显示”点我呀“,点击之后按钮就跑到另外一个坐标。这就是点不到的按钮…其实原本课程里是mouseover后移动到另一个坐标,但移动端没有mouseover这个事儿啊…

Flutter教程开坑篇,由简至难教你胡辣汤的31种做法...

需求拆解:

step1

在放按钮之前,我们需要一个承载按钮的布局容器

这个按钮点了之后要随机变换位置,所以肯定得用自由布局的组件

查看所有布局组件

总之看完所有布局组件的文档,我们知道要用到这个组合
Stack,一个可以随意堆放子元素的布局
Positioned,一个绝对定位组件,改变topleft参数就可以跑来跑去啦

step2

我们要在这个容器里放一个按钮,按钮上文字显示”点我呀“

RaisedButton(
     onPressed: (){
     },
     color: Colors.red,//红色背景
     child:Text(
          'click me',//文本内容
          style: TextStyle(
             color: Colors.white,//文字白色
             fontSize: 12//文字字号
           )
     )
)

step3

按钮点击之后要更改其坐标

在实现这个之前,我们先要了解,在Flutter中万物皆Widget,而Widget又分无状态组件(StatelessWidget)和有状态组件(StatefulWidget)。简单点说,组件在创建后,是否允许更改状态,一但状态更改,其UI就会重新渲染。

这里显然我们要用有状态组件,接下来的代码是在组件创建时,就给与按钮一个随机屏幕坐标,那么之后只要改变状态,就会重新渲染

RaisedButton(
     onPressed: (){
          setState((){});//关键是这一句
     },
     color: Colors.red,
     child:Text(
          'click me',
          style: TextStyle(
               color: Colors.white,
               fontSize: 12
          )
     )
)
//获得当前设备屏幕尺寸,需要import 'dart:ui'
var s = window.physicalSize/window.devicePixelRatio;
//新建一个随机对象,import 'dart:math';
var rng = new Random();
//随机生成按钮的坐标
double btnTop = rng.nextDouble()*(s.height-40);
double btnLeft = rng.nextDouble()*(s.width-100);

return Container(
 color: Colors.white,
 child:Stack(
   children: [
     Positioned(
       top: btnTop,
       left: btnLeft,
       width: 100,
       height: 40,
       )
     )
   ]
 )
);
  • 那么本课关键代码就齐全了

源码下载

关注大帅搞全栈


感谢分享点赞评论三连,跟我一起学做胡辣汤(Flutter)吧~

本文使用 mdnice 排版

今天的文章Flutter教程开坑篇,由简至难教你胡辣汤的31种做法…分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/22284.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注