dart语言Flutter组件表

Image组件中可用的属性
Image组件的构造方法来加载图片资源
Image对象的属性来控制图片的渲染效果

属性名	意义	值类型
alignment	设置图片的对齐方式	AlignmentGeometry对象
centerSlice	针对点九图设置拉伸区域	Rect对象
color	设置与图片混合的颜色	Color对象
colorBlendMode	设置颜色与图片混合模式	BlendMode对象
filterQuality	设置图片过滤器的质量	FilterQuality对象
fit	设置图片的填充模式	BoxFit对象
gaplessPlayback	当图片资源提供者变化时，设置依然显示旧图片或什么都不显示	布尔值对象
height	设置图片组件的高度	浮点数对象
width	设置图片组件的宽度	浮点数对象
matchTextDirection	设置图片是否按照文本渲染的方向进行渲染	布尔值对象
repeat	设置图片的平铺复制模式	ImageRepeat对象

Alignment对象用来描述组件的对齐模式，即如果组件内图片的真实尺寸小于组件设置的尺寸，通过这个属性就可以设置内部图片的布局，Alignment默认的构造方法可以设置布局位置在x和y方向的偏移比例

Alignment中的常量定义图片对齐方式

常量名	意义
bottemCenter	图片渲染到组件的底部中心
bottomLeft	图片渲染到组件的左下角
bottomRight	冬片渲染到组件的右下角
center	图片渲染到组件的中心
centerLeft	图片洁染到组件的左侧中心
centerRight	图片渲染到组件的右侧中心
topCenter	图片渲染到组件的顶部中心
topLeft	图片渲染到组件的左上角
topRight	图片渲染到组件的右上角

BoxFit中定义的可选值
fit属性的作用是设置图片的填充方式
图片的尺寸与组件的尺寸不一致时，使用怎样的拉伸策略或截断策略来渲染图片
BoxFit是一个枚举

枚举值	意义
contain	始终完整地包含图片，不会改变图片的比例
cover	使图片充满组件，不会改变图片的比例
fill	调整图片的比例，使其充满组件
fitHeight	图片的高度始终充满组件，不会改变图片的比例
fitWidth	图片的宽度始终充满组件，不会改变图片的比例
scaleDown	如果图片的尺寸大于组件尺寸，就使用contain模式，如果图片的尺寸小于组件尺寸就不进行处理
none	不做任何处理，如果图片尺寸大于组件尺寸，就会截断，如果图片的尺寸小于组件尺寸，周围就会用空白填充

ImageRepeat中定义的枚举值
ImageRepeat用来设置图片的重复模式，
当图片尺寸小于组件尺寸时，
通过设置fit属性的值可以对图片进行拉伸，
通过设置repeat属性的值可以设置拉伸模式，
可以是改变图片比例的拉伸，也可以是对图片进行复制。

枚举值	意义
noRepeat	不进行复制
repeat	水平和竖直两个方向都进行复制
repeatX	水平方向进行复制，竖直方向进行拉伸
repeatY	竖直方向进行复制，水平方向进行拉伸

TextAlign中定义的枚举值及其意义
Text组件的textAlign属性用来设置文本的对齐方式，TextAlign是一个枚举类型

枚举值	意义
left	左对齐
right	右对齐
center	居中对齐
justify	充满宽度
start	文本的首部对齐
end	文本的尾部对齐

TextStyle属性来对文本的显示风格进行自定义

---

Icon类用来设置图标数据，
color参数用来设置图标的颜色，
size参数用来设置图标的尺寸。
在Flutter中默认定义了许多图标，可以直接通过Icons进行调用。
https://docs.flutter.io/flutter/material/Icons-class.html

---

按钮相关组件

MeterialButton中通用的属性

属性名	意义	值类型
animationDuration	定义按钮形状或高亮变化的动画时间	时间间隔Duration对象
child	设置子组件	Widget对象
color	设置按钮的填充颜色，默认状态下的	Color对象
colorBrightness	设置按钮的主题亮度	Brightness对象
disabledColor	设置按钮不可用状态下的填充颜色	Color对象
disabledTextColor	设置按钮不可用状态下的文本颜色	Color 对象
enabled	设置按钮是否可用	bool 对象
highlightColor	设置按钮高亮状态下的颜色	Color对象
height	设置按钮的高度	double对象
minWidth	设置按钮的最小宽度	double对象
onPressed	设置用户点击按钮的回调事件	函数对象
textColor	设置按钮正常状态下的文字颜色	Color对象

RaisedButton是继承自MaterialButton的一个有凸起效果的按钮组件类。

---

FlatButton与RaisedButton基本一致，不同的是，RaisedButton在展现效果上会有凸起效果，即有阴影特效。FlatButton是平面的按钮组件，不带阴影效果

---

下拉选择按钮DropdownButton组件
DropdownButton组件中常用的属性

属性名	意义	值类型
disabledHint	按钮不可用时的提示组件	Widget对象
hint	提示组件，当按钮值为null时默认显示	Widget对象
iconSize	设置按钮中下拉图标的尺寸	double对象
items	设置选项列表	元素为DropdownMenultem类型的列表对象
onChanged	设置当按钮值改变的回调函数，函数会将改变后的值作为参数传入	函数对象
value	设置按钮的值	任意类型

悬浮按钮
FloatingActionButton常用的属性

属性名	意义	值类型
backgroundColor	设置背景色	Color对象
child	设置按钮子组件	Widget对象
foregroundColor	设置前景色	Color对象
mini	设冒按钮是否是mini风格的	bool对象
onPressed	设置按钮按下的同调	函数对象
tooltip	设置当按钮被完全按下时的提示信息	String对象

图标按钮IconButton组件
IconButton是最清新简洁的一种，将按钮渲染为图标的风格，默认没有任何多余的UI元素，当用户单击时会有交互反馈
IconButton组件中常用的属性

属性名	意义	值类型
alignment	设置对齐模式	AlignmentGeometry对象
Color	设置按钮颜色	Color对象
disabledColor	设置不可用时的按钮颜色	Color对象
highlightColor	设置高亮时的按钮颜色	Color对象
icon	设置内部图标组件	Widget对象
iconSize	设置内部图标大小	double对象
onPressed	设置按钮点击的回调函数	函数对象
padding	设置按钮与图标的间距	EdgeInsetsGeometry对象
tooltip	按钮按下时的提示文本	String对象

build函数实际上返回的就是一个Scaffold组件
这个容器中定义好了导航栏、抽屉、悬浮按钮、内容视图等区域，开发者只需要根据界面的需要来填充脚手架中的内容即可。
除了drawer和endDrawer属性外，其他属性配置后，这些组件都将持久地显示在脚手架容器中，
如果配置了drawer或endDrawer属性，就会在导航栏左侧或右侧创建一个按钮，单击按钮将弹出对应的抽屉视图。
Scaffold组件中可配置的属性

属性名	意义	值类型
appBar	配置应用的导航栏	通常设置为AppBar对象
backgroundColor	设置组件的背景颜色	Color对象
body	设置组件的内容	Widget对象
bottomNavigationBar	底部导航栏	Widget对象
bottomSheet	持久化显示的底部抽屉	Widget对象
drawer	设置左侧抽屉组件	Widget对象
endDrawer	设置右侧抽屉组件	Widget对象
floatingActionButton	设置悬浮按钮组件	Widget对象
persistentFooterButtons	持久化显示的底部按钮组件	元素为Widget的List对象
primary	设詈脚手架是否从屏幕顶部开始布局	bool对象

AppBar中常用的属性

属性名	意义	值类型
actions	设置AppBar上的功能按钮列表	元素为Widget的列表对象
backgroundColor	设置背景颜色	Color对象
centerTitle	设置是否居中	bool对象
leading	设置标题左侧的组件	Widget对象
title	设置标题	Wideet对象

BottomNavigationBar组件
BottomNavigationBar会构造iOS系统风格的标签栏
BottomNavigationBar组件的常用属性

