Flutter 基础控件
内容：
- Button
- Image、Icon
- Switch、Checkbox
- TextField
- Form
1、Button
- RaisedButton 漂浮按钮
- FlatButton 扁平按钮
- OutlineButton 边框按钮
- IconButton 图标按钮
RaisedButton( child:Text("normal"), onPressed:()=>{}, ) FlatButton( child:Text("normal"), onPressed:()=>{},) OutlineButton( child: Text("normal"), onPressed: ()=>{}, ) IconButton( icon:Icon(Icon.thumb_up), onPressed: ()=>{}, )
FlatButton(
color: Colors.blue,
highlightColor: Colors.blue[700],
colorBrightness: Brightness.dark,
splashColor: Colors.grey,
child: Text("Submit"),
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
onPressed: () => {}
)
2、Image、Icon
Image 数据源可以是asset 、文件、内存、网络
ImageProvider
主要定义图片数据获取的接口load() ,从不同数据源获取图片需要实现不同的ImageProvider.
2.1 Image 构造方法
const Image({ ... this.width, //图片的宽 this.height, //图片高度 this.color, //图片的混合色值 this.colorBlendMode, //混合模式 this.fit,//缩放模式 this.alignment = Alignment.center, //对齐方式 this.repeat = ImageRepeat.noRepeat, //重复方式 ...})
2.2 从asset 加载图片
-
在工程根目录下创建一个images目录，并将图片avatar.png拷贝到该目录。
-
在pubspec.yaml中的flutter部分添加如下内容：
assets:
- images/avatar.png
注意: 由于 yaml 文件对缩进严格，所以必须严格按照每一层两个空格的方式进行缩进，此处assets前面应有两个空格。
3.加载图片
Image( image: AssetImage("images/avatar.png"), width: 100.0); //Image也提供了一个快捷的构造函数Image.asset用于从asset中加载、显示图片： Image.asset("images/avatar.png", width: 100.0,)
//从网络加载图片
Image(
image: NetworkImage(
width: 100.0,)
Icon
可以使用iconfont
iconfont 和图片对比对比：
1、体积小
2、矢量图标，放大不影响清晰度
3、可以像文本一样改变字体图标颜色、大小、对齐方式。
4、可以通过TextSpan 和文本混用
使用Material Design字体图标
使用自定义字体图标
1、导入字体图标文件，假设我们的字体图标保存在项目根目录下，路径为“fonts/iconfont.ttf”:
fonts:
family:myIcon 指定一个字体名
fonts:
-asset: fonts/iconfont.ttf
2、为了方便使用 定义一个MyIcons类，将字体文件中的所有图标都定义为静态变量：
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 ); }
3、使用
Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Icon(MyIcons.book,color: Colors.purple,), Icon(MyIcons.wechat,color: Colors.green,), ],)
Flutter默认包含了一套Material Design的字体图标，在pubspec.yaml文件中的配置如下：
flutter: uses-material-design: true
示例：
Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Icon(Icons.accessible,color: Colors.green,), Icon(Icons.error,color: Colors.green,), Icon(Icons.fingerprint,color: Colors.green,), ],)
3、Switch单选开关、Checkbox复选框
Material widgets库中提供了Material风格的单选开关Switch和复选框Checkbox，它们都是继承自StatelessWidget，所以它们本身不会保存当前选择状态，所以一般都是在父widget中管理选中状态。当用户点击Switch或Checkbox时，它们会触发onChanged回调，我们可以在此回调中处理选中状态改变逻辑。
示例：
class SwitchAndCheckBoxTestRoute extends StatefulWidget { @override _SwitchAndCheckBoxTestRouteState createState() => new _SwitchAndCheckBoxTestRouteState();} class _SwitchAndCheckBoxTestRouteState extends State<SwitchAndCheckBoxTestRoute> { bool _switchSelected=true; //维护单选开关状态 bool _checkboxSelected=true;//维护复选框状态 @override Widget build(BuildContext context) { return Column( children: <Widget>[ Switch( value: _switchSelected,//当前状态 onChanged:(value){ //重新构建页面 setState(() { _switchSelected=value; }); }, ), Checkbox( value: _checkboxSelected, activeColor: Colors.red, //选中时的颜色 onChanged:(value){ setState(() { _checkboxSelected=value; }); } , ) ], ); }}
4、输入框
TextField 用于文本输入。
4.1 构造方法
const TextField({ ... TextEditingController controller, FocusNode focusNode, InputDecoration decoration = const InputDecoration(), TextInputType keyboardType, TextInputAction textInputAction, TextStyle style, TextAlign textAlign = TextAlign.start, bool autofocus = false, bool obscureText = false, int maxLines = 1, int maxLength, bool maxLengthEnforced = true, ValueChanged<String> onChanged, VoidCallback onEditingComplete, ValueChanged<String> onSubmitted, List<TextInputFormatter> inputFormatters, bool enabled, this.cursorWidth = 2.0, this.cursorRadius, this.cursorColor, ...})
-
controller：编辑框的控制器，通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件。大多数情况下我们都需要显式提供一个controller来与文本框交互。如果没有提供controller，则TextField内部会自动创建一个。
-
focusNode：用于控制TextField是否占有当前键盘的输入焦点。它是我们和键盘交互的一个handle。
-
InputDecoration：用于控制TextField的外观显示，如提示文本、背景颜色、边框等。
-
keyboardType：用于设置该输入框默认的键盘输入类型，取值如下：| TextInputType枚举值 | 含义 | | ------------------- | --------------------------------------------------- | | text | 文本输入键盘 | | multiline | 多行文本，需和maxLines配合使用(设为null或大于1) | | number | 数字；会弹出数字键盘 | | phone | 优化后的电话号码输入键盘；会弹出数字键盘并显示"* #" | | datetime | 优化后的日期输入键盘；Android上会显示“: -” | | emailAddress | 优化后的电子邮件地址；会显示“@ .” | | url | 优化后的url输入键盘； 会显示“/ .” |
-
textInputAction：键盘动作按钮图标(即回车键位图标)，它是一个枚举值，有多个可选值，全部的取值列表读者可以查看API文档，下面是当值为TextInputAction.search时，原生Android系统下键盘样式：
-
style：正在编辑的文本样式。
-
textAlign: 输入框内编辑文本在水平方向的对齐方式。
-
autofocus: 是否自动获取焦点。
-
obscureText：是否隐藏正在编辑的文本，如用于输入密码的场景等，文本内容会用“•”替换。
-
maxLines：输入框的最大行数，默认为1；如果为null，则无行数限制。
-
maxLength和maxLengthEnforced ：maxLength代表输入框文本的最大长度，设置后输入框右下角会显示输入的文本计数。maxLengthEnforced决定当输入文本长度超过maxLength时是否阻止输入，为true时会阻止输入，为false时不会阻止输入但输入框会变红。
-
onChange：输入框内容改变时的回调函数；注：内容改变事件也可以通过controller来监听。
-
onEditingComplete和onSubmitted：这两个回调都是在输入框输入完成时触发，比如按了键盘的完成键（对号图标）或搜索键（🔍图标）。不同的是两个回调签名不同，onSubmitted回调是ValueChanged<String>类型，它接收当前输入内容做为参数，而onEditingComplete不接收参数。
-
inputFormatters：用于指定输入格式；当用户输入内容改变时，会根据指定的格式来校验。
-
enable：如果为false，则输入框会被禁用，禁用状态不接收输入和事件，同时显示禁用态样式（在其decoration中定义）。
-
cursorWidth、cursorRadius和cursorColor：这三个属性是用于自定义输入框光标宽度、圆角和颜色的。
4.2 获取文本内容：
//方式一 、定义变量，在onChange触发时，保存输入内容 TextField( autofocus: true, onChanged:(v){ print("onChange:$v"); } ) //方式二、通过controller获取 TextEditingController _unameController=new TextEditingController(); TextField( autofocus: true, controller: _unameController, //设置controller ...) //通过controller 获取输入框内容 print(_unameController.text)
4.3 监听文本变化：
//方式一、通过设置onChange回调 TextField(autofocus:true, onChanged: (v){ print("onChange:$v") }) //方式二、通过controller监听，如： @override void initState(){ //监听输入改变 _unameController.addListener((){ print(_unameController.text); }); }
4.4 控制焦点
焦点可以通过FocusNode和FocusScopeNode来控制，默认情况下，焦点由FocusScope来管理，它代表焦点控制范围，可以在这个范围内可以通过FocusScopeNode在输入框之间移动焦点、设置默认焦点等。我们可以通过FocusScope.of(context) 来获取widget树中默认的FocusScopeNode。
示例中创建两个TextField，第一个自动获取焦点，然后创建两个按钮：
-
点击第一个按钮可以将焦点从第一个TextField挪到第二个TextField。
-
点击第二个按钮可以关闭键盘。
示例：
class FocusTestRoute extends StatefulWidget { @override _FocusTestRouteState createState() => new _FocusTestRouteState();} class _FocusTestRouteState extends State<FocusTestRoute> { FocusNode focusNode1 = new FocusNode(); FocusNode focusNode2 = new FocusNode(); FocusScopeNode focusScopeNode; @override Widget build(BuildContext context) { return Padding( padding: EdgeInsets.all(16.0), child: Column( children: <Widget>[ TextField( autofocus: true, focusNode: focusNode1,//关联focusNode1 decoration: InputDecoration( labelText: "input1" ), ), TextField( focusNode: focusNode2,//关联focusNode2 decoration: InputDecoration( labelText: "input2" ), ), Builder(builder: (ctx) { return Column( children: <Widget>[ RaisedButton( child: Text("移动焦点"), onPressed: () { //将焦点从第一个TextField移到第二个TextField // 这是一种写法 FocusScope.of(context).requestFocus(focusNode2); // 这是第二种写法 if(null == focusScopeNode){ focusScopeNode = FocusScope.of(context); } focusScopeNode.requestFocus(focusNode2); }, ), RaisedButton( child: Text("隐藏键盘"), onPressed: () { // 当所有编辑框都失去焦点时键盘就会收起 focusNode1.unfocus(); focusNode2.unfocus(); }, ), ], ); }, ), ], ), ); } }
4.5 监听焦点状态改变事件：
// 创建 focusNode FocusNode focusNode = new FocusNode();...// focusNode绑定输入框 TextField(focusNode: focusNode);...// 监听焦点变化 focusNode.addListener((){ print(focusNode.hasFocus);});
5、表单Form
Form继承自StatefulWidget 对象，它对应的状态类为FomState
5.1 构造方法：
Form({ @required Widget child, bool autovalidate = false, WillPopCallback onWillPop, VoidCallback onChanged, })
-
autovalidate：是否自动校验输入内容；当为true时，每一个子FormField内容发生变化时都会自动校验合法性，并直接显示错误信息。否则，需要通过调用FormState.validate()来手动校验。
-
onWillPop：决定Form所在的路由是否可以直接返回（如点击返回按钮），该回调返回一个Future对象，如果Future的最终结果是false，则当前路由不会返回；如果为true，则会返回到上一个路由。此属性通常用于拦截返回按钮。
-
onChanged：Form的任意一个子FormField内容发生变化时会触发此回调。
5.2 FormState
FormState为Form的State类，可以通过Form.of()或GlobalKey获得。我们可以通过它来对Form的子孙FormField进行统一操作。我们看看其常用的三个方法：
-
FormState.validate()：调用此方法后，会调用Form子孙FormField的validate回调，如果有一个校验失败，则返回false，所有校验失败项都会返回用户返回的错误提示。
-
FormState.save()：调用此方法后，会调用Form子孙FormField的save回调，用于保存表单内容
-
FormState.reset()：调用此方法后，会将子孙FormField的内容清空。
FormFieId
构造方法：
const FormField({ ... FormFieldSetter<T> onSaved, //保存回调 FormFieldValidator<T> validator, //验证回调 T initialValue, //初始值 bool autovalidate = false, //是否自动校验。})
示例：登录页面
class FormTestRoute extends StatefulWidget { @override _FromTestRouteState createState() => new _FromTestRouteState(); } class _FromTestRouteState extends State<FormTestRoute> { GlobalKey _formKey = new GlobalKey<FormState>(); TextEditingController _unameController = new TextEditingController(); TextEditingController _pwdController = new TextEditingController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Form test"), ), body: Padding( padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 24.0), child: Form( key: _formKey, autovalidate: true, child: Column( children: <Widget>[ TextFormField( autofocus: true, controller: _unameController, decoration: InputDecoration( labelText: "用户名", hintText: "用户名或邮箱", icon: Icon(Icons.people)), validator: (v) { return v.trim().length > 0 ? 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: Builder(builder: (context) { return RaisedButton( padding: EdgeInsets.all(15.0), child: Text("登录"), color: Theme.of(context).primaryColor, textColor: Colors.white, onPressed: () { if ((_formKey.currentState as FormState) .validate()) { //验证通过提交数据,登录 print(_unameController.text); print(_pwdController.text); } }); })) ], ), ) ], ), ), ), ); } @override void initState() { // TODO: implement initState _unameController.addListener(() { print(_unameController.text); }); } }
