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,List<Offset>points, 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<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默认构造方法
参数名 | 意义 | 值类型 |
---|
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<double>:动画对象 | 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<Rect>类型 | 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<HttpClientResponse>对象, 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<RedirectInfo>对象 | headers | 获取回执头信息 | HttpHeaders对象 | cookies | 获取Cookie数据 | Cookie列表 |
数据持久化存储 shared_preferences插件 SharedPreferences支持5种基础数据类型的存储,分别如下:
· 字符串类型
· 整数类型
· 浮点数类型
· 布尔类型
· 字符串列表类型
SharedPreferences对象中的常用方法
方法名 | 意义 | 参数 |
---|
getKeys | 获取所有的键,会返回字符串集合 | 无 | get | 获取某个键对应的数据 | string类型的键名 | containsKey | 检查持久化的储存库中是否包含某个键 | string类型的键名 | remove | 删除某个储存数据 | string类型的键名 | clear | 清空所有数据 | 无 |
|