参阅书籍:
《Flutter跨平台开发入门与实践》-- 向治洪(著)
Flutter开发中有一个非常重要的理念,即一切皆为组件。Flutter中Widget不仅可以表示UI元素,也可以布局元素、动画、装饰效果。
Widget不是最终显示在设备屏幕上的显示元素,而是一个描述显示元素的配置数据。Flutter中真正代表屏幕显示元素的类是Element。
在大多数场景下,可以宽泛地认为Widget树就是指UI组件树或UI渲染树。
StatelessWidget表示没有状态的组件,它不需要管理组件的内部状态,也无法使用setState()来改变组件的状态。
对于无状态组件的内部属性,为了防止内部成员变量的值被改变,需要使用final修饰符进行修饰。
创建无状态的组件,需要继承StatelessWidget,并重写build()。
StatefulWidget表示有状态的组件。当创建一个StatefulWidget组件时,同时也会创建一个State对象,StatefulWidget就是通过与State对象进行关联来管理组件状态树的。
创建有状态的组件,需要继承StatefulWidget,然后在该组件中创建状态对象,并重写build()。
MaterialApp是Flutter开发的符合Material设计理念的Widget,可以将它类比为网页开发中的<html>标签,它提供了路由、主题色和标题等功能。
作为Flutter提供的入口Widget,MaterialApp有以下几个比较重要的参数:
1)title:String类型,表示在Android应用管理器的App上方显示的标题,对iOS设备不起作用。
2)home:Widget类型,Flutter应用默认启动后显示的第一个Widget。
3)routes:Map<String, WidgetBuilder>类型,是应用的顶级路由表。
4)theme:定义应用主题。
5)theme.primarySwatch:应用的主题色。
6)theme.primaryColor:单独设置导航栏的背景色。
示例代码:
示例效果:
AppBar是Flutter应用的顶部导航栏组件,可以用来控制路由、标题和溢出下拉菜单。
AppBar的基本属性如下:
1)leading:标题左边的图标按钮,默认是一个返回箭头样式的按钮。
2)title:导航栏标题。
3)actions:右边的动作区域中可放置多个组件,可以是图标或者文字。
4)flexibleSpace:位于标题下面的空白空间。
5)bottom:位于导航栏底部的自定义组件。
6)elevation:控制下方阴影栏的坐标。
7)backgroundColor:导航栏的颜色,默认值为ThemeData.primarycolor(主题颜色)。
8)brightness:导航栏材质的亮度。
9)textTheme:文本主题设置。
10)primary:导航栏是否显示在任务栏顶部。
11)centerTitle:标题是否居中显示。
12)titleSpacing:标题的间距。
13)toolbarOpacity:导航栏透明度,1.0表示完全不透明,0.0表示完全透明。
示例代码:
示例效果:
4.1.5 Scaffold
Scaffold是具有Material布局风格的Widget,它被设计为MaterialApp的顶级容器组件,可以自动填充可用的屏幕空间,占据整个窗口或者设备屏幕。
Scaffold常用的属性:
1)appBar:用于设置顶部的标题栏,不设置就不显示;
2)body:Widget类型,显示Scaffold内容的主要容器。
3)bottomNavigationBar:设置Scaffold的底部导航栏,items的数量必须大于2。
4)drawer:设置抽屉效果。
5)floatingActionButton:设置位于右下角的按钮。
示例代码:
示例效果:
4.2 状态管理基础知识
在Flutter开发中,Widget状态管理主要分为3种场景,即Widget自身状态管理、子Widget状态管理、父Widget和子Widget都存在的状态管理。
具体选择哪种状态管理,可以参考如下基本原则:
1)如果状态是有关界面外观效果的(如颜色、动画等),最好由Widget自身管理;
2)如果状态是用户数据(如复选框的选中状态、滑块位置等),最好由父Widget管理;
3)如果某一个状态是不同Widget共享的,最好由它们共同的父Widget管理。
4.2.1 状态生命周期
1)初始化阶段
构造函数:生命周期的起点,通过调用createState()来创建一个状态。
initState():在状态组件被插入视图树时调用,在状态组件的生命周期中只被调用一次。
didChangeDependencies():用来处理状态组件依赖关系变化,会在initState()调用结束后被调用。
build():用于构建视图。在build()中,需要根据父Widget传递过来的初始化配置数据及状态组件的当前状态,创建一个Widget然后返回。
2)更新阶段
setState():当状态数据发生变化时,通过调用setState()告诉系统使用更新后数据重构视图。
didChangeDependencies():状态组件的依赖关系发生变化后,Flutter会回调该函数,随后触发组件的构建操作。
didUpdateWidget():当组件的配置发生变化或执行热重载时,系统会回调该函数更新视图。
3)销毁阶段
deactivate():当组件的可见状态发生变化时,deactivate()会被调用,此时状态组件会被暂时从视图树中移除。
dispose():当状态组件需要被永久地从视图树中移除时,调用dispose()。调用dispose()后,组件会被销毁,在调用dispose()之前可以执行资源释放、移除监听、清理环境等工作。
4.2.2 自身状态管理
改变Widget自身的状态时使用setState(),调用setState()后视图会执行重绘操作。
示例代码:
示例效果:
4.2.3 父子组件状态管理
在此种情况下,子Widget往往是一个无状态的组件,父Widget只需要告诉子Widget何时更新即可。
示例代码:
示例效果:
4.2.4 混合状态管理
在混合状态管理模式下,子组件自身管理一些内部状态,父组件管理其他外部状态。在此种模式下,子组件使用构造函数接收父组件传递的状态,并使用回调函数返回子组件内部的状态。
示例代码:
4.3 基础组件
4.3.1 文本组件
Text组件常见属性:
textAlign属性用于控制文本的对齐方式,取值有6种:
TextAlign.left:左对齐;
TextAlign.right:右对齐;
TextAlign.center:居中对齐;
TextAlign.start:文字开始的方向对齐;
TextAlign.end:文字开始的相反方向对齐;
TextAlign.justify:两端对齐。
textDirection属性用于控制文字的显示方向,取值有2种:
TextDirection.ltr:文字方向从左到右;
TextDirection.rtl:文字方向从右到左。
overflow属性用于表示文本的截断方式,取值有3种:
TextOverflow.ellipsis:多余文本截断后以省略符表示;
TextOverflow.clip:剪切多余文本,多余文本不显示;
TextOverflow.fade:将多余的文本设为透明。
示例代码:
示例效果:
除了使用Flutter官方提供的默认字体外,还可以使用第三方字体。使用第三方字体前,需要先在pubspec.yaml配置文件中进行声明,然后使用TextStyle属性引入第三方字体。
4.3.2 按钮组件
Materail组件库中常见的按钮组件:
RaisedButton:默认是带有阴影和灰色背景的按钮,按下后阴影会变大;
FlatButton:默认是背景透明并不带阴影的按钮,按下后会有背景色;
OutlineButton:默认是一个带有边框、不带阴影且背景透明的按钮,按下后边框颜色会变亮,同时会出现背景和阴影效果;
IconButton:一个可点击的图标按钮,不支持文字,默认没有背景,点击后会出现背景。
所有Materail组件库的按钮都有两个相同点:一是按下时会有水波动画,另一个是都有一个onPressed属性来设置单击回调。
RaisedButton、FlatButton和OutlineButton等Material按钮组件都有一个图标构造函数,可以使用它来创建带图标的按钮。
按钮组件的常见属性:
其中onPressed属性是必须的。
示例代码:
示例效果:
4.3.3 图片组件
可以使用以下方式来加载不同形式的图片:
Image:通过ImageProvider来加载图片。
Image.asset:用来加载本地的图片。
Image.file:用来加载本地.file文件类型的图片。
Image.network:用来加载网络图片;
Image.memory:用来加载内存缓存的图片。
Image组件常见属性:
fit属性用于指定图片的填充模式,取值如下:
BoxFit.fill:全图显示,图片有可能被拉伸,造成图片变形;
BoxFit.contain:全图显示,图片不会变形,超出显示空间的部分会被剪裁;
BoxFit.cover:默认填充规则,在保证长宽比不变的情况下缩放以适应当前显示空间,图片不会变形;
BoxFit.fitWidth:从宽度上充满空间,高度会按比例缩放,图片不会变形,超出显示空间部分会被剪裁;
BoxFit.fitHeight:从高度上充满空间,宽度会按比例缩放,图片不会变形,超出显示空间部分会被剪裁;
BoxFit.scaleDown:与BoxFit.contain的效果差不多,但此属性会缩小图像以确保图像位于显示空间内;
BoxFit.none:没有填充策略,按图片原始大小显示。
示例:加载本地图片
示例效果:
4.3.4 图标组件
常用的图标组件:
IconButton:可交互的Icon组件;
Icons:Flutter自带的Icon组件集合;
IconTheme:Icon组件的主题;
ImageIcon:通过AssetImages或者其他图片显示Icon组件。
Icon组件常见属性:
Android支持系统自带的图标,mipmap文件中存放的就是Icon类型的图标。
Flutter默认包含了一套Materail Design的字体图标,使用前需要在pubspec.yaml文件中进行如下配置:
示例代码:
示例效果:
4.3.5 输入框组件
常见属性:
controller:输入框控制器,通过它可以获取和设置输入框的内容以及监听文本内容的改变。如果没有提供controller,则TextField组件内部会自动创建一个。
focusNode:用于控制TextField组件是否获取输入焦点,它是用户和键盘交互的一种常见方式。
decoration:用于控制TextField组件的外观显示,如提示文本、背景颜色和边框。
textAlign:输入框内文本在水平方向的对齐方式。
textDirection:输入框内文本的方向。
keyboardType:用于设置该输入框默认的键盘输入类型。
textInputAction:回车键为动作按钮图标。
style:输入框的样式。
autofocus:是否自动获取焦点,默认为false。
obscureText:是否隐藏正在编辑的文本内容。
maxLines:输入框文本的最大行数,默认为1.
maxLength:输入框中允许的最大字符数。
onChange:输入框内容改变时的回调函数。
onEditingComplete:输入框输入完成时触发,不会返回输入的内容。
onSubmitted:输入框输入完成时触发,会返回输入的内容。
inputFormatters:指定输入格式,当用户输入的内容发生改变时,会根据指定的格式来进行校验。
enabled:是否禁用输入框。
enableInteractiveSelection:是否启用交互式选择,为true时表示长选中文字,并弹出cut、copy、paste菜单。
keyboardAppearance:设置键盘的亮度模式,只能在iOS上使用。
onTap:TextField组件的点击事件。
buildCounter:自定义InputDecorator.counter小部件的回调实现。
示例代码:
示例效果:
4.3.6 表单组件
Form是一个包含表单元素的表单组件,可以用来对输入的信息进行校验。表单组件由FormField及其子类构成,最常用的表单组件有DropdownButtonFormField和TextFormField两个。
表单组件是一个有状态的组件,FormState就是表单的状态,可以通过Form.of()或GlobalKey获取组件的状态。
Form组件常见属性:
示例代码:
示例效果:
4.4 容器组件
Container是Flutter提供的容器组件,可以包含一个子组件,常用的属性如下:
示例代码:
示例效果: