IMG_5908.JPG

Plugin VS Package

  • package相当于第三方库，包含的都是dart代码
  • plugin同时包含iOS、android原生代码和dart代码

Flutter VS RN

  • Flutter->Dart写的代码同时能应用于iOS和Android，其原理是通过渲染引擎，在iOS和Android上进行渲染，打的包中包含了渲染引擎（渲染引擎不同端使用不同语言写的，功能一致），因此包体积比较大，效率高；RN则是通过虚拟DOM转换为对应的iOS或Android原生UI控件，在原生控件更新时，需要配套更新，对原生的依赖非常高。
  • RN支持热更新，通过替换JSBundle文件达到；Flutter支持热重载，只有在debug环境下可用。
  • Flutter效率高，不变的东西强制定义为const，进行增量渲染，页面中某一个widget变了，直接改变改widget，根据树状结构更改，类似RN。
  • Flutter没有图层一说，不依赖原生UI，拥有独立的渲染引擎
  • 界面更新逻辑和原来不一样（增量渲染），重新创建一个新的Widget。
  • 为什么flutter中大量final修饰的属性，const修饰的构造方法（常量对象）
    • 因为Flutter的渲染逻辑，是增量渲染，widget构造是树状结构
    • 想改变屏幕内容就直接改变widget对象
    • 常量对象的创建效率更高

Widget

  • 万物皆widget，包含两大类：
    • 有状态->内部小部件可以修改->stateful
    • 无状态->不能更改->stateless

  • 自定义一个widget需要能够被渲染(代码显示在屏幕上)：需要实现，一定会有build过程

    1. class MyWidget extends StatelessWidget {
    2. @override
    3. Widget build(BuildContext context) { //渲染
    4.   // TODO: implement build
    5.   throw UnimplementedError();
    6. }
    7. }

  • Widget a -> 加了下划线修饰的变量，在当前dart文件内都可以访问

MaterialApp

  • home属性（主页面）
    • 需要一个Widget
    • Scaffold小组件
      • 带有导航栏（appBar）的小部件
        • 导航栏可以设置文字、颜色，而且可以自定义widget
      • body属性
        • 现在在导航栏下面的区域，传递一个widget给他
  • debugShowCheckedModeBanner属性
    • 是否显示Debug标记（便于我们在调试版本中做操作）

ListView

  • 类似iOS中的TableView
  • 构造方法
    • ListView.builder(itemCount, itemBuilder)
      • 参数：itemCount
        • 当前这个ListView总共有多少个item
      • 参数：itemBuilder
        • 是一个回调函数。function(BuildContext context, int index)
          • 作用
            • 返回每一个item。类似iOS中tableView的cellForRow
          • 参数
            • context参数，还没用到。
            • index参数
              • 目前要返回的cell的index。说白了，就是现在给我返回的第几个item

Container

  • 类似iOS的UIView。一个空的小部件。很常用
  • margin属性
    • 内边距。让我内部的小部件往里面缩
    • EdgetInsets.all(10) -> 上下左右往里面缩10gepx
    • 每一个视图Widget都可以看成一个矩形
  • color属性
    • 当前这个Widget的颜色
    • 技巧：当我们布局某个Widget的时候，先给个颜色。便于我们调整布局。

Image

  • 图片小部件：Image.network(url)构造函数
    • 从网络上加载一张图片

SizedBox

  • 用来占位的小部件。在复杂的布局中很常用

布局 - 状态管理

  • Row 左 -> 右
  • Column 上 -> 下
    • 主轴和交叉轴
  • 布局控件
    • Center，让子部件在本部件的中心位置。
  • Container中相对位置属性
    • Alignment，参数：x和y。具有坐标属性，坐标点（0，0）在屏幕中心位置，取值范围-1~1。取值并不是按像素来的。
    • 原点在中心位置。
  • 每一个UI部件都可以看成一个矩形的’盒子’
  • 每一个盒子都有外边距Margin和内边距padding
  • 主轴：MainAxisAlignment
    • spaceBetween：剩下的空间平均分配到小部件之间
    • spaceAround：剩下的空间平均分配到小部件周围
    • spaceEvenly：剩下的空间和小部件一起平均分
    • Expanded：在主轴防线不会剩下间隙。将被Expanded拉伸
    • start向主轴开始的方向对齐
    • end 向主轴结束的方向对齐
    • center主轴方向居中对齐
  • 交叉轴：CrossAxisAlignment垂直于主轴方向
  • Expanded 填充布局