189 8069 5689
一个widget，它沿着一个给定的轴，顺序排列它的子元素
创新互联专注于企业成都营销网站建设、网站重做改版、蠡县网站定制设计、自适应品牌网站建设、H5建站、购物商城网站建设、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为蠡县等各大城市提供网站开发制作服务。
注意点：
最后这几个组件怎么使用看需求选择最适合的就行。
Flutter（5）：基础组件之Row/Column
Flutter（33）：Material组件之ListTile、RefreshIndicator、ListView、Divider
下一节：Layout组件之CustomMultiChildLayout
Row：在水平方向上排列子widget的列表。
Column：在垂直方向上排列子widget的列表。
注意：这两个属于多子节点空间，可以将children排列成一行/一列，但是自身不带滚动属性，如果超出了一行，在debug下面则会显示溢出的提示。
MainAxisAlignment：主轴方向上的对齐方式，会对child的位置起作用，默认是start。
其中MainAxisAlignment枚举值：
center：将children放置在主轴的中心；
end：将children放置在主轴的末尾；
spaceAround：将主轴方向上的空白区域均分，使得children之间的空白区域相等，但是首尾child的空白区域为1/2；
spaceBetween：将主轴方向上的空白区域均分，使得children之间的空白区域相等，首尾child都靠近首尾，没有间隙；
spaceEvenly：将主轴方向上的空白区域均分，使得children之间的空白区域相等，包括首尾child；
start：将children放置在主轴的起点；
其中spaceAround、spaceBetween以及spaceEvenly的区别，就是对待首尾child的方式。其距离首尾的距离分别是空白区域的1/2、0、1。
MainAxisSize：在主轴方向占有空间的值，默认是max。
MainAxisSize的取值有两种：
max：根据传入的布局约束条件，最大化主轴方向的可用空间；
min：与max相反，是最小化主轴方向的可用空间；
CrossAxisAlignment：children在交叉轴方向的对齐方式，与MainAxisAlignment略有不同。
CrossAxisAlignment枚举值有如下几种：
baseline：在交叉轴方向，使得children的baseline对齐；
center：children在交叉轴上居中展示；
end：children在交叉轴上末尾展示；
start：children在交叉轴上起点处展示；
stretch：让children填满交叉轴方向；
TextDirection：阿拉伯语系的兼容设置，一般无需处理。
VerticalDirection：定义了children摆放顺序，默认是down。
VerticalDirection枚举值有两种：
down：从top到bottom进行布局；
up：从bottom到top进行布局。
top对应Row以及Column的话，就是左边和顶部，bottom的话，则是右边和底部。
TextBaseline：使用的TextBaseline的方式，有两种，前面已经介绍过。
这个是Row/Column的内的小控件，可以用来实现权重的布局
这边使用一个Container，里面是Row，使用Expanded对子节点进行权重处理，如果不使用Expanded，直接放入其他控件也是可以的，只是无法设置权重
对于内容过长的时候，会有溢出提示：
MainAxisAlignment.center：将children放置在主轴的中心；
MainAxisAlignment.start：将children放置在主轴的起点；
MainAxisAlignment.end：将children放置在主轴的末尾；
MainAxisAlignment.spaceAround：将主轴方向上的空白区域均分，使得children之间的空白区域相等，但是首尾child的空白区域为1/2；
MainAxisAlignment.spaceBetween：将主轴方向上的空白区域均分，使得children之间的空白区域相等，首尾child都靠近首尾，没有间隙；
MainAxisAlignment.spaceEvenly：将主轴方向上的空白区域均分，使得children之间的空白区域相等，包括首尾child；
下一章我们学习基础组件之Image
新建一个Flutter工程，android模块。
1，只有一个Activity组件，它是Dart层绘制Widget的容器。
2，Application配置FlutterApplication。
应用Application配置io.flutter.app.FlutterApplication类，App首次启动时，初始化。
调用FlutterMain.startInitialization()方法。
initConfig方法，从AndroidManfest.xml配置的applicaion节点获取meta-data数据，初始化以下默认值。
这些值都是使用中用到的name，例如，抽取apk中asset资源时，flutter_assets打包目录，打包产物data名称。
initResources方法， 初始化资源。
在Flutter打包apk的asset目录下，包括fluttter_asset目录/资源项，将资源从apk中抽取，保存在 Context.getDir("flutter", 0) 目录下。
/data/user/0/包名/app_flutter目录。
在目录中创建一个时间戳文件，根据apk版本和包信息记录的lastUpdateTime更新时间，第二次启动时，若apk未更新，不需要再次抽取。
加载so库，libflutter.so，System.loadLibrary()。
主页面继承FlutterActivity，配置启动模式singleTop。
FlutterActivity类在io.flutter.app包， (区别io.flutter.embedding.android包)， 组件生命周期委托给FlutterActivityDelegate类。
组件启动，onCreate方法。
FlutterMain.ensureInitializationComplete方法，确保资源成功抽取完成，创建FlutterView视图(io.flutter.view)，继承SurfaceView类，setContentView方法，设置组件主布局即FlutterView视图。
最后，根据Bundle路径，runBundle()加载运行，
调用FlutterView的runFromBundle方法，入口点在dart的main方法，
通过FlutterNativeView，调用FlutterJNI的native方法。
nativeRunBundleAndSnapshotFromLibrary方法。
任重而道远
Flutter中有两个常用的状态Widget分为StatefulWidget和StatelessWidget，分别为动态视图和静态视图，视图的更新需要调用StatefulWidget的setState方法，这会遍历调用子Widget的build方法。如果一个页面内容比较复杂时，会包含多个widget，如果直接调用setState，会遍历所有子Widget的build，这样会造成很多不必要的开销，所以非常有必要了解Flutter中局部刷新的方式：
globalkey唯一定义了某个element，它使你能够访问与element相关联的其他对象，例如buildContext、state等。应用场景：跨widget访问状态。
例如：可以通过key.currentState拿到它的状态对象，然后就可以调用其中的onPressed方法。
Flutter框架内部提供了一个非常小巧精致的组件，专门用于局部组件的刷新。适用于值改动的刷新。
实现原理：在 initState 中对传入的可监听对象进行监听，执行 _valueChanged 方法，_valueChanged 中进行了 setState 来触发当前状态的刷新。触发 build 方法，从而触发 widget.builder 回调，这样就实现了局部刷新。可以看到这里回调的 child 是组件传入的 child，所以直接使用，这就是对 child 的优化的根源。
可以看到 ValueListenableBuilder 实现局部刷新的本质，也是进行组件的抽离，让组件状态的改变框定在状态内部，并通过 builder 回调控制局部刷新，暴露给用户使用。
通过这个可以创建一个支持局部刷新的widget树，比如你可以在StatelessWidget里面刷新某个布局，但是不需要改变成StatefulWidget；也可以在StatefulWidget中使用做部分刷新而不需要刷新整个页面，这个刷新是不会调用Widget build（BuildContext context）刷新整个布局树的。
异步UI更新：
很多时候我们会依赖一些异步数据来动态更新UI，比如在打开一个页面时我们需要先从互联网上获取数据，在获取数据的过程中显示一个加载框，等获取到数据时我们再渲染页面；又比如我们想展示Stream（比如文件流、互联网数据接收流）的进度。当然StatefulWidget我们完全可以实现以上功能。但由于在实际开发中依赖异步数据更新UI的这种场景非常常见，并且当StatefulWidget中控件树较大时，更新一个属性导致整个树重建，消耗性能，因此Flutter专门提供了FutureBuilder和SteamBuilder两个组件来快速实现这种功能。
通常情况下，子Widget无法单独感知父Widget的变化，当父state变化时，通过其build重建所有子widget；
InheriteddWidget可以避免这种全局创建，实现局部子Widget更新。InheritedWidget提供了一种在Widget树中从上到下传递、共享数据的方式。Flutter SDK正是通过InheritedWidget来共享应用主题和Locale等信息。
InheritedWidgetData
TestData
InheritedTest1Page
provider是Google I/O 2019大会上宣布的现在官方推荐的管理方式，而ChangeNotifierProvider可以说是Provider的一种：
yaml文件需要引入provider: ^3.1.0
顶层嵌套ChangeNotifierProvider
创建共享数据类DataInfo：
数据类需要with ChangeNotifier 以使用 notifyListeners()函数通知监听者更新界面。
使用Provider.of(context)获取DataInfo
nextPage：
使用Consumer包住需要使用共享数据的Widget
RepaintBoundary就是重绘边界，用于重绘时独立于父视图。页面需要更新的页面结构可以用 RepaintBoundary组件嵌套,flutter 会将包含的组件独立出一层"画布"，去绘制。官方很多组件 外层也包了层 RepaintBoundary 标签。如果你的自定义view比较复杂，应该尽可能的避免重绘。
以上总结了几种Flutter的局部刷新的方式，可根据实际需要使用不同的方式，最适合的才是最好的。
Text继承自 StatelessWidget ，Text 主要通过设置 文本布局 及 文本样式 控制显示方式。
1. 文本布局： 例如文本对齐方式 textAlign 、文本排版方向 textDirection ，文本显示最大行数 maxLines 、文本截断规则 overflow 等等
2 文本样式： 如字体名称 fontFamily 、字体大小 fontSize 、文本颜色 color 、文本阴影 shadows 等等，这些参数被统一封装到了构造函数中的参数 style(TextStyle) 中
在iOS中，我们可以使用NSAttributedString进行富文本设置。在Flutter中 我们可以通过 Text.rich() 或 RichText() 进行富文本设置。
两者均为 InlineSpan 类型， InlineSpan 为抽象类。
抽象类不能直接实例化。Flutter已为我们提供了
且 WidgetSpan 继承自 PlaceholderSpan
Image是一个用于展示图片的组件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式。
Image.asset - 用于从资源目录的显示图片,需要在 pubspec.yaml 文件中声明。
Image.network - 用于从网络上显示图片。
Image.file - 用于从文件里显示图片。
Image.memory - 用于从内存里（Uint8List）显示图片。
alignment → AlignmentGeometry - 图像边界内对齐图像。
centerSlice → Rect - 九片图像的中心切片。
color → Color - 该颜色与每个图像像素混合colorBlendMode。
colorBlendMode → BlendMode - 用于 color 与此图像结合使用。
fit → BoxFit - 图像在布局中分配的空间。
gaplessPlayback → bool - 当图像提供者发生变化时，是继续显示旧图像（true）还是暂时不显示（false）。
image → ImageProvider - 要显示的图像。
matchTextDirection → bool - 是否在图像的方向上绘制图像 TextDirection。
repeat → ImageRepeat - 未充分容器时，是否重复图片。
height → double - 图像的高度。
width → double - 图像的宽度。
加载资源图片需要将图片资源放入工程中，例如：新建images文件夹，将图片放在该文件夹下，图片适配则是使用ios的方式1X，2X，3X：
然后在pubspec.yaml中配置assets：
加载资源/网络/本地文件图片/内存图片：
占位图加载图片：
圆形图片：1.裁剪实现 2.CircleAvatar实现 3.Container边框实现
圆角图片：1.裁剪实现 2.Container边框实现
BoxFit.contain 全图居中显示但不充满，显示原比例
BoxFit.cover 图片可能拉伸，也可能裁剪，但是充满容器
BoxFit.fill 全图显示且填充满，图片可能会拉伸
BoxFit.fitHeight 图片可能拉伸，可能裁剪，高度充满
BoxFit.fitWidth 图片可能拉伸，可能裁剪，宽度充满
BoxFit.scaleDown 效果和contain差不多， 但是只能缩小图片，不能放大图片
下一节学习基础组件之Text