flutter组件分类

flutter组件分类

一、基础组件

文本样式

• Text：用于显示简单样式文本
  • textAlign：文本的对齐方式
  • maxLines：指定文本显示的最大行数
  • overflow：指定文本截断方式
  • textScaleFactor：文本缩放因子，主要是用于系统字体大小设置改变时对 Flutter 应用字体进行全局调整
• TextStyle：指定文本显示的样式
  • height：行高因子，具体的行高=fontSize*height
  • fontFamily：指定字体
  • fontSize：字体大小
• TextSpan：文本片段
  • style：文本片段的样式
  • text：文本片段的内容
  • children：文本片段数组，即TextSpan可以包括其他TextSpan
  • recognizer：对该文本片段手势处理后的回调
• DefaultTextStyle：用于设置默认文本样式，主要用来被继承

按钮

• ElevatedButton：按钮，默认带有阴影和灰色背景，按下后，阴影会变大
• TextButton：文本按钮，默认背景透明不带阴影，按下后，会有背景色
• OutlinedButton：按钮，默认有边框，不带阴影且背景透明，按下后，边框颜色会变亮、同时出现背景和阴影(较弱)
• IconButton：可点击的icon，不包括文字，默认没有背景，点击后会出现背景
• 带图标的按钮：ElevatedButton.icon，OutlinedButton.icon，TextButton.icon

图片

• Image
  • image：值是一个ImageProvider
    • AssetImage
    • NetworkImage
  • width：宽
  • height：高
  • fit：图片的适应模式
  • color：指定图片混合色
  • colorBlendMode：指定混合模式
  • repeat：图片重复规则
• Image.asset：从本地加载图片，返回widget
• Image.network：从网络加载图片，返回widget

ICON

• iconfont和图片相比有如下优势：
  1、体积小，减小安装包体积；
  2、矢量图标，放大不会影响清晰度；
  3、可以应用文本样式，如颜色、大小等；
  4、可以通过TextSpan和文本混用；
• 使用Material Design字体图标
  • 在pubspec.yaml文件中配置：

  flutter:
  uses-material-design: true
  

  • Icon
    • Icons类中包含了所有Material Design图标的IconData静态变量定义
• 使用自定义字体图标
  • 在pubspec.yaml文件中配置：

  fonts:
  - family: myIcon  #指定一个字体名
  fonts:
    - asset: fonts/iconfont.ttf
  

  • 定义一个MyIcons类，功能和Icons类一样：将字体文件中的所有图标都定义成静态变量：

  class MyIcons{
  	// book 图标
  	static const IconData book = const IconData(
  			0xe614, 
  			fontFamily: 'myIcon', 
  			matchTextDirection: true
  	);
  	// 微信图标
  	static const IconData wechat = const IconData(
  			0xec7d,  
  			fontFamily: 'myIcon', 
  			matchTextDirection: true
  	);
  }
  

  • 使用MyIcons类：

  Row(
  	mainAxisAlignment: MainAxisAlignment.center,
  	children: <Widget>[
  		Icon(MyIcons.book,color: Colors.purple),
  		Icon(MyIcons.wechat,color: Colors.green),
  	],
  )
  

单选开关与复选框

• Switch
• Checkbox
  • tristate：表示的hi否为三态，true/false/null

输入框及表单