属性名	意义	值类型
items	设置标签组，必选	BottomNavigationBarltem列表
onTap	用户单击标签后的回调，会将标签的索引传入	函数
BottomNavigationBarType	设置类型	枚举,可选如下: fixed自适应宽度shifting位置和尺寸都有单击动画
fixedColor	设置选中颜色	Color对象
backgroundColor	背景颜色	Color对象
iconSize	设置图标尺寸，默认为24	数值
selectedItemColor	设置选中标签颜色	Color对象
unselectedItemColor	设置未选中标签颜色	Color对象
selectedIconTheme	设置选中图标风格	图标风格IconThemeData对象
unselectedIconTheme	设置未选中图标风格	图标风格IconThemeData对象
selectedFontSize	设置选中文字尺寸	数值
unselectedFontSize	设置未选中文字尺寸	数值
selectedLabelStyle	设置选中文本字体风格	TextStyle对象
unselectedLabelStyle	设置未选中文本字体风格	TextStyle对象

BottomNavigationBarItem中的常用属性

属性名	意义	值类型
icon	图标	Widget组件
title	标题	Widget组件
activelcon	选中时的图标	Widget组件
backgroundColor	背景色	Color对象

FlutterLogo组件是一个小巧的系统图标组件。用来展示Flutter图标
FlutterLogo中可进行配置的常用属性

属性名	意义	值类型
duration	设置当颜色、风格等发生变化时的动画时间	Duration对象
size	设置图标的尺寸大小	Double对象
style	设置图标的风格	FlutterLogoStyle对象
textColor	设置文本颜色	Color对象

FlutterLogoStyle中定义的几种Flutter图标的展现风格

枚举值	意义
horizontal	水平展示图标和文本
markOnly	仅仅展示图标
stacked	竖直展示图标和文本

Placeholder占位符组件
Placeholder(color: Colors.grey,fallbackHeight: 100,fallbackWidth:100,strokeWidth: 1)

---

单组件布局容器组件
单组件布局容器是指容器内部只可以有一个子组件，通常用来控制子组件的位置、尺寸和形状等。
其可以根据子组件的尺寸自适应大小。
constraints用来对容器的尺寸进行约束，虽然默认情况下，Container容器的尺寸会根据其中子组件的尺寸进行调整，但是通过constraints属性可以为其宽度和高度设置最小值或最大值
transform属性可以对Container容器的展示进行变化，transform属性需要设置为Matrix4对象，这个对象是一个4维的矩阵，其本身意义复杂，但是Flutter中提供了现成的构造方法，可以直接构造出指定变换的Matrix4对象，以围绕z轴旋转
Matrix4.rotationZ(-.2)

Container组件的常用属性

属性名	意义	值类型
alignment	设置子组件的对齐方式	AlignmentGeometry对象
child	子组件	Widget对象
constraints	设置子组件的约束	BoxConstraints对象
width	设置容器宽度	Double对象
height	设置容器高度	Double对象
color	设置容器的背景颜色	Color对象
decoration	设置容器的修饰属性，其中也可以设置容器的背景色，需要注意，这个属性和Color属性不能同时配置	Decoration 对象
foregroundDecoration	设置前景修饰	Decoration对象
margin	设置容器的外边距	EdgelnsetsGeometry对象
padding	设置容器的内边距	EdgeInsetsGeometry对象
transform	设置容器的形状变换属性，例如旋转、缩放等	Matrix4对象

decoration用来设置Container容器的修饰属性，例如边框、阴影、形状等效果，一般会将其设置为一个对象
gradient属性用来设置容器的渐变背景，常用的渐变背景类有3个，
LinearGradient用来创建线性的渐变背景，
RadialGradient用来创建以中心为原点、以半径为轴向外渐变的渐变背景，
SweepGradient用来创建扫描式的渐变
BoxDecoration可配置的属性

属性名	意义	值类型
color	设置容器背景色	Color 对象
image	设置背景图片	DecorationImage对象
border	设置容器的边框	Border 对象
boxShadow	设置容器阴影	BoxShadow对象构成的列表
borderRadius	设置容器的圆角	BorderRadius对象
gradient	设置渐变背景	LinearGradientRadialGradientSweepGradient对象
backgroundBlendMode	设置背景渲染时的混合模式	BlendMode枚举
shape	设置背景形状	BoxShape枚举，可以设置为:rectangle:矩形circle:圆形

LinearGradient用来创建线性的渐变背景，
LinearGradient中可配置的属性

属性名	意义	值类型
begin	渐变的起始位置	AlignmentGeometry对象
end	渐变的结束位置	AlignmentGcometry对象
tileMode	渐变的平铺方式	TileMode枚举

RadialGradient用来创建以中心为原点、以半径为轴向外渐变的渐变背景，
RadialGradient中可配置的属性

属性名	意义	值类型
center	设置渐变的中心点	AlignmentGeometry对象
radius	半径范围	数值
focal	设置焦点位置	AlignmentGeometry对象
focalRadius	设置焦点半径	数值

SweepGradient用来创建扫描式的渐变
SweepGradient中可配置的属性

属性名	意义	值类型
center	设置渐变的中心点	AlignmentGeometry对象
startAngle	设置开始渐变的角度	数值
endAngle	设置结束渐变的角度	数值

---

Padding容器组件
Padding组件是简化的Container组件，其只能有一个子组件，并且不需要设置内边距

---

Center容器组件
Center容器组件是一种特殊的Padding组件，其只能有一个子组件，并且会将子组件布局在容器的中心

---

Align容器组件
Align组件用来设置其内部的子组件布局在边缘，可以选择布局在边缘的位置，例如左上角、右下角等，其通过alignment属性进行控制

---

FittedBox容器组件
FittedBox组件会根据容器的大小来适配自己的尺寸，可以为其设置alignment与fit属性对布局样式进行控制

---

AspectRatio容器组件
AspectRatio组件用来创建宽高比固定的容器

---

ConstrainedBox容器组件
ConstrainedBox组件对其内部布局的子组件进行宽高约束，其通过constraints属性来设置组件的宽度范围与高度范围，如果子组件尺寸不足或超出，就会被自动调整

---

IntrinsicHeight与IntrinsicWidth容器
IntrinsicHeight与IntrinsicWidth是两个非常特殊的布局容器，
IntrinsicHeight会根据子组件自身的高度扩展高度，
IntrinsicWidth组件会根据子组件自身的宽度扩展宽度，当子组件的尺寸可扩展时，可以尝试使用这两个组件，但这两个组件的布局性能略差

---

LimitedBox容器
LimitedBox容器的作用是限制组件的尺寸。
当LimitedBox本身的尺寸没有限制时，才可以通过设置
maxWidth和
maxHeight属性来限制子组件的最大尺寸

---

Offstage容器
Offstage容器是一个布局容器，其可以通过设置offstage属性来控制组件是否显示

---

OverflowBox容器
OverflowBox容器支持其子组件的尺寸超出容器，并且不会被截断，
通过设置maxWidth和maxHeight属性来控制允许子组件的最大尺寸

---

SizeBox容器
SizedBox是一个基础容器组件，其将其子组件的尺寸设置为固定的尺寸，不论子组件的尺寸怎样，
都会强制使用SizedBox组件所设置的尺寸

---

SizedOverflowBox容器组件
SizedOverflowBox容器组件，这个组件也会为子组件设置固定的尺寸，但是允许子组件溢出。

---

transform属性可以对Container容器的展示进行变化，transform属性需要设置为Matrix4对象，这个对象是一个4维的矩阵，其本身意义复杂，但是Flutter中提供了现成的构造方法，可以直接构造出指定变换的Matrix4对象，以围绕z轴旋转
Matrix4.rotationZ(-.2)

Transform容器组件
Container组件可以通过transform属性来对容器进行变换，
Transform容器组件也是这个作用，但是其使用更加方便，并且可以设置变换参照的坐标系。

多组件布局容器组件
多组件布局容器中允许一次布局多个子组件，

---

多组件布局容器中允许一次布局多个子组件
行布局组件	列布局组件	网格组件	列表组件
Row容器行布局	Column容器竖直布局

都属于多组件布局容器组件

Flex组件
Flex通过设置direction属性来设置水平布局（即Row）或垂直布局（即Column）

