一、Widget
在flutter中大部分类都是继承于widget，widget的作用就是描述一个UI的配置数据。可以这样说，flutter就是一个个widget以树形结构构建的UI。
widget分为statefulWidget和statelessWidget。statelessWidget不需要维护状态的变化，而statefulWidget需要维护状态的变化。选择的标准：是否需要重绘制widget。重点看下statefulWidget。
statefulWidget.png
- 从上面的代码可以看出，一个statefulWidget类会对应有一个State类
- state可以在build的时候同步被读取
- state可以在生命周期期间被改变，当state改变的时候，会调用setState()方法通知Flutter Framework去改变，当Flutter Framework接受到消息之后，会重新buildUI树，从而达到更新UI的作用
二、state生命周期
- void initState( ) { } // 初始化状态，只执行一次
- void didChangeDependencies( ) { } // 当widget依赖的对象发生变化时调用，例如全局的主题或者语言等
- void didUpdateWidget( covariant T oldWidget ) { } // 当widget重新构建的时候调用，根据canUpdate方法判断
- void build( ) { } // 构建UI
- void reassemble( ) { } // 调试模式下，热重载执行，release模式下不会执行
- void deactivate( ) { } // 当widget被移除的时候调用
-
void dispose( ) { } // 当widget永久一处的时候调用，可以作为释放资源
state图解.png
三、基础的控件Widget
flutter除了提供一套基础的widget，还提供了一套Material风格（android风格）和Cupertino风格（iOS风格）,官网：https://api.flutter.dev/flutter/material/material-library.html
1、Text
Tip:显示文本，有些样式属性和android的textView类似，例如对齐、大小、颜色等
- 使用方法
Text(‘这是一个文本信息’)
- 属性介绍
| 属性 | 含义 |
|---|---|
| style | 样式，TextStyle类型，可以设置文本的颜色，大小，背景颜色 |
| textAlign | 对齐方式，TextAlign.left/center/right |
| textDirection | 文本方向，TextDirection.ltr/rtl，从左到右/从右到左 |
| softWrap | 是否自动换号 |
| overflow | 当softWrap设置成false的时候，显示不全的文字以什么样子展示。TextOverflow.clip/fade/ellipsis/visible，多余部分剪裁/越来越透明/省略号结尾/一直显示会超出父视图 |
| textScaleFactor | 文字缩放系数 |
2、按钮
Tip：Material库提供了很多按钮，例如ElevatedButton、TextButton、OutlinedButton等，这些都是直接或者间接对ButtonStyleButton
的包装定制，所以大多数属性和ButtonStyleButton一样。另外所有的MaterialButton都有两个共同特征：1、按下时会有水波动画 2、都有一个onPress回调方法，若不提供回调方法，则按钮时禁止状态，不响应用户点击
button.png
- 使用方法
ElevatedButton(
onPressed: () {},
child: Text('ElevatedButton'),
)
OutlinedButton(
onPressed: () {},
child: Text('OutlinedButton'),
)
TextButton(
onPressed: () {},
child: Text('TextButton'),
)
-
属性说明
Button的样式根据它的属性style通过MaterialStateProperty设置，MaterialStateProperty具有以下属性
| 属性 | 含义 |
|---|---|
| textStyle | 字体样式 |
| backgroundColor | 背景颜色 |
| foregroundColor | 字体颜色 |
| overlayColor | 高亮颜色，当按钮处于focused, hovered, or pressed时的颜色 |
| shadowColor | 阴影颜色 |
| elevation | 阴影值 |
| padding | 间距 |
| minimumSize | 最小尺寸 |
| side | 边框 |
| shape | 形状 |
| mouseCursor | 鼠标停留在上面时 |
| visualDensity | 按钮布局紧凑程度 |
| tapTargetSize | 相应区域 |
| animationDuration | 【shape】和【elevation】的动画更改时间 |
| enableFeedback | 检测手势是否提供音效提示 |
3、图片
Tip：使用Image来加载并显示图片，Image的数据源可以是asset、文件、内存或者网络。ImageProvider是一个抽象类，主要定义了图片数据获取的接口load( )，从不同的数据源中获取数据。如AssetImage可以加载本地图片资源，NetworkImage可以加载网络图片。
- 加载本地图片
Image(image: AssetImage(‘assets/images/cat.webp’)) //注意此处是图片相对路径
Image.asset(‘assets/images/cat.webp’)
- 加载网络图片
Image(image: NetworkImage(‘https://img0.baidu.com/it/u=3870964477,3746012709&fm=26&fmt=auto&gp=0.jpg’))
Image.network(‘https://img0.baidu.com/it/u=3870964477,3746012709&fm=26&fmt=auto&gp=0.jpg’)
- 系统图标
Icon(Icons.ac_unit)
- Image其他属性
| 属性 | 含义 |
|---|---|
| width | 宽度 |
| height | 高度 |
| fit | 填充方式，fill（完全填充）、contain（等比拉伸，直至一边充满），Cover（等比拉伸，直至两边充满，可能有一边超出）、fitwidth（等比拉伸，宽充满）、fitHeight（等比拉伸，高度充满）、None（当组件比图片小时，不拉伸，超出范围截取）、scaleDown（当组件比图片小时，图片等比缩放，效果和contain一样） |
| repeat | 重复模式，repeat（x，y方向都重复）、repeatX（x方向重复）、repeatY（Y方向重复）、noRepeat（不重复） |
| frameBuilder | 加载图片的回调 |
| loadingBuilder | 图片加载进度，相比frameBuilder更加精细 |
4、输入框
- 使用方法
TextField(
maxLength: 11,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
/*边角*/
borderRadius: BorderRadius.all(
Radius.circular(30), //边角为30
),
borderSide: BorderSide(
color: Colors.amber, //边线颜色为黄色
width: 2, //边线宽度为2
),
),
isDense: true,
icon: Icon(Icons.ten_k),
labelText: '手机号',
hintText: '请输入手机号',
helperText: '请输入数字',
prefixIcon: Icon(Icons.phone),
suffixIcon: Icon(Icons.remove_red_eye)),
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.digitsOnly
],
)
textField.png
- 属性介绍
| 属性 | 含义 |
|---|---|
| controller | 控制器，控制输入框文字 ，一般需要自己设置来获取输入框文字 |
| focusNode | 用于控制TextField是否占有当前键盘的输入焦点 |
| decoration | 用于控制输入框外观，如提示文本、背景、边框等 |
| keyboardType | 键盘类型， text（文本输入）、 multiline（多行文本，需要配合 maxLines使用）、number（数字）、phone（电话）、dateTime（日期）、emailAddress（电子邮箱）、url（网址） |
| style | 正在编辑的文本样式 |
| textAlign | 输入文字的对齐方式 |
| autofocus | 是否自动获取焦点 |
| obscureText | 是否隐藏正在输入的文字 |
| maxLines | 最大行数 |
| maxLength | 最大长度 |
| maxLengthEnforced | 决定达到最大长度之后是否阻止输入，默认true |
| onChanged | 输入框文字发生改变时的回调 |
| onSubmitted | 输入框完成或者搜索的时候回调，带有参数 |
| onEditingComplete | 输入框完成或者搜索的时候回调，没有参数 |
| inputFormatters | 用于输入内容检测 |
| cursorWidth | 光标宽度 |
| cursorRadius | 光标圆角 |
| cursorColor | 光标颜色 |
End：代码之技在于练
网友评论