• TextField：文本输入

  Column(
  	children: <Widget>[
  		TextField(
  			autofocus: true,
  			decoration: InputDecoration(
  				labelText: "用户名",
  				hintText: "用户名或邮箱",
  				prefixIcon: Icon(Icons.person)
  			),
  		),
  		TextField(
  			decoration: InputDecoration(
  				labelText: "密码",
  				hintText: "您的登录密码",
  				prefixIcon: Icon(Icons.lock)
  			),
  			obscureText: true,
  		),
  	],
  );
  

  • controller：编辑框的控制器，通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件
  • focusNode：用于控制TextField是否占有当前键盘的输入焦点，是用来和键盘交互的一个句柄
  • InputDecoration：用于控制TextField的外观显示，如提示文本、背景颜色、边框等
  • keyboardType：用于设置输入框默认的键盘输入类型，TextInputType类型

  TextInputType枚举值
  text：文本输入键盘
  multiline：多行文本，需和maxLines配合使用(设为null或大于1)
  number：数字；会弹出数字键盘
  phone：优化后的电话号码输入键盘；会弹出数字键盘并显示“* #”
  datetime：优化后的日期输入键盘；Android上会显示“: -”
  emailAddress：优化后的电子邮件地址；会显示“@ .”
  url：优化后的url输入键盘； 会显示“/ .”
  

  • textInputAction：键盘动作按钮图标(即回车键位图标)，它是一个枚举值，有多个可选值
  • style：正在编辑的文本样式
  • textAlign：输入框内编辑文本在水平方向的对齐方式
  • autofocus：是否自动获取焦点
  • obscureText：是否隐藏正在编辑的文本，如用于输入密码的场景等，文本内容会用“•”替换
  • maxLines：输入框的最大行数，默认为1；如果为null，则无行数限制
  • maxLength：输入框文本的最大长度，设置后输入框右下角会显示输入的文本计数
  • maxLengthEnforcement：决定当输入文本长度超过maxLength时如何处理，如截断、超出等
  • toolbarOptions：长按或鼠标右击时出现的菜单，包括 copy、cut、paste 以及 selectAll
  • onChange：输入框内容改变时的回调函数
  • onEditingComplete：在输入框输入完成时触发，比如按了键盘的完成键或搜索键，不接收参数
  • onSubmitted：在输入框输入完成时触发，比如按了键盘的完成键或搜索键，接收当前输入内容做为参数
  • inputFormatters：指定输入格式；当用户输入内容改变时，会根据指定的格式来校验
  • enable：如果为false，则输入框会被禁用，禁用状态不能响应输入和事件，同时显示禁用态样式
  • cursorWidth：自定义输入框光标宽度
  • cursorRadius：自定义输入框圆角
  • cursorColor：自定义输入框颜色
• Form：表单

  import 'package:flutter/material.dart';
  
  class FormTestRoute extends StatefulWidget {
  	@override
  	_FormTestRouteState createState() => _FormTestRouteState();
  }
  
  class _FormTestRouteState extends State<FormTestRoute> {
  	TextEditingController _unameController = TextEditingController();
  	TextEditingController _pwdController = TextEditingController();
  	GlobalKey _formKey = GlobalKey<FormState>();
  
  	@override
  	Widget build(BuildContext context) {
  		return Form(
  			key: _formKey, //设置globalKey，用于后面获取FormState
  			autovalidateMode: AutovalidateMode.onUserInteraction,
  			child: Column(
  				children: <Widget>[
  					TextFormField(
  						autofocus: true,
  						controller: _unameController,
  						decoration: InputDecoration(
  							labelText: "用户名",
  							hintText: "用户名或邮箱",
  							icon: Icon(Icons.person),
  						),
  						// 校验用户名
  						validator: (v) {
  							return v!.trim().isNotEmpty ? null : "用户名不能为空";
  						},
  					),
  					TextFormField(
  						controller: _pwdController,
  						decoration: InputDecoration(
  							labelText: "密码",
  							hintText: "您的登录密码",
  							icon: Icon(Icons.lock),
  						),
  						obscureText: true,
  						//校验密码
  						validator: (v) {
  							return v!.trim().length > 5 ? null : "密码不能少于6位";
  						},
  					),
  					// 登录按钮
  					Padding(
  						padding: const EdgeInsets.only(top: 28.0),
  						child: Row(
  							children: <Widget>[
  								Expanded(
  									child: ElevatedButton(
  										child: Padding(
  											padding: const EdgeInsets.all(16.0),
  											child: Text("登录"),
  										),
  										onPressed: () {
  											// 通过_formKey.currentState 获取FormState后，
  											// 调用validate()方法校验用户名密码是否合法，校验
  											// 通过后再提交数据。
  											if ((_formKey.currentState as FormState).validate()) {
  												//验证通过提交数据
  											}
  										},
  									),
  								),
  							],
  						),
  					)
  				],
  			),
  		);
  	}
  }
  

  • Form
    • autovalidate：是否自动校验输入内容；当为true时，每一个子 FormField 内容发生变化时都会自动校验合法性，并直接显示错误信息。否则，需要通过调用FormState.validate()来手动校验
    • onWillPop：决定Form所在的路由是否可以直接返回（如点击返回按钮），该回调返回一个Future对象，如果 Future 的最终结果是false，则当前路由不会返回；如果为true，则会返回到上一个路由。此属性通常用于拦截返回按钮
    • onChanged：Form的任意一个子FormField内容发生变化时会触发此回调
  • FormField
    • onSaved：保存回调
    • validator：验证回调
    • initialValue：初始值
    • autovalidate：是否自动校验
  • TextFormField：继承自FormField类，也是TextField的包装类，所以具有两者的属性
  • FormState：Form的State类。可以通过Form.of()或GlobalKey获得
    • FormState.validate()：会调用Form子孙FormField的validate回调，如果有一个校验失败，则返回false
    • FormState.save()：会调用Form子孙FormField的save回调，用于保存表