- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

dart组件表【属性和方法】

luichun 发表于 2022/10/11 20:34:01 2022/10/11

【摘要】 dart组件表【属性和方法】

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

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

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

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

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中通用的属性

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

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

悬浮按钮
FloatingActionButton常用的属性

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

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

AppBar中常用的属性

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

BottomNavigationBarItem中的常用属性

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

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

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

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组件的常用属性

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

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中常用属性

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

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

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

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

下拉选择框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向量对其进行初始化。
常用的构建方法

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

Center布局
Center组件是简化版的Container组件，其将内部组件直接进行居中布局
widthFactor和heightFactor属性分别设置组件的宽度和高度是子组件宽度和高度的多少倍。
------------------------------------
ConstrainedBox布局也是一种特殊的Container组件，其可以对子组件进行尺寸的约束
------------------------------------

抽屉布局
一般是垂直布局Column

drawer:Drawer(child:ListView(childrem:<Widget>[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组件的常用属性

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

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

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:<Widget>[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对象可调用的方法

列举的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\<Offset> 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默认构造方法

------------------------------------

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

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

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类型的枚举的意义

------------------------------------
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类中的核心属性

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

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

线性动画与曲线动画

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

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

配置动画时间函数的属性

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

------------------------------------

Curve时间曲线函数

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

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

动画组件
我们在使用动画时，要对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中参数的意义

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

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类中的核心属性

------------------------------------

使用帧动画

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

------------------------------------
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类中重要的可选参数

------------------------------------
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中定义的属性

------------------------------------
手势事件

使用监听触摸事件的方式来处理用户交互虽然十分灵活，但并不十分方便，首先触摸事件的回调只是简单地通知开发者触摸点的状态信息和触摸事件的类型，并不是逻辑上的用户行为，在开发应用程序时，我们往往更关心的是用户的行为类型，例如是点按行为还是长按行为，是拖曳还是滑动行为，对于拖曳和滑动，我们可能还需要知道用户拖曳和滑动的方法。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中的属性

------------------------------------

下拉刷新与上拉加载

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

在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进行配置的属性

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

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

工厂构造方法

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

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

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

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

HttpHeaders对象的常用属性

HttpHeaders对象的常用方法

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

HttpClientResponse中封装的属性

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

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

SharedPreferences对象中的常用方法

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

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

dart组件表【属性和方法】

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

dart组件表【属性和方法】

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品