Row组件
继承自Flex组件
Row容器进行行布局，设置一组子组件，这些子组件以水平方向进行布局
textDirection属性用来设置布局的方向，从左向右进行布局或者从右向左进行布局。
Row组件中提供的属性

属性名	意义	值类型
mainAxisAlignment	设置子组件在主轴的对齐方式，即水平方向的对齐方式	MainAxisAlignment枚举start:从前往后对齐end:从后往前对齐center:居中对齐spaceBetween:平分间距对齐，首尾无间距spaceEvenly:平分间距对齐，首尾有间距spaceAround:平分间距对齐，首尾有间距，但为中间间距的一半
mainAxisSize	设置主轴的尺寸	MainAxisSize枚举min:约束的最小尺寸max:约束的最大尺寸
crossAxisAlignment	设置子组件在次轴的对齐方式，即垂直方向的对齐方式，当Row容器的高度比组件的高度大时，这个属性控制子组件在垂直方向的对齐方式	CrossAxisAlignment枚举start:从前往后对齐end:从后往前对齐center:居中对齐baseline:基线对齐stretch:拉伸子组件高度充满父容器

Column容器组件
Column组件的布局方向是竖直的。
继承自Flex组件

---

Expanded组件
Expanded组件专门用来作为Flex组件的子组件，
可以通过设置Flex权重值来方便地创建有比例关系的一组组件

---

Stack容器组件
Stack组件是Flutter中用来进行绝对布局的一个容器组件。

---

Positioned容器组件
Positioned组件通常会作为Stack组件的子组件使用，其可以设置绝对的位置和尺寸。
Positioned组件可以通过设置left、top、right和bottom属性来设置距离父容器4条边的距离，从而确定位置和尺寸，也可以通过设置width和height属性来确定尺寸

---

IndexedStack容器组件
IndexedStack容器组件与Stack容器组件的用法基本一致，都是对其内的子组件进行绝对布局，
不同的是，Stack组件会将所有子组件都进行渲染，而IndexedStack组件只会对其中的一个子组件进行渲染，具体渲染哪一个子组件由index属性控制

---

Wrap容器组件
Wrap组件，当一行或一列布局不下时，Wrap组件会自动进行换行或换列
direction属性设置布局方向是行布局或列布局
aligment相关属性设置对齐方式，
space相关属性设置间距。

---

文本输入相关组件的应用
组件布局技术
抽屉视图组件的应用
高级按钮、滑块、时间选择器等组件的应用
弹窗等组件的应用
对组件进行绘制与修饰
滚动视图与列表视图等内容可滚动组件的应用

表单容器
Form组件中的属性可以统一对输入框进行配置
Form组件中的属性

属性名	意义	值类型
autovalidate	设置是否每当输入框文本变化时，都进行有效性检查	bool对象
onChanged	设置当表单组中有输入框文本发生变化时回调的函数	无参的函数对象

TextFormField组件
TextFormField用来创建表单中进行文本输入的输入框组件。
这个组件除了可以接收和保存用户的输入外，还提供了输入提示、有效性校验等功能，
decoration属性用来设置输入的提示文本，
validator属性用来设置有效性校验逻辑。如果校验合法，就直接返回null即可
TextEditingController用来控制输入框中的文本，调用其clear方法可以清空输入框的文本，其中的text属性用来存储输入框中的文本，selection属性用来存储输入框中选中的内容区域。

TextFormField中常用属性

属性名	意义	值类型
initialValuc	设置初始值	String 对象
keyboardType	设置键盘类型	TextInputType 对象
textCapitalization	设置文本的断行模式	TextCapitalization枚举值
textInputAction	设置键盘输入按钮的类型	TextInputAction枚举值
style	设置文本风格	TextStyle对象
textDirection	设置文木方向	TextDirection枚举值
textAlign	设置文本对齐方式	TextAlign枚举值
obscureText	是否进行文本显式加密处理	bool对象
autocorrect	是否开启自动更正	bool对象
autovalidatc	是否开启自动有效性检查	bool对象
maxLines	设置最大行数	int对象
maxLength	设置最大文本长度	int对象
onEditingComplete	设置编辑完成时的回调方法	函数对象
onFieldSubmitted	设置表单提交时的回调函数	带一个字符串类刑参数的函数对象
onSaved	设置表单保存时的回调函数	带一个字符出类型参数的函数对象
validator	设置有效性校验承数	带一个字符串类型的参数，需要返回字符串对象
enabled	设冒输入框是否可用	bool对象

TextInputType类中定义了许多常量，通过这些常量可以设置输入框键盘的类型
设置输入框键盘类型的常量

名称	意义
datetime	日期时间类型
emailAddress	Email 地址类型
multiline	多行文本类型
number	数字键盘类型
phone	电话类型
text	文本类型
url	网址链接类型

TextCapitalization枚举中定义了许多断行模式
定义断行模式的枚举值

枚举值	意义
characters	使用字符进行断行
words	使用单词进行断行
sentences	使用句子进行断行

TextInputAction枚举用来进行键盘上确认按钮风格的配置
确认按钮风格的枚举值

枚举值	意义
continueAction	继续风格的按钮
done	完成风格的按钮
emergencyCall	紧急电话风格的按钮
go	前进风格的按钮
join	加入风格的按钮
newline	换行风格的按钮
next	下一步风格的按钮
previous	上一步风格的按钮
route	跳转风格的按钮
scarch	查找风格的按钮
send	发送风格的按钮
unspecified	默认风格的按钮

InputDecoration用来进行输入框提示视图的设置
InputDecoration是对输入框组件界面上的修饰，其错误信息并不会真正关联到输入校验逻辑，需要开发者手动处理。
InputDecoration中的常用属性

属性名	意义	值类型
border	设置提示视图的边框	InputBorder对象
contentPadding	设置内容的内间距	EdgeInsetsGeometry对象
counterText	在输入框下方显示，标识文字个数	String 对象
counterStyle	设置显示字数文本的风格	TextStyle 对象
disabledBorder	设置不可用时的边框	InputBorder对象
enabled	设置是否可用，如果不可用，那么帮助文本、字数、错误文本等都不会显示	bool 对象
enabledBorder	设置可用时的边框	InputBorder对象
errorBorder	设置出现错误时的边框	InputBorder对象
errorMaxLines	设置错误文木的最大行数	int 对象
errorStyle	设置显示错误文本的风格	TextStyle对象
errorText	设置错误文木	String对象
fillColor	设置填充颜色	Color对象
helperText	设置帮助文本	String对象
helperStyle	设置帮助文本的字体风格	TextStyle对象
helperText	设置帮助文本	String 对象
hintText	这个值会在长按组件时显示	String对象
hintStyle	设置提示文本字体风格	TextStyle 对象
icon	设置图标	Widget组件对象
labelText	设置标签文本	String对象
labelStyle	设置标签的字体风格	TextStyle对象
prefix	设置前缀组件	Widget组件对象
prefixIcon	设置前缀图标	Widget组件对象
prefixText	设置前缀文木	Sting 对象
prefixStyle	设置前缀文本字体风格	TextStyle对象
suffix	设置后缀组件	Widget组件对象
suffixIcon	设置后缀图标	Widget组件对象
suffixText	设置后缀文本	String 对象
suffixStyle	设置后缀文木字体风格	TextStyle对象

下拉选择框DropdownButtonFormField组件
可以提供一组选项供用户进行选择
也提供了如onChanged、decoration、onSaved、validator等属性供开发者进行配置。
其用法和TextFormField基本一致

RawKeyboardListener自定义组件接收键盘事件
RawKeyboardListener是Flutter中非常特殊的一个组件，其只支持非iOS系统。一般情况下，只有输入框组件可以接收键盘事件，使用RawKeyboardListener可以让自定义的任意组件都具有接收键盘事件的功能。

想要要对整个Container组件进行三维变换布局，则可以对其transform属性进行设置
如 transform: Matrix4.rotationZ(3.14/16)

Matrix4是Flutter中定义的一个4D矩阵，用来存储视图空间显示状态，可以使用16个浮点类型的参数对齐进行初始化，也可以使用4个4D向量对其进行初始化。
常用的构建方法

构造方法	参数	意义
Matrix4.compose(Vector3 translation,Quaternion rotation,Vector3 scale)	translation设置位移rotation 设置旋转scale 设置形变	通过位移旋转和形变相关量值来构造对象
Matrix4.diagonal3(Vector3 scale)	scale设置形变在3个方向上的缩放	进行缩放变换
Matrix4.diagonal3Values(double x,double y,double z)	x、y、z设置3个方向上的缩放比例	进行缩放变换
Matrix4.inverted(Matrix4 other)	other设置为4D矩阵对象	进行矩阵反置
Matrix4.rotationX(double radians)	radians设置旋转弧度	设置x轴旋转
Matrix4.rotationY(double radians)	radians设置旋转弧度	设置y轴旋转
Matrix4.rotationZ(double radians)	radians设置旋转弧度	设置z轴旋转
Matrix4.translation(Vector3 translation)	translation设置平移参数	进行平移变换
Matrix4.translationValues(double x,double y,double z)	x、y、z参数分别设置3个方向的平移	进行平移变换

Padding布局
Padding组件是简化版的Container组件，
其中只能有一个子组件，通过设置padding属性来约束其内边距

---

Center布局
Center组件是简化版的Container组件，其将内部组件直接进行居中布局
widthFactor和heightFactor属性分别设置组件的宽度和高度是子组件宽度和高度的多少倍。

---

ConstrainedBox布局也是一种特殊的Container组件，其可以对子组件进行尺寸的约束

---

抽屉布局
一般是垂直布局Column
drawer:Drawer(child:ListView(childrem:[Text(“1”),Text(“2”),Text(“3”)]))

---

复选按钮Checkbox组件
Checkbox用来创建选择框，其提供了选中和非选中两种状态。
Checkbox组件的常用属性

属性名	意义	值类型
activeColor	设置选中状态的颜色	Color对象
tristate	设置选择框是否为三态的，即选中、不选中和未知，value 值分别对应true、false和null	bool 对象

单选按钮Radio组件
Radio组件用来创建一组互斥的单选框，组内的单选框同时只有一个可以选中
Radio组件在设计时应用了泛型的特性，其value值的类型并不限制，同一个组中的value类型必须一致，并且使用groupValue属性来标记选中的单选按钮的value值。Radio组件中的activeColor属性用来设置选中状态下的颜色。

---

切换按钮Switch组件
Switch组件是一个开关按钮，在应用程序的设置界面，通常会提供很多配置项供用户设置
Switch组件的常用属性

属性名	意义	值类型
activeColor	设置开关开启状态下的颜色	Color对象
activeThumbImage	设置激活状态的按钮滑块图片	ImageProvider对象
activeTrackColor	设置激活状态的轨道颜色	Color对象
inactiveThumbColor	设置关闭状态下的滑块颜色	Color对象
inactiveThumbImage	设置关闭状态下的轨道图片	ImageProvider对象
inactiveTrackColor	设置关闭状态下的轨道颜色	Color对象

滑块按钮Slider组件
遇到类似具有音量调节、亮度调节等功能的组件，Slider组件非常适用于这种需求
Slider类中也定义了许多属性用来控制轨道和滑块的渲染样式
Slider类中的属性

属性名	意义	值类型
activeColor	设置滑块以及滑块左侧轨道的颜色	Color对象
divisions	设置分步数，设置后，滑动条被分成集散的几部分	int对象
inactiveColor	设置滑块右侧轨道的颜色	Color对象
onChanged	滑块的值变化时回调的方法	有一个double类型参数的承数对象
onChangeEnd	滑块的值变化结束后回调的方法	有一个double类型参数的函数对象
onChangeStart	滑块的值变化开始的时候回调的方法	有一个double类型参数的函数对象

日期时间选择弹窗
遇到需要用户选择日期或时间的场景。
例如，个人信息中需要用户选择出生年月日，票务类软件在用户订票时需要选择日期和时间，等等。
在Flutter中，提供了专门的组件来弹出时间日期选择组件，
showDatePicker方法的initialDatePickerMode参数来设置日期选择器的类型，默认是以天为单位的日期选择，也可以设置为以年为单位的选择模式
showDatePicker方法中参数的意义

参数名	意义
context	界面构建上下文
initialDate	初始化选中的日期
firstDate	组件的起始日期
lastDate	组件的结束日期
initialDatePickerMode	组件的模式，day为日期选择模式，year为年份选择模式
localc	本地化设置

Flutter中还提供了一个方法用来弹出时间选择弹窗，示例如下：
showTimePicker(context: context, initialTime: TimeOfDay.now());

---

各种样式的弹窗组件

SimpleDialog组件自定义弹窗的组件。
当用户触发了某些交互时间时，使用showDialog方法弹出窗口
FloatingActionButton(
onPressed: showDialog(context: context,
child:$impleDialog(contentPadding:EdgeInsets.all(10.0),title:new Text(‘data’),children:[Text(“1”),Text(“2”),Text(“3”)])),)

---

警告弹窗组件AlertDialog

---

showModalBottomSheet方法可以直接在当前页面中弹出自定义的底部抽屉视图

---

SnackBar组件可以弹出底部通知栏，并且默认情况下，通知栏显示一段时间后会自动消失，

---

ExpansionPanel创建折叠面板，
在实际应用中，更多时候会使用一组折叠面板来组合成可折叠列表，
ExpansionPanel通常会和ExpansionPanelList组合使用

---

按钮组相关组件
PopupMenuButton组件用来提供一个弹出菜单，当用户单击按钮后，会弹出一个功能菜单，其中可以提供多个功能按钮，并可以通过分割线进行分组
ButtonBar组件可以对一组按钮进行水平布局

---

PopupMenuDivider用来创建一条分割线，可以对按钮进行分组

---

Card组件
Card组件提供了一种简单的方式创建卡片视图，目前卡片式设计在移动端应用程序设计中十分流行，使用Card组件可以方便地构建出圆角且带阴影效果的卡片视图

---

Divider组件来创建卡片之间的分割线。

---

指示类视图组件
在应用开发中，指示类视图组件也非常重要，例如提示栏、进度条等。
ToolTip组件可以为其他组件提供工具信息，例如对于一个Text文本组件，当用户长按时，可以让其弹出一个提示文本

---

Opacity组件
Opacity组件用来控制其渲染内容的透明度，通过其opacity属性设置透明度比例，opacity属性的取值范围为0~1

---

DecoratedBox组件
DecoratedBox组件用来对其内容的边框、背景进行修饰，与Container组件配置decoration属性的作用一致

---

裁剪相关组件
如果需要使用到特殊边界的组件，那么可以尝试使用裁剪组件来实现，
ClipOval组件支持使用圆形进行边界裁剪

ClipOval组件可配置的属性

属性名	意义	值类型
clipBehavior	设置裁剪模式	Clip 枚举:nonehardEdgeantiAliasantiAliasWithSaveLayer
clipper	设置自定义的裁剪路径	CustomClipper类对象

---

ClipRect组件用来进行矩形裁剪，子组件超出的范围会被以矩形的方式裁剪掉

---

CustomPaint组件
CustomPaint组件是自定义的绘制组件，使用它可以绘制出任意需要的图形。
CustomPaint组件通过自定义的CustomPainter进行背景的绘制，Flutter中的自定义图形绘制采用Canvas完成，Canvas可以理解为一张空白的画布，开发者可以通过接口方法进行绘制。Canvas对象可调用的方法如表

Canvas对象可调用的方法

方法名	意义	参数
save	保存绘制状态	无
restore	恢复保存的状态	无
translate	平移画布	(x,y)x:水平平移位置y:垂直平移位置
rotate	旋转画布	radians:旋转角度
skew	倾斜画布	(x,y)x:水平方向倾斜位置y:垂直方向倾斜位置
drawLine	在画布上绘制一条线段	(Ofset p1,Offset p2,Paint paint) p1:线段起点 p2:线段终点 paint:画笔对象
drawPaint	使用指定的画笔填充画布	(Paint paint)paint:画笔对象
drawRect	在画布上绘制一个矩形	(Rect rect, Paint paint)rect:矩形对象paint;画笔对象
drawRRect	在画布上绘制一个圆角矩形	(RRect rrect, Paint paint)rrect:圆角矩形对象paint:画笔对象
drawDRRect	在画布上绘制一个双层圆角矩形	(RRect outer, RRect inner,Paint paint)outer:外部圆角矩形inner:内部圆角知形paint:画笔对象
drawOval	在画布上绘制一个椭圆	(Rect rect, Paint paint)rect:椭圆的矩形边框paint:画笔对象
drawCircle	在画布上绘制一个正圆	(Offset c,double radius, Paint paint)c:圆心位置 radius:半径paint:画笔对象
drawArc	在画布上绘制圆弧	(Rcct rect, double startAngle,double sweepAngle,bool useCenter,Paint paint) rect:圆弧边界startAngle:起始角度sweepAngle:圆弧角度useCenter:是否闭合paint:画笔对象
drawPath	在画布上绘制路径	(Path path, Paint paint)path:路径对象paint:画笔对象
drawlmage	在画布上绘制图像	(Image image,Offset p,Paint paint)imagc:图片对象p:位置paint:画笔对象
drawPoints	在布上绘一组点	(PointMode pointMode,Listpoints, Paint paint)pointMode:模式points:点列表paint; 画笔对象
drawShadow	在画布上绘制阴影	(Path path,Color color,double elevation,bool transparentOccluder)path:阴影路径对象color:阴影颜色elevation:阴影深度transparentOccluder:透明度

列举的Canvas相关方法中提到了Path对象，
这个对象用来描述图形路径。
Path对象中的常用方法如下

方法名	意义	参数
moveTo	将画笔移动到某个点	(double x,doubley)x:横坐标 y:纵坐标
lineTo	从当前点移动到参数点向路径中添加一段线段	(double x, double y)x:横坐标y:纵坐标
quadraticBezierTo	添加一个2次的贝塞尔曲线	(double x1,douhle y1,double x2,double y2)x1:第一个点横坐标y1:第一个点纵坐标x2:第二个点横坐标y2:第二个点纵坐标
cubicTo	添加一个3次的贝塞尔曲线	(double x1,double y1,double x2,double y2,double x3,double y3) x1:第一个点横坐标y1:第一个点纵坐标x2:第一个点横坐标y2:第二个点纵坐标x3:第三个点横坐标y3:第三个点纵坐标
arcTo	添加圆弧	(Rect rect,double startAngle,double sweepAngle,bool forceMoveTo) rect:圆弧边界startAngle:起始角度sweepAngle:圆弧角度forceMoveTo:是否强制移动
arcToPoint	添加圆弧	(Offset arcEnd,{Radius radius=Radius.zerodoublerotation=0.0bool largeArc =falsebool clockwise=true})arcEnd:终止点radius:半径rotation:旋转largeArc:是否取较大部分的圆弧clockwise:是否逆时针
addRect	添加矩形	(Rect rect)rect:矩形对象
addPolygon	添加多边形	(List points,bool close)points:多边形顶点列表close:是否闭合
addRRect	添加圆角矩形	(RRect rrect)rrect:圆角矩形对象
addPath	添加另一段路径	(Path path,Offset offset,{Float64List matrix4})path:路径对象offset:位置matrix4:变换矩阵
close	关闭路径	无
reset	重置路径	无

---

GridView组件的应用
GridView是非常强大的一个二维流式布局滚动视图，
GridView提供了许多种构造方法供开发者使用，通过不同的构造方法，开发者可以根据需要快速创建各种复杂的流式布局视图。

GridView默认构造方法

参数名	意义	值类型
scrollDirection	设置视图的可滚动方向	axis:枚举horizontal:水平方向vertical:竖直方向
Reverse	是否反向进行布局	bool 值
padding	设置内边距	EdgeInsetsGeometry
cacheExtent	设置缓存区	double 类型
children	设置列表中的元素	组件数组
gridDelegate	这个参数是必填参数，设置布局代理	SliverGridDelegate实例

---

GridView.build构造方法可以提供一个自定义的列表组件生成函数，这个
构造方法中的参数解析

参数名	意义	值类型
scrollDirection	设置视图的可滚动方向	Axis枚举
reverse	是否反向进行布局	bool 值
padding	设置内边距	EdgeInsetsGeometry
gridDelegate	这个参数是必填参数，设置布局代理	SliverGridDelegate实例
itemBuilder	列表元素生成函数	函数
itemCount	元素个数	int 值
cacheExtent	设置缓存区	double类型

GridView.count构造方法的参数的不同之处

参数名	意义	值类型
crossAxisCount	设置次轴方向每一行/列元素的个数	int 值
mainAxisSpacing	设置主轴方向上元素的间距	double 值
crossAxisSpacing	设置次轴方向上元素的间距	double 值
childAspectRatio	设置元素宽高比	double值

GridView.extent构造方法可以设置元素在次轴上扩展到指定的宽度，这个构造方法使用时不需要设置次轴方向上的元素个数，Flutter会根据元素的尺寸自动进行计算

---

GirdView.custom构造方法依赖于两个对象：SliverChildDelegate与SliverGridDelegate，SliverChildDelegate类与SliverGridDelegate类都是抽象的，在使用时，我们需要使用它们的子类。

SliverChildDelegate有两个子类：SliverChildListDelegate与SliverChildBuilderDelegate，SliverChildListDelegate通过组件列表设置GridView视图中渲染的元素，SliverChildBuilderDelegate通过元素生成函数设置GridView视图中渲染的元素。

SliverGridDelegate也有两个子类：SliverGridDelegateWithMaxCrossAxisExtent和SliverGridDelegateWithFixedCrossAxisCount，SliverGridDelegateWithMaxCrossAxisExtent通过设置元素次轴方向的尺寸来自动进行元素的布局，SliverGridDelegateWithFixedCrossAxisCount通过设置次轴方向上元素的个数来自适应元素的尺寸进行布局。

---

ListView组件的应用
ListView的使用和GridView类似

---

SingleChildScrollView组件
SingleChildScrollView组件用于创建一个滚动视图，其中只允许嵌套一个子组件，

---

Table组件
Table组件用来创建表格视图
Table组件的border属性用来设置组件的边框，使用TableRow组件创建表格中的行，每个TableRow组件中可以使用TableCell组件创建表格中的每个网格视图，即行中的每一列。

---

Flow流式布局组件
Flow流式布局组件是一种更加灵活的布局组件，其允许开发者根据需要自行控制其内子组件的布局位置，
Flow组件通过其delegate属性来控制布局，delegate属性需要设置为继承于FlowDelegate类的实例对象。在FlowDelegate的子类中，通过重写paintChildren方法来灵活地对布局进行控制

---

关于Animation对象
动画实质上是组件一个或多个属性的持续变化，例如组件尺寸变化动画、位置变化动画、颜色值变化动画等。Animation是一个抽象类，其中定义了动画的值以及动画当前执行的状态，并且定义了接口用来为动画值的改变或状态的改变提供监听。
可以通过Animation实例中的value属性获取动画对象当前的值，status属性用来获取动画对象当前的状态，status属性的值为AnimationStatus类型的枚举，枚举值的意义如表6-1所示。
AnimationStatus类型的枚举的意义

枚举值	意义
completed	动画正向执行完成
dismissed	动画逆向执行完成
forward	动画从前向后执行
reverse	动画从后向前执行

---

Animation中还有两个快捷的属性用来获取动画的执行状态
Animation中的两个快捷属性

属性名	意义	值类型
isCompleted	动画是否正向执行完成	bool类型
isDismissed	动画是否逆向执行完成	bool类型

Animation中定义的添加监听的方法

方法名	意义	参数
addListener	添加动画值变化的监听	无参、无返回值的函数
addStatusListener	添加动画状态变化的监听	函数，会将AnimationStatus状态传入
removeListenc	移出动画值变化的监听	函数
removeStatusListener	移出状态变化的监听	函数

---

AnimationController类是Animation类的子类，它是一个动画控制器类，其可以对动画的执行时间进行设置，提供了方法开启正向执行动画、逆向执行动画或停止执行动画，并且可以对动画的值进行控制。
lowerBound的默认值为0，upperBound的默认值为1，
当AnimationController被激活时，其value值会从0到1进行变化，开发者也可以根据需要自定义这两个属性的值作为变化范围。
动画变化的速度根据动画的加速函数自动计算，借助Tween补间动画构建类的配合，
可以将AnimationController值的变化映射成为界面需要的数据，例如对于尺寸从0到300的变化动画，AnimaitonController实例对象的value为0会映射成尺寸值0，
AnimationController实例对象的value值为1则会映射成尺寸值300

AnimationController动画控制器

AnimationController类中的核心属性

属性名	意义	值类型
duration	设置动画执行时间	Duration 类型
isAnimating	设置动画是否正在执行	bool 类型
lastElapsedDuration	动画已经执行的时长	Duration类型
lowerBound	设置控制器的最小值	double 类型
status	获取当前状态	AnimationStatus枚举
upperBound	设置控制器的最大值	double 类型
value	当前控制器的值	double 类型
velocity	获取动画的执行速度、每秒动画值的变化率	double 类型

AnimationController中对动画进行控制的方法

方法名	意义	参数
animateTo	运行动画到AnimationController变化到指定的值	target:目标值duration:执行时间curve:设置时间曲线，默认为线性
forward	从某个值开始运行动画	from:起始值
repeat	重复执行动画，动画执行完成后继续启动	min:最小值max:最大值period:设置周期
reverse	从某个值开始逆向执行动画	from:起始值
fling	启动投掷动画	velocity:速度animationBehavior:动画行为
stop	停止执行动画	canceled:是否取消
reset	重冒动画对象，将值重冒为lowerBound	无

Tween补间对象
补间动画是指在两个关键帧之间插入补帧，使得两个关键帧的变化以动画的方式呈现。
补间动画的应用非常广泛，例如位置移动的补间动画、尺寸变化的补间动画、颜色变化的补间动画等。
Tween的作用是在两个值之间进行补间，也可以理解为在一个范围内进行线性插值，
并且Tween实例对象中提供了方法用来生成Animation对象。下面我们通过一个缩放动画来演示Tween补间对象的应用。

---

线性动画与曲线动画

所谓线性动画与曲线动画，并不是指动画的运动轨迹，而是指动画执行时的时间函数，即动画执行速率的变化方式。以移动动画为例，组件在移动动画的过程中，移动的速度可能先快后慢，可能先慢后快，也可能开始和结束时慢、中间快，这种方式的动画就是曲线动画。前面示例代码中的动画都是线性的，即匀速进行动画。
与曲线动画相关的一个非常重要的类是CurvedAnimation类，CurvedAnimation类也是继承自Animation类的一个子类，其可以通过Curve曲线函数对象来构建曲线动画类

---

CurvedAnimation类用来将某种时间曲线应用在动画上，在其构造方法中可以指定动画正向执行时使用的时间函数和动画逆向执行时使用的时间函数

配置动画时间函数的属性

属性名	意义	值
curve	设置正向执行的时间函数	Curve
parent	设置应用时间函数的动画	Animation对象
reverseCurve	设置逆向执行的时间函数	Curve

---

Curve时间曲线函数

在Flutter中，Curve相关类用来构造时间曲线，它的作用是使动画执行的速率控制更加灵活，开发者可以更加自由地控制动画的加速和减速。

Curves类中定义了许多常量，这些常量是Flutter中内置的一些时间曲线，开发者可以根据需要直接使用，

名称	意义
bounceIn	动画开始处使用震荡曲线,即动画起始处进行同弹
bounceOut	动画结束处使用震荡曲线,即动画结束处进行回弹
bounceInOut	动画开始和结束处都使用震荡曲线
decelerate	减速曲线,即动画执行的速度越来越慢
ease	3次曲线动画,末尾执行慢
easeIn	开始执行慢,结束执行快
easeInBack	开始执行慢,结束执行快,但是在动画开始时会先逆向减速,可以理解为动画值的变化由起始的逆向初速度和正向加速度计算得来
easeInCirc	逐渐加速执行的动画
easeInCubic	逐渐加速执行的动画
easeInQuad	逐渐加速执行的动画
easeInOuart	逐渐加速执行的动画
easeInQuint	逐渐加速执行的动画
easeInSine	逐渐加速执行的动画,曲线缓和
easeInToLinear	先加速后匀速执行的动画
easeInExpo	基于指数方程逐渐加速执行的动画
easeInOut	先加速后减速执行的动画
easeInOutBack	先加速后减速,开始和结束都会冲出边界
easeInOutCirc	先加速后减速执行的动画
easeInOutCubic	先加速后减速执行的动画
easeInOutExpo	先加速后减速执行的动画
easeInOutOuad	先加速后减速执行的动画
easeInOutOuint	先加速后减速执行的动画
easeOut	减速执行的动画
easeOutBack	减速执行,在冲出末尾边界后会回弹回来
easeOutCirc	减速执行的动画
easeOutCubic	减速执行的动画
easeOutExpo	减速执行的动画
easeOutOuad	减速执行的动画
easeOutOuart	减速执行的动画
easeOutQuint	减速执行的动画
easeOutSine	减速执行的动画
elasticIn	震荡执行的动画
elasticInOut	在开始和结束进行震荡的动画
elasticOut	在结束进行震荡的动画
fastLinearToSlowEaseIn	快速地匀速执行,并在末尾减速
fastOutSlowIn	快速开始执行并逐渐匀速到达末尾值
linear	匀速执行动画
linearToEaseOut	匀速执行逐渐减速

动画组件
我们在使用动画时，要对Animation对象添加监听，并在回调函数中调用setState刷新界面。
使用动画组件可以避免重复地编写监听Animation对象的相关代码。

---

同时执行多个动画
多个动画并行执行只需要创建多个Animation对象即可，
将每个Animation对象的值绑定到各个要进行动画的属性即可。
但是，如果我们使用了动画组件，在构造方法中就只能传递一个Animation对象。
其实这个问题很好处理，在创建动画组件时，可以只将动画核心控制对象（父动画对象）传入，在动画组件内部生成补间子动画

---

更多补间动画
Flutter中提供了一整套补间动画相关的类，在实际开发中，可以根据需要来选择使用。

---

物理动画的应用

在实际开发中，还有一个动画是很难确定结束值的，这类动画可以使用物理动画的方式来开发。

摩擦减速动画示例

物理动画实际上就是模拟现实中物体运动的过程。
比如物体的滑动，我们可以通过设置物体的初速度、摩擦力以及初始位置，通过Flutter提供的物理引擎实时计算出物体的位置。
ClampingScrollSimulation类
是Flutter提供的一个滚动物理模拟引擎，其是Simulation抽象类的实现，
Simulation抽象类定义了模拟引擎的一些必备属性和方法，

Simulation抽象类定义的模拟引擎的必备属性

属性名	意义	值
tolerance	设置当模拟值到达何种精度后计算模拟运动完成	Tolerance对象,这个对象通过距离、时间和速度来构造

Simulation抽象类定义的模拟引擎的必备方法

方法名	意义	参数
x	获取某个时刻对应的位置	time:时刻,double类型
dx	获取某个时刻对应的速度	time:时刻,double
isDene	获取某个时刻运动是否完成	time:时刻,double类型

---

弹簧减速动画
BouncingScrollSimulation类用来模拟弹簧减速这种物理场景
BouncingScrollSimulation中参数的意义

参数名	意义	值
position	设置物体的初始位置	double值
velocity	设置物体的初始速度	double值
leadingExtent	当位置小于此值时,开始使用弹簧推力	double值
trailingExtent	当位置大于此值时,开始使用弹簧拉力	double值
spring	弹性配置	SpringDescription对象

SpringDescription用来对弹簧的弹性属性进行配置
SpringDescription中参数的意义

参数名	意义	值
mass	设置弹簧的质量	double值
stiffness	设置弹簧的刚度	double值
damping	设置阻尼系数	double值

var sp = BouncingScrollSimulation(position:5,velocity: 100, leadingExtent: 100,trailingExtent: 100,spring: SpringDescription(mass: 1,stiffness: 2,damping: 1));

---

列表动画

列表是应用程序开发中非常重要的一种容器组件。
大部分结构复杂的页面都可以使用列表组件来实现。
使用列表难免需要对列表进行插入和删除操作。
在Flutter中，列表的插入和删除过程可以通过动画的方式来展现。

---

AnimatedList类

AnimatedList类是一个特殊的列表类，当对列表元素进行插入或删除时，使用AnimatedList可以将过程以动画的方式展现。

AnimatedList类的使用和我们前面学习过的列表组件类型，其中有几个比较核心的属性列举如表6-12所示。

AnimatedList类中的核心属性

属性名	意义	值
initialItemCount	初始化列表元素个数	int值
itemBuilder	用来构建列表中每个元素的UI	AnimatedListItemBuilder函数其中参数如下:buildContext:构建上下文对象index:列表元素位置Animation:动画对象
padding	元素内边距	EdgeInsetsGeometry对象
reverse	设置列表是否逆向渲染	bool值
scrollDirection	设置列表滚动方向	Axis枚举horizontal:水平滚动vertical:竖直滚动

---

使用帧动画

动画的本质是组件状态的不停变化，有时，对于复杂的场景动画，可以通过使用多张静态图片快速播放的方式来实现。
我们通常也把这种方式的动画称为帧动画

---

GIF图——另一种帧动画

直接使用Image组件加载GIF图片即可。
GIF本就是一种动态的图片，其中不仅封装了一组静态图片，而且定义了每一帧的播放时间和动画的总时长，直接加载GIF动画可以更加逼真地还原源文件的动画效果。

在工程的image文件夹中放入一个名为i.gif的文件，在pubspec.yaml文件中添加路径如下：

assets:
- image/i.gif

---

共享元素的动画

共享元素是一种比较高级的动画方式。

Hero类的作用是将组件包装成共享元素，只需要在源界面将要共享的组件包装进Hero对象内，并为其设置一个唯一的标记值，在目标界面同样使用Hero对组件进行包装，并设置相同的标记值即可。

Hero对象

在调用Hero类的构造方法时，除了tag参数和child参数为必传参数外，还有一些十分重要的可选参数
需要注意，transitionOnUserGestures只针对iOS设置原生的右滑返回手势，若这个属性设置为true，则在用户进行手势返回时会产生交互式的动画效果。

Hero类中重要的可选参数

参数名	意义	值
tag	设置共享元素组件的标记值	String值
createRectTween	设置位置尺寸插值动画	函数,需要返回Tween类型
flightShuttleBuilder	设置动画过程中的组件	函数,需要返回组件对象,函数中的参数如下!flightContext:运动过程中的上下文animation:动画对象flightDirection:动画方向fromHeroContext:源组件上下文toHeroContext:目标组件上下文
placeholderBuilder	设置站位组件,在共享元素组件飞行的过程中,目标页面对应位置会先渲染站位组件	函数,返回组件对象
transitionOnUserGestures	设置当使用手势进行页面转场时,是否显示动画	bool值

---

Lottie动画
Lottie是Aribnb开源的一个面向iOS、Android和ReactNative的高性能动画库。其通过将动画定义成JSON文件，让移动端可以方便且高保真地还原设计师设计的动画效果。

Flutter原生并不支持Lottie，但是可以通过第三方的插件实现Lottie效果。

引入lottie_flutter插件

首先选择一个Lottie动画素材放入工程的assets文件夹中，LottieFiles网站是一个专门供设计师进行交流和分享的平台，可以在其中找到各种开源的Lottie动画文件，网址：
https://lottiefiles.com/

Lottie动画也是由AnimationController类进行驱动的

---

Flare动画

Flare是2Dimensions推出的一款专门用来为Flutter设计动画的工具。其与Lottie相似，设计师可以直接导出Flare动画文件供开发者使用。

引入Flare插件

flare_flutter: ^1.5.4

在2Dimensions的官网可以下载到许多优秀设计师分享的Flare动画文件，网址：https://www.2dimensions.com/

---

手势交互

Flutter中的手势系统分为两个层次。

第一层被称为触摸层，这一层比较低级，开发者可以监听到用户手指在页面上的按下、移动、抬起和取消操作，并可以实时地获取用户手指在页面上的位置。

第二层为手势层，这一层是触摸层面向应用的封装，也更加高级，开发者可以使用它直接对用户的操作手势进行监听，例如滑动、拖曳、单击、长按等。

---

触摸事件

Listener处理事件交互的组件
当我们需要监听用户手指在某个组件上的触摸行为时，只需要将其嵌套进Listener组件并为其设置监听回调函数即可。

触摸事件对应的事件对象类型不同，但它们都是对PointEvent抽象类的实现。
PointEvet中定义的属性

属性名	意义	值
timeStamp	时间戳,记录事件触发的时间	Duration对象
pointer	触摸事件的唯一标记,本次触摸未结束前,这个值不变,每次开启新的触摸事件都是不同的值	int对象
kind	触摸事件的类型	PointerDeviceKind枚举touch:触摸事件mouse:鼠标事件stylus:笔触事件invertedStylus:倒置笔触事件unknown:未知
position	触摸事件的位置	Offset对象
delta	移动事件中,当前位置相对上次触发事件位置的相差值	Offset对象
buttons	鼠标事件中,标记哪一个键被单击	int对象
down	手指当前是否按下	bool值
pressure	触摸的压力值	double值,0~1
size	被触摸的尺寸	double值

---

手势事件

使用监听触摸事件的方式来处理用户交互虽然十分灵活，但并不十分方便，首先触摸事件的回调只是简单地通知开发者触摸点的状态信息和触摸事件的类型，并不是逻辑上的用户行为，在开发应用程序时，我们往往更关心的是用户的行为类型，例如是点按行为还是长按行为，是拖曳还是滑动行为，对于拖曳和滑动，我们可能还需要知道用户拖曳和滑动的方法。Flutter中提供了手势组件，使用它可以直接解析出用户的手势行为，我们处理用户交互就更加轻松容易了。

用户的手势行为分为如下几大类：

6类手势
1.单击手势	a.单击按下	b.单击抬起	c.单击	d.单击取消
2.双击手势	a.双击
3.长按手势	a.长按
4.竖直拖曳手势	a.拖曳开始	b.拖曳状态更新	c.拖曳结束
5.水平拖曳手势	a.拖曳开始	b.拖曳状态更新	c.拖曳结束
6.滑动手势	a.滑动开始	b.滑动状态更新	c.滑动结束

可以借助GestureDetector对象来绑定手势事件

对于拖曳事件，DargUpdateDetails对象中会封装手势的相关信息
DargUpdateDetails中的属性

属性名	意义	值
sourceTimeStamp	手势时间戳	Duration对象
delta	这次更新与上次更新的的相对位置	Offset对象
globalPosition	当前位置	Offset对象

---

下拉刷新与上拉加载

下拉刷新与上拉加载是列表视图中常用的两种交互方式，几乎每种资讯类的应用都有这两种交互。
资讯类应用的信息及时性非常重要，下拉刷新操作可以提供给用户一种获取实时信息的方式，同样，资讯类应用往往有非常庞大的数据量，客户端一次性全部拉取完成是非常不现实的，往往会采用分页加载的拉取方式，即用户看完所有的信息后再拉取更多的信息。

在Flutter中，下拉刷新的交互可以采用RefreshIndicator组件实现，上拉加载更多的交互可以通过ScrollController对滚动视图的监听来实现

---

天行数据网提供了许多API接口服务，虽然其不是免费的，但是对于新注册的用户，会提供10000次的免费接口调用额度
https://www.tianapi.com/

---

使用HTTPClient进行网络请求

Dart编程语言的内置工具包中提供了对HTTP网络请求相关支持的工具。
在dart.io模块中，
其中HttpClient类用来提供HTTP客户端请求功能。

HttpClient()方法是一个工厂构造方法，其会返回一个HttpClient客户端实例，
Uri.http()方法用来构造一个HTTP协议的URL，其中第1个参数为服务端的主机地址，第2个参数为请求的路径，第3个参数为参数列表，其是一个字典参数，使用键值对的方式来进行参数的配置。

构造完要进行请求的URL链接后，调用HttpClient实例对象的getUrl方法可以直接进行get请求，将链接URL作为参数传入这个方法即可。
这个方法会返回一个包装为Future的HttpClientRequest对象，用来描述客户端请求。

请求完成后，
调用close方法关闭链接，
并且可以获取请求的回执数据HttpClientResponse对象，
调用transform方法用来对请求回执进行解码并且获取字符串类型的返回数据。

HttpClient相关方法
HttpClient可以理解为HTTP请求客户端，在构造出对象后，可以通过一些属性对其进行配置
HttpClient进行配置的属性

属性名	意义	值
idleTimeout	配置空闲超时时间,即请求非活跃状态保持多久后断开连接,模式为15秒	duration对象
connectionTimeout	设置连接的超时时间	duration
maxConnectionsPerHost	设置单个主机地址的最大连接	int对象
autoUncompress	设置响应体是否自动解压缩	bool对象
userAgent	设置请求头中的userAgent字段	string对象

HttpClient对象中封装的常用请求方法

方法名	意义	参数
open	打开一个HTTP连接,会返回一个HttpClientRequest的Future对象	method:设置请求方法host:设置请求的主机地址port:设置请求的端口path:设置请求的路径
openUrl	通过URL	打开一个HTTP连接,会返回一个HttpClientRequest的Future对象
get	直接使用GET方法打开一个HTTP连接,会返回一个HttpClientRequest的Future对象	host:设置主机地址port:设置端口path:设置请求的路径
getUrl	通过URL使用GET方法打开一个HTTP连接,会返回一个HttpClientRequest的Future对象	url:请求的URL
post	直接使用POST方法打开一个HTTP连接，会返回一个HttpClientRequest的Future对象	host:设置主机地址port:设置端口path:设置请求的路径
postUrl	通过URL使用	POST方法打开一个HTTP连接会返回一个HttpClientRequest的Feture对象
put	直接使用PUT方法打开一个HTTP连接，会返回一个HttpClientRequest的Future对象	host:设置主机地址port:设置端口path:设置请求的路径
putUrl	通过URL使用PUT方法打开一个HTTP连接会返回一个HttpClientRequest的Future对象	url:请求的URL
delete	直接使用DELETE方法打开一个HTTP连接，会返回一个HttpClientRequest的Future对象	host:设置主机地址port:设置端口path:设置请求的路径
deleteUrl	通过URL使用DELETE方法打开一个HTTP连接，会返回一个HttpClientRequest的Future对象	url:请求的URL
patch	直接使用PATCH方法打开一个HTTP连接，会返回一个HttpClientRequest的Future对象	host:设置主机地址port:设置端口path:设置请求的路径
patchUrl	通过URL使用PATCH方法打开一个HTTP连接会返回一个HttpClientRequest的Future对象	url:请求的URL
head	直接使用HEAD方法打开一个HTTP连接，会返回一个HttpClientRequest的Future对象	host:设置主机地址port:设置端口path:设置请求的路径
headUrl	通过URL使用HEAD方法打开一个HTTP连接，会返回一个HttpClientRequest的Future对象	url:请求的URL
authenticate	设置身份验证回调函数，当服务端需要客户端验证身份时会回调此函数	函数，需要返回一个包含bool数据的Future对象，参数如下:url:请求的URLscheme:模式参数realm:域
addCredentials	为请求添加客户端验证证书	url:请求的URL realm:域credentials:HttpClientCredentials证书对象
findProxy	设置查询请求代理的回调	函数，返回需要设置的代理字符串，其参数为当前请求的URL，例如:“PROXYapitianapicom:80”
close	关闭HTTP连接	force:bool值，设置是否强制关闭，默认为false，会在连接结束活跃状态后关闭

通过URL打开HTTP连接的方法中需要传入一个Uri对象，Uri对象可以使用工厂构造方法创建。

工厂构造方法

方法名	意义	参数
Uri	基础的构造方法	scheme:String类型,设置请求协议userInfo:String类型,设置用户信息host:String类型,设置主机地址port:int类型,设置端口path:String类型,设置路径pathSegments:可迭代的集合,设置路径
Uri.http	构造HTTP协议的Uri对象	authority:主机地址unencodedPath:未编码的路径,此方法会进行编码queryParameters:参数Map
Uri.thhps	构造HTTPS协议的Uri对象	参数同上

关于HttpClientRequest请求对象
调用任意打开HTTP连接的方法后都会返回一个HttpClientRequest对象，这个对象用来描述HTTP客户端请求，其中封装了请求的方法、参数、地址等信息，并且提供了接口对请求头数据、请求Cookie数据进行设置。
HttpClientRequest对象中的属性

属性名	意义	值
persistentConnection	设置请求状态是否持久	bool值,默认为true
followRedirects	设置请求是否跟踪重定向	bool
maxRedirects	设置最大重定向次数	int值,默认为5
method	获取请求的方法,只有get方法,在打开请求连接时确定,不能设置	string值
uri	获取请求的地址uri,不能设置	Uri对象
contentLength	设置请求的内容长度	int值
bufferOutput	设置请求是否允许数据流输出	bool值,默认为true
headers	获取请求头对象	HttpHeaders对象
cookies	获取请求Cookie列表	元素为Cookie的List对象
done	获取HttpClientResponse类型的Future对象,当请求完成,客户端获取到服务端返回的数据后,可以通过这个Future对象获取	Future对象
connectionInfo	获取连接信息	HttpConnectionInfo对象

调用HttpClientRequest对象的close方法会将请求输入关闭，
并返回一个和done属性一致的Future对象，
Future/包装了请求回执对象，
当请求回执完成后，可以从其中获取具体的返回数据。

HttpHeaders对象用来描述请求头信息，
在发起HTTP请求时，通常需要在请求头中添加一些额外的信息，
例如用户凭证信息、数据格式信息等。
HttpHeaders对象提供了一些操作请求头信息的属性和方法

HttpHeaders对象的常用属性

属性名	意义	值
date	设置或获取请求头date字段的值	DateTime对象
expires	设置或获取请求头expires字段的值	DateTime对象
ifModifiedSince	设置或获取请求头if-modified-since字段的值	DateTime对象
host	设置或获取请求头host字段中的主机地址部分的值	string对象
port	设置或获取请求头port字段中的端口部分的值	int
contentType	设置或获取请求头中内容类型字段的值	ContentType对象
contentLength	设置或获取请求头中内容长度字段的值	int
persistentConnection	设置请求头中的持久化连接字段的值	bool类型
chunkedTransferEncoding	设置或获取请求头中分块传输字段的值	bool类型

HttpHeaders对象的常用方法

方法名	意义	参数
value	获取请求头中某个字段的值	name:字段名
add	向请求头中添加一个字段	name:字段名value:字段值
set	设置请求头中某个字段的值	name:字段名value:字段值
remove	删除请求头中的某个字段的值	name:字段名value:字段值
removeAll	删除请求头中某个字段的所有值	name:字段名
clear	删除请求头中的所有字段	无

HttpClientResponse对象中封装了服务端传送给客户端数据的相关信息，
当获取到HttpClientResponse对象时，可以通过其中封装的属性获取返回数据的相关信息

HttpClientResponse中封装的属性

属性名	意义	值
statusCode	获取请求回执的状态码	int对象
reasonPhrase	获取回执状态码的可读化信息	string对象
contentLength	获取数据内容长度	int对象
persistentConnection	获取持久化连接配置情况	bool对象
isRedirect	获取是否是重定向	bool对象
redirects	获取重定向信息列表	List对象
headers	获取回执头信息	HttpHeaders对象
cookies	获取Cookie数据	Cookie列表

数据持久化存储
shared_preferences插件
SharedPreferences支持5种基础数据类型的存储，分别如下：

·　字符串类型
·　整数类型
·　浮点数类型
·　布尔类型
·　字符串列表类型

SharedPreferences对象中的常用方法

方法名	意义	参数
getKeys	获取所有的键,会返回字符串集合	无
get	获取某个键对应的数据	string类型的键名
containsKey	检查持久化的储存库中是否包含某个键	string类型的键名
remove	删除某个储存数据	string类型的键名
clear	清空所有数据	无