13518219792
Flutter 的图标类，它有几个衍生的组件：ImageIcon、IconButton 等。
创新互联建站是一家专业提供普定企业网站建设,专注与成都做网站、网站制作、成都h5网站建设、小程序制作等业务。10年已为普定众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。
Icon还可以架加载iconfont（字体图标），这种方式 和图片相比有如下优势：
使用方法比较简单
为了照顾新手小伙伴，基础讲解里面不会设计比较复杂的东西，后面的深入讲解中再对各方面最深入解析
下一节基础组件之Button
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
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
主要是关注decoration (装饰) 可以设置container的属性，这里color指的是背景色
alertdialog会返回一个结果，这样可以通过switch或其他方法做多次弹框等其他操作
Flutter 中有两种布局模型：
基于 RenderBox 的盒模型布局。
基于 Sliver ( RenderSliver ) 按需加载列表布局。
通常可滚动组件的子组件可能会非常多、占用的总高度也会非常大；如果要一次性将子组件全部构建出将会非常昂贵！为此，Flutter中提出一个Sliver（中文为“薄片”的意思）概念，Sliver 可以包含一个或多个子组件。Sliver 的主要作用是配合：加载子组件并确定每一个子组件的布局和绘制信息，如果 Sliver 可以包含多个子组件时，通常会实现按需加载模型。
只有当 Sliver 出现在视口中时才会去构建它，这种模型也称为“基于Sliver的列表按需加载模型”。可滚动组件中有很多都支持基于Sliver的按需加载模型，如 ListView 、 GridView ，但是也有不支持该模型的，如 SingleChildScrollView 。
Flutter 中的可滚动主要由三个角色组成： Scrollable 、 Viewport 和 Sliver ：
具体布局过程：
比如有一个 ListView，大小撑满屏幕，假设它有 100 个列表项（都是RenderBox）且每个列表项高度相同，结构如图6-1所示：
图中白色区域为设备屏幕，也是 Scrollable 、 Viewport 和 Sliver 所占用的空间，三者所占用的空间重合，父子关系为：Sliver 父组件为 Viewport，Viewport的 父组件为 Scrollable 。注意ListView 中只有一个 Sliver，在 Sliver 中实现了子组件的按需加载。
其中顶部和底部灰色的区域为 cacheExtent，它表示预渲染的高度，需要注意这是在可视区域之外，如果 RenderBox 进入这个区域内，即使它还未显示在屏幕上，也是要先进行构建的，预渲染是为了后面进入 Viewport 的时候更丝滑。cacheExtent 的默认值是 250，在构建可滚动列表时我们可以指定这个值，这个值最终会传给 Viewport。
用于处理滑动手势，确定滑动偏移，滑动偏移变化时构建 Viewport，我们看一下其关键的属性：
在可滚动组件的坐标描述中，通常将滚动方向称为主轴，非滚动方向称为纵轴。由于可滚动组件的默认方向一般都是沿垂直方向，所以默认情况下主轴就是指垂直方向，水平方向同理。
Viewport 比较简单，用于渲染当前视口中需要显示 Sliver。
需要注意的是：
Sliver 主要作用是对子组件进行构建和布局，比如 ListView 的 Sliver 需要实现子组件（列表项）按需加载功能，只有当列表项进入预渲染区域时才会去对它进行构建和布局、渲染。
Sliver 对应的渲染对象类型是 RenderSliver，RenderSliver 和 RenderBox 的相同点是都继承自 RenderObject 类，不同点是在布局的时候约束信息不同。RenderBox 在布局时父组件传递给它的约束信息对应的是 BoxConstraints ，只包含最大宽高的约束；而 RenderSliver 在布局时父组件（列表）传递给它的约束是对应的是 SliverConstraints 。关于 Sliver 的布局协议，我们将在本章最后一节中介绍。
几乎所有的可滚动组件在构造时都能指定 scrollDirection （滑动的主轴）、 reverse （滑动方向是否反向）、 controller 、 physics 、 cacheExtent ，这些属性最终会透传给对应的 Scrollable 和 Viewport，这些属性我们可以认为是可滚动组件的通用属性，后续再介绍具体的可滚动组件时将不再赘述。
可滚动组件都有一个 controller 属性，通过该属性我们可以指定一个 ScrollController 来控制可滚动组件的滚动，比如可以通过ScrollController来同步多个组件的滑动联动。由于 ScrollController 是需要结合可滚动组件一起工作，所以本章中，我们会在介绍完 ListView 后详细介绍 ScrollController。
Scrollbar是一个Material风格的滚动指示器（滚动条），如果要给可滚动组件添加滚动条，只需将Scrollbar作为可滚动组件的任意一个父级组件即可，如：
Scrollbar 和 CupertinoScrollbar 都是通过监听滚动通知来确定滚动条位置的。关于的滚动通知的详细内容我们将在本章最后一节中专门介绍。
CupertinoScrollbar是 iOS 风格的滚动条，如果你使用的是Scrollbar，那么在iOS平台它会自动切换为CupertinoScrollbar
