混子前端带你入门Flutter

TerrenceLu
823 阅读7分钟

Flutter介绍

Flutter是谷歌移动的UI框架，可以快速在IOS和Android上构建原生用户界面，Flutter可以与现有代码一起工作，并且Flutter是完全免费、开源的。

个人感觉Flutter是支持跨平台最多的UI框架，减少了开发成本，编写一次代码节省时间。
跨平台：Linux、Android、IOS、Fuchsia(谷歌新出的操作系统)；
原用用户界面：它是原生的，让体验更好，性能更好；
开源免费：完全开源，可以进行商用；

Flutter与主流框架对比

  • Cordova：混合式开发框架Hybrid App，个人认为完胜Cordova，因为Cordova还是基于网页技术进行包装的，里面还是HTML+CSS，利用JavaScript进行桥接的方式进行开发，开发出来的还是网页，从体验和流畅度不如原生。

  • RN(React Native)：生成原生App，但以View为基础潜入，所以效率上RN比Cordova高很多，但是RN的渲染机制是基于前端框架的考虑，复杂的UI渲染是依赖多个View叠加的，例如：渲染listView列表，每一个小框架都是一个单独view，然后相互结合叠加，此时如果滑动刷新会有多个对象进行渲染，所以页面会导致变慢，但RN效率还是可观的，可以达到60帧每秒，很难在往上了(瓶颈)。

  • Flutter：在渲染技术上(吸收前两者教训后)，选择了自己实现GDI，由于有更好的可控性，使用了谷歌的Dart语言，避免了RN那种通过桥接器与JavaScript通信导致效率低下的问题，所以在性能比RN更高一筹，有经验开发者可以打开Android开发者选项中的显示边界布局，可以看到Flutter是整体的布局，而RN是View层层嵌套组成，可以达到120帧每秒。
120fps超高性能
fps: 每秒传输帧数, 即每秒画面数
采用GPU渲染，而一般技术采用的是CPU渲染
【电影电视24fps / 液晶显示器60hz / 游戏80fps】

生态环境
Google公司出品和推广，并在中国也有推广中心

第三方组件也在迅猛发展
参考： github.com/Solido/awes… [ 几百个常用组件 ]

现在越来越多的人在使用Flutter：Alibaba(闲鱼)、Tencent、JD

ps: 很多人喜欢与RN进行对比，RN的生态环境是比Flutter好很多，但现在Flutter还是一个婴儿，只是测试版，正式版还没推出，能达到现在生态是很不错的了


开发环境搭建

第一步：java环境下载

小伙伴要记得点击同意下载文件，下载按提示安装后，启动终端输入java，如果出现一些提示，证明安装成功


第二步：下载Flutter按照提示安装，浏览器输入：
flutter.dev/docs/develo…
如果日后有需要更新flutter sdk，终端输入：flutter upgrade即可

第三步：安装完成后，mac打开.bash_profile文件，将以下代码复制到文件中：

export PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cnexport PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

备注：第三行PATH_TO_FLUTTER_GIT_DIRECTORY是Flutter SDK的路径

第四步：终端运行flutter doctor(会给出提示)

第五步：安装Android Studio(建议安装3.0)

浏览器输入developer.android.com
下载Android Studio按照提示安装
运行Android Studio 右下角选择configure安装flutter插件


由于本地没有，所以要搜索仓库安装flutter插件，安装后会自动安装好dart插件


安装完成后restart，可以看到多了一项：Start a new Flutter project，说明已经安装好了，关掉即可


第六步：继续运行flutter doctor可以看到还有感叹号，继续同意协议 flutter doctor --android-licenses

第七步：安装AVD虚拟机建立

运行Android Studio新建flutter项目，然后选择上面tools菜单，点击AVD Manager 弹出框


点击create即可，这里机型选择Nexus 5根据提示完成即可

第八步：VScode 商店搜索Flutter install即可，会自动安装Dark

第九步：Xcode安装
      这里参考文章安装即可  www.jianshu.com/p/603649a02… 

最后运行flutter doctor出现如下所示，就证明环境搭建好了


来测试一下：

在VScode中新建项目，运动终端输入flutter create demo创建flutter项目，并在VScode运行该项目，点击右下角No Device，打开之前安装过的虚拟机  (demo是项目名字)


 接下来终端进入项目目录，输入flutter run运行项目，就可以在虚拟机看到刚拉下来的初始化项目了


 如果做到这一步，那说明我们基本的开发环境已经构建完成了。


第一个HelloWorld


StatefullWidget和StatelessWidget的区别：

       StatefullWidget：动态组件，如进度条组件
       StatelessWidget：静态组件，如文本框


VScode控制虚拟机快捷键：

      R键：点击后热加载，直接查看预览效果
      P键：在虚拟机中显示布局网格，工作中经常使用
      O键：切换Android和IOS的预览模式
      Q键：退出调试预览模式
也可以使用VScode中 debug热更新模式(耗性能)

     


常用组件讲解

TextWidget文本组件

      textAlign：文本对齐属性
      maxLines：文本显示的最大行数
      overflow：控制文本的溢出效果


style属性的用法



Container容器组件

创建容器组件: 在body的child中写入 Container即可

padding 内边距属性：
      EdgeInsets.all(): 统一设置
      EdgeInsets.fromLTRB(val1, val2, val3, val4)

Alignment属性与一些样式属性的使用，见下图

注意：所有的属性都是组件Widget，万物皆组件。


Image图片组件

Image Widget加入方式
      Image.asset加载资源图片，会使打包时包体过大(慎用)
      Image.network网络资源图片
      Image.file本地图拼啊，相册的图片预览
      Image.memory加载到内存中的图片(不常用)



Fit属性（根据图片父容器控制图片拉伸 挤压 裁切）
      BoxFit.fill 拉伸充满父容器
      BoxFit.contain全图显示，显示原比例，以容器为基础，最大显示图片
      BoxFit.cover:图片要充满整个容器，但是要保持原比例
      BoxFit.fitWidth / BoxFit.fitHeight: 图片 横向 / 纵向 铺满父容器，会被裁切掉部分
      ...



图片混合模式( 需要2个值 )

      color: 给图片加颜色, 没有color怎么混合呢？
      colorBlendMode: 给图片一个混合模式



repeat图片重复充满容器

      ImageRepeat.repeatX: 横向重复
      ImageRepeat.repeatY: 纵向重复
      ...

ListView组件

      new ListView() // 列表组件
      列表组件需要一个子元素children，返回数组，所以这里要添加数组 
      这里ListView children中可以存放图片，图片的上拉 和 下拉效果是flutter封装好的

ListTile使用:  形成列表组件中的一列，相当于列表瓦片，要一层层装饰起来，不仅可以在ListView使用，还可以用在其它组件

       leading / title：最开始的位置 / 内容

横向列表的使用

scrollDirection基本语法

      Axis.horizontal：横向滚动或者叫水平方向滚动
      Axis.vertical：纵向滚动或者叫垂直方向滚动


代码优化，自定义组件
      以上代码层级嵌套太多了，所以考虑优化，把ListView摘除出去


接下来直接在主页面中引入ListView即可：


动态列表的使用

动态列表：比如服务端返回1000条数据，得到之后传递到页面列表进行渲染
Dart中List类型的使用 [List可以简单理解成数组]
      假如要在MyApp组件中传递参数items参数
        items: new List() // 非固定长度
        items: new List(3) // 长度是3
        items: new List<String>() // 数组中类型是string
        items: [1,2,3,4]
传递和接受参数，实现动态列表的基础


注意：这里如果虚拟机挂机报length错误的话，将虚拟机demo程序退出 重新flutter run即可
原因是因为 虚拟机有缓存 我们加载了1000条 缓存不够用了 (虚拟机的一些bug)


GridView网格列表使用

padding: 设置内边距的属性
crossAxisSpacing：网格间的空隙
crossAxisCount：网格的列数
childAspectRatio：设置长宽比例



好了，混子前端也知道总结的很糙，但跟着流程走下来，你一定会入门Flutter

这里如果连官网API都没读过的话建议移步到官网看一下

最后老规矩，欢迎点赞和纠错，祝大家工作愉快！


avatar
文章
阅读
粉丝