混子前端带你入门Flutter

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环境下载

www.oracle.com/technetwork…

小伙伴要记得点击赞成下载文件，下载按提示安装后，启动终端输入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都没读过的话建议移步到官网看一下

最后老规矩，欢迎点赞和纠错，祝你们工做愉快！