跟Vue不同，跟React类似，单选框与复选框需要一个状态维护，改变时使用 setState 更新状态以重新渲染UI。

一、复选框与开关

  1. class SwitchAndCheckBoxTestRoute extends StatefulWidget {
  2.   @override
  3.   _SwitchAndCheckBoxTestRouteState createState() => new _SwitchAndCheckBoxTestRouteState();
  4. }
  6. class _SwitchAndCheckBoxTestRouteState extends State<SwitchAndCheckBoxTestRoute> {
  7.   bool _switchSelected=true; // 维护单选开关状态
  8.   bool _checkboxSelected=true; // 维护复选框状态
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     return Column(
  12.       children: <Widget>[
  13.         Switch(
  14.           value: _switchSelected, //当前状态
  15.           onChanged:(value){
  16.             // 重新构建页面
  17.             setState(() {
  18.               _switchSelected=value;
  19.             });
  20.           },
  21.         ),
  22.         Checkbox(
  23.           value: _checkboxSelected,
  24.           activeColor: Colors.red, // 选中时的颜色
  25.           onChanged: (value) {
  26.             setState(() {
  27.               _checkboxSelected=value;
  28.             });
  29.           },
  30.         )
  31.       ],
  32.     );
  33.   }
  34. }

二、滑块

  1. class HomePage extends StatefulWidget {
  2.   @override
  3.   createState() => new _HomePageState();
  4. }
  6. class _HomePageState extends State<HomePage> {
  7.   double _sliderValue = 1;
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     return Scaffold(
  12.         appBar: new AppBar(
  13.           title: Text('首页'),
  14.         ),
  15.         body: Column(
  16.           children: [
  17.             Slider(
  18.               value: _sliderValue,
  19.               max: 10,
  20.               min: 0,
  21.               onChanged: (value) {
  22.                 setState(() {
  23.                   _sliderValue = value;
  24.                 });
  25.               },
  26.             )
  27.           ]
  28.         )
  29.     );
  30.   }
  31. }

三、单选框

Radio 的话, 只有点击 Radio 本身才能改变其 value, 点击 ListTile 的 title 无效

  1. class HomePage extends StatefulWidget {
  2.   @override
  3.   createState() => new _HomePageState();
  4. }
  6. enum SingingCharacter { lafayette, jefferson }
  8. class _HomePageState extends State<HomePage> {
  9.   SingingCharacter _character = SingingCharacter.lafayette;
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     return Scaffold(
  14.         appBar: new AppBar(
  15.           title: Text('首页'),
  16.         ),
  17.         body: Column(
  18.           children: [
  19.             ListTile(
  20.               title: const Text('Lafayette'),
  21.               leading: Radio(
  22.                 value: SingingCharacter.lafayette,
  23.                 groupValue: _character,
  24.                 onChanged: (SingingCharacter value) {
  25.                   setState(() { _character = value; });
  26.                 },
  27.               ),
  28.             ),
  29.             ListTile(
  30.               title: const Text('Thomas Jefferson'),
  31.               leading: Radio(
  32.                 value: SingingCharacter.jefferson,
  33.                 groupValue: _character,
  34.                 onChanged: (SingingCharacter value) {
  35.                   setState(() { _character = value; });
  36.                 },
  37.               ),
  38.             ),
  39.           ]
  40.         )
  41.     );
  42.   }
  43. }

RadioListTile

与 Radio 不同的是，RadioListTile 独占一行，点击时有水波效果

  1. class HomePage extends StatefulWidget {
  2.   @override
  3.   createState() => new _HomePageState();
  4. }
  6. enum SingingCharacter { lafayette, jefferson }
  8. class _HomePageState extends State<HomePage> {
  9.   SingingCharacter _character = SingingCharacter.lafayette;
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     return Scaffold(
  14.         appBar: new AppBar(
  15.           title: Text('首页'),
  16.         ),
  17.         body: Column(
  18.           children: <Widget>[
  19.             RadioListTile<SingingCharacter>(
  20.               title: const Text('Lafayette'),
  21.               value: SingingCharacter.lafayette,
  22.               groupValue: _character,
  23.               onChanged: (SingingCharacter value) { setState(() { _character = value; }); },
  24.             ),
  25.             RadioListTile<SingingCharacter>(
  26.               title: const Text('Thomas Jefferson'),
  27.               value: SingingCharacter.jefferson,
  28.               groupValue: _character,
  29.               onChanged: (SingingCharacter value) { setState(() { _character = value; }); },
  30.             ),
  31.           ],
  32.         )
  33.     );
  34.   }
  35. }

四、进度指示器

LinearProgressIndicator

LinearProgressIndicator 是一个线性、条状的进度条，定义如下：

  1. LinearProgressIndicator({
  2.   double value,
  3.   Color backgroundColor,
  4.   Animation<Color> valueColor,
  5.   ...
  6. })
  • value: value表示当前的进度，取值范围为[0,1]；如果value为null时则指示器会执行一个循环动画（模糊进度）；当value不为null时，指示器为一个具体进度的进度条。
  • backgroundColor: 指示器的背景色。
  • valueColor: 指示器的进度条颜色；值得注意的是，该值类型是 Animation<Color>，这允许我们对进度条的颜色也可以指定动画。如果我们不需要对进度条颜色执行动画，换言之，我们想对进度条应用一种固定的颜色，此时我们可以通过AlwaysStoppedAnimation来指定。

模糊进度条(会执行一个动画)

  1. LinearProgressIndicator(
  2.   backgroundColor: Colors.grey[200],
  3.   valueColor: AlwaysStoppedAnimation(Colors.blue),
  4. );

进度条显示50%, 常用于监控上传等情景 (动态传入value)

  1. LinearProgressIndicator(
  2.   backgroundColor: Colors.grey[200],
  3.   valueColor: AlwaysStoppedAnimation(Colors.blue),
  4.   value: .5,
  5. );

示例：以按钮点击模拟上传：

  1. class Progress extends StatefulWidget {
  2.   @override
  3.   createState() => new _ProgressState();
  4. }
  6. class _ProgressState extends State<Progress> {
  7.   var v = 0.0;
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     return Column(
  12.       children: <Widget>[
  13.         RaisedButton(
  14.           child: Text("normal"),
  15.           onPressed: () {
  16.             setState(() {
  17.               if (v < 1.0) {
  18.                 v += 0.1;
  19.               }
  20.             });
  21.           },
  22.         ),
  23.         LinearProgressIndicator(
  24.           backgroundColor: Colors.grey[200],
  25.           valueColor: AlwaysStoppedAnimation(Colors.blue),
  26.           value: v,
  27.         )
  28.       ],
  29.     );
  30.   }
  31. }

示例：进度条变色加载

  1. class ProgressRoute extends StatefulWidget {
  2.   @override
  3.   _ProgressRouteState createState() => _ProgressRouteState();
  4. }
  6. class _ProgressRouteState extends State<ProgressRoute>
  7.     with SingleTickerProviderStateMixin {
  8.   AnimationController _animationController;
  10.   @override
  11.   void initState() {
  12.     // 动画执行时间3秒
  13.     _animationController =
  14.         new AnimationController(vsync: this, duration: Duration(seconds: 3));
  15.     _animationController.forward();
  16.     _animationController.addListener(() => setState(() => {}));
  17.     super.initState();
  18.   }
  20.   @override
  21.   void dispose() {
  22.     _animationController.dispose();
  23.     super.dispose();
  24.   }
  26.   @override
  27.   Widget build(BuildContext context) {
  28.     return SingleChildScrollView(
  29.       child: Column(
  30.         children: <Widget>[
  31.           Padding(
  32.             padding: EdgeInsets.all(16),
  33.             child: LinearProgressIndicator(
  34.               backgroundColor: Colors.grey[200],
  35.               valueColor: ColorTween(begin: Colors.grey, end: Colors.blue)
  36.                   .animate(_animationController), // 从灰色变成蓝色
  37.               value: _animationController.value,
  38.             ),
  39.           )
  40.         ],
  41.       ),
  42.     );
  43.   }
  44. }

CircularProgressIndicator

CircularProgressIndicator 是一个圆形进度条，定义如下：

  1.  CircularProgressIndicator({
  2.   double value,
  3.   Color backgroundColor,
  4.   Animation<Color> valueColor,
  5.   this.strokeWidth = 4.0, // 圆形进度条的粗细
  6.   ...
  7. })

自定义尺寸

我们可以发现LinearProgressIndicator和CircularProgressIndicator，并没有提供设置圆形进度条尺寸的参数；如果我们希望LinearProgressIndicator的现细一些，或者希望CircularProgressIndicator的圆大一些该怎么做？

其实LinearProgressIndicator和CircularProgressIndicator都是取父容器的尺寸作为绘制的边界的。知道了这点，我们便可以通过尺寸限制类Widget，如ConstrainedBox、SizedBox （我们将在后面容器类组件一章中介绍）来指定尺寸，如：

  1. // 线性进度条高度指定为3
  2. SizedBox(
  3.   height: 3,
  4.   child: LinearProgressIndicator(
  5.     backgroundColor: Colors.grey[200],
  6.     valueColor: AlwaysStoppedAnimation(Colors.blue),
  7.     value: .5,
  8.   ),
  9. ),
  11. // 圆形进度条直径指定为100
  12. SizedBox(
  13.   height: 100,
  14.   width: 100,
  15.   child: CircularProgressIndicator(
  16.     backgroundColor: Colors.grey[200],
  17.     valueColor: AlwaysStoppedAnimation(Colors.blue),
  18.     value: .7,
  19.   ),
  20. ),

其他内置的进度指示器

第三方进度指示器

五、时间日期选择器

showDatePicker

六、输入框

TextField

TextField 是一个可以输入值的组件

定义：

  1. TextField({
  2.   Key key,
  3.   this.decoration = const InputDecoration(), // 文本框样式, InputDecoration
  4.   this.controller, // 控制器, TextEditingController
  5.   this.focusNode, // 焦点控制, FocusNode
  6.   this.textAlign = TextAlign.start, // 对齐
  7.   TextInputType keyboardType, // 键盘类型, TextInputType
  8.   this.textCapitalization = TextCapitalization.none, // 首字母大写
  9.   this.textInputAction, // 更改键盘本身的操作按钮, TextInputAction
  11.   this.autofocus = false, // 是否自动获取焦点
  12.   this.enabled, // 是否可用
  13.   this.readOnly = false,
  14.   this.obscureText = false,
  15.   this.autocorrect = true,
  16.   this.expands = false,
  18.   this.minLines, // 文本最小行数
  19.   this.maxLines = 1, // 文本最大行数
  20.   this.maxLength, // 最大长度
  21.   this.maxLengthEnforced = true,
  23.   this.showCursor,
  24.   this.cursorWidth = 2.0, // 光标宽度
  25.   this.cursorRadius, // 光标圆角, Radius, 比如 Radius.circular(10.0)
  26.   this.cursorColor, // 光标颜色, Color
  28.   this.onChanged, // 文本改变事件, 接收一个参数为当前输入值 void Function(String)
  29.   this.onTap,
  30.   this.onEditingComplete,
  31.   this.onSubmitted,
  33.   this.textAlignVertical,
  34.   this.textDirection,
  36.   this.style,
  37.   this.strutStyle,
  38.   this.inputFormatters,
  39.   this.keyboardAppearance,
  40.   this.scrollPadding = const EdgeInsets.all(20.0),
  41.   this.dragStartBehavior = DragStartBehavior.start,
  42.   this.enableInteractiveSelection,
  43.   this.buildCounter,
  44.   this.scrollController,
  45.   this.scrollPhysics,
  46. })

示例：

  1. TextField(
  2.   decoration: InputDecoration(
  3.       border: OutlineInputBorder(borderSide: BorderSide.none),
  4.       labelText: "验证码",
  5.       hintText: "请输入验证码",
  6.       icon: Icon(Icons.lock),
  7.       filled: true,
  8.       fillColor: Color.fromRGBO(255,0,0,.1),
  9.   ),
  10. )

TextFormField

为了方便使用，Flutter提供了一个 TextFormField 组件，它继承自FormField类，也是TextField的一个包装类，所以除了FormField定义的属性之外，它还包括TextField的属性。

创建一个输入框和 TextField 的使用没有任何区别，唯一多出来的属性时 validator，接收一个方法，并且方法的参数中会传入 value 当前表单的值。

示例：

  1. TextFormField(
  2.     controller: _priceController,
  3.     keyboardType: TextInputType.number,
  4.     decoration: InputDecoration(
  5.         labelText: "套餐价格",
  6.         hintText: "请输入套餐价格"
  7.     ),
  8. ),

键盘类型

TextInputType 可以指定键盘类型, 常见的有：

  • TextInputType.text 普通文本
  • TextInputType.number 数字
  • TextInputType.phone 电话号码
  • TextInputType.emailAddress 电子邮件
  • TextInputType.datetime 日期时间
  • TextInputType.url URL

确定键

TextInputAction 可以更改键盘本身的操作按钮

常用的：

  • TextInputAction.search
  • TextInputAction.go
  • TextInputAction.next
  • TextInputAction.done

文本框样式

InputDecoration 用于指定文本框样式, InputDecoration 包括如下常用参数：

—- 图标 —-

  • icon 输入框图标
  • prefixIcon 输入框内侧左面的控件
  • suffixIcon 输入框内侧右面的图标

—- 文本 —-

  • labelText 输入框标题文本
  • hintText 相当于html的placeholder
  • helperText 帮助文字

—- 填充 —-

  • filled 是否启用填充色
  • fillColor 填充色

—- 前缀后缀 —-

  • prefix 前缀组件, Widget, 不能跟 prefixText 共存
  • prefixText 前缀文字, String, 不能跟 prefix 共存
  • suffix 后缀组件, Widget, 不能跟 suffixText 共存
  • suffixText 后缀文字, String, 不能跟 suffix 共存

—- 文字样式 —-

  • helperStyle 帮助文字样式
  • hintStyle 提示文字样式
  • labelStyle 标签文字样式
  • counterStyle 计数器文字样式
  • prefixStyle 前缀文字样式
  • suffixStyle 后缀文字样式

—- 边框 —-

  • border 普通边线
    • InputBorder.none 无边框 (或 OutlineInputBorder(borderSide: BorderSide.none))
    • UnderlineInputBorder() 下划线边框
    • OutlineInputBorder() 四周带边框
  • focusedBorder 聚焦时的外边线
  • focusedErrorBorder 聚焦时的错误边线

focusedBorder 和 focusedErrorBorder 的属性值同 border

下划线边框

  1. UnderlineInputBorder(
  2.     borderSide: BorderSide(
  3.   color: Colors.green, //边框颜色为绿色
  4.   width: 5, //宽度为5
  5. )),

四周带边框

  1. OutlineInputBorder(
  2.   borderRadius: BorderRadius.all(Radius.circular(10)), // 设置边框圆角
  3.   borderSide: BorderSide(
  4.     color: Colors.green, // 边框颜色为绿色
  5.     width: 10, // 宽度为10
  6.   ))

InputDecoration示例

  1. TextField(
  2.   maxLength: 10,
  3.   decoration: InputDecoration(
  4.     prefixIcon: Icon(Icons.accessible),
  5.     suffixIcon: Icon(Icons.ac_unit),
  6.     icon: Icon(Icons.access_time),
  7.     hintText: 'hintText',
  8.     labelText: 'labelText',
  9.     helperText: 'helperText',
  10.     border: UnderlineInputBorder(),
  11.     filled: true,
  12.     fillColor: Colors.green.withAlpha(100),
  13.     prefix: Text('prefix '),
  14.     suffixText: 'suffixText',
  15.     helperStyle: TextStyle(color: Colors.purple),
  16.     hintStyle: TextStyle(color: Colors.white),
  17.     labelStyle: TextStyle(color: Colors.indigo),
  18.     counterStyle: TextStyle(color: Colors.cyan),
  19.     prefixStyle: TextStyle(color: Colors.teal),
  20.     suffixStyle: TextStyle(color: Colors.deepOrange),
  21.   ),
  22. )

效果：
008.png

自定义样式
我们可以不通过 decoration 属性实现样式, 可以使用类似于Web中的技巧, 在TextField外部包一层, 本身不实现任何样式, 而是控制外层容器的样式:

  1. Container(
  2.   padding: const EdgeInsets.all(8.0),
  3.   alignment: Alignment.center,
  4.   height: 60.0,
  5.   decoration: new BoxDecoration(
  6.       color: Colors.green.withAlpha(100),
  7.       border: new Border.all(color: Colors.grey, width: 4.0), // 这里控制边框粗细
  8.       borderRadius: new BorderRadius.circular(12.0)),
  9.   child: new TextFormField(
  10.     decoration: InputDecoration.collapsed(hintText: 'hello'),
  11.   ),
  12. )

效果：
009.png

FocusNode

FocusNode这个类用来通知控件获取/失去焦点, 可以对它实行焦点获取/失去的监听：

  1. class TestPage extends StatefulWidget {
  2.   @override
  3.   _TestPageState createState() => new _TestPageState();
  4. }
  6. class _TestPageState extends State<TestPage> {
  7.   FocusNode _focusNode = new FocusNode();  // 初始化一个FocusNode控件
  9.   @override
  10.   void initState(){
  11.     super.initState();
  12.     _focusNode.addListener(_focusNodeListener);  // 初始化一个listener
  13.   }
  15.   @override
  16.   void dispose(){
  17.     _focusNode.removeListener(_focusNodeListener);  // 页面消失时必须取消这个listener！！
  18.     super.dispose();
  19.   }
  21.   Future<Null> _focusNodeListener() async {  // 用async的方式实现这个listener
  22.     if (_focusNode.hasFocus){
  23.       print('TextField got the focus');
  24.     } else {
  25.       print('TextField lost the focus');
  26.     }
  27.   }
  29.   @override
  30.   Widget build(BuildContext context) {
  31.     return new Scaffold(
  32.       appBar: new AppBar(
  33.         title: new Text('Test'),
  34.       ),
  35.       body: new SafeArea(
  36.         top: false,
  37.         bottom: false,
  38.         child: new Form(
  39.           child: new Column(
  40.             children: <Widget> [
  41.               new TextFormField(
  42.                 focusNode: _focusNode,  // 将listener和TextFormField绑定
  43.                 decoration: InputDecoration(
  44.                     labelText: "第一个输入框",
  45.                     hintText: "第一个输入框"
  46.                 ),
  47.               ),
  48.               TextFormField(
  49.                 keyboardType: TextInputType.number,
  50.                 decoration: InputDecoration(
  51.                     labelText: "第二个输入框",
  52.                     hintText: "第二个输入框"
  53.                 ),
  54.               ),
  55.             ],
  56.           ),
  57.         ),
  58.       ),
  59.     );
  60.   }
  61. }

焦点控制

有的时候我们需要执行某些操作时自动获取文本框焦点或使其失去焦点, 只需要使用 TextField 的 focusNode 参数即可：

  1. FocusNode _codeFocus = FocusNode();
  3. ...
  5. TextFormField(
  6.     focusNode: _codeFocus,
  7.     decoration: InputDecoration(
  8.         border: OutlineInputBorder(borderSide: BorderSide.none),
  9.         labelText: "验证码",
  10.         hintText: "请输入验证码",
  11.         icon: Icon(Icons.lock)),
  12. ),

获取焦点：

  1. FocusScope.of(context).requestFocus(_codeFocus);

失去焦点：

  1. _codeFocus.unfocus();

在多个输入框内切换焦点

下面介绍一下onEditingComplete这个事件。

当用户提交可编辑内容时调用（例如，用户按下键盘上的“done”按钮）。

onEditingComplete的默认实现根据情况执行2种不同的行为：

  • 当完成操作被按下时，例如“done”、“go”、“send”或“search”，用户的内容被提交给[controller]，然后焦点被放弃。
  • 当按下一个未完成操作(如“next”或“previous”)时，用户的内容被提交给[controller]，但不会放弃焦点，因为开发人员可能希望立即将焦点转移到[onsubmit]中的另一个输入小部件。

示例：

  1. FocusNode secondTextFieldNode = FocusNode();
  3. Column(
  4.   children: <Widget>[
  5.     TextFormField(
  6.       onEditingComplete: () {
  7.         FocusScope.of(context).requestFocus(secondTextFieldNode);
  8.       }
  9.     ),
  10.     TextField(
  11.       focusNode: secondTextFieldNode,
  12.     ),
  13.   ],
  14. )

输入控制器

TextEditingController 用于控制文本输入, 通常用于获取文本框的输入值

  1. class TestPage extends StatefulWidget {
  2.   @override
  3.   State<StatefulWidget> createState() {
  4.     return _TestPageState();
  5.   }
  6. }
  8. class _TestPageState extends State<TestPage> {
  9.   final _controller = TextEditingController(); // 定义控制器
  11.   void initState() {
  12.     _controller.addListener(() {
  13.       final text = _controller.text.toLowerCase();
  14.       _controller.value = _controller.value.copyWith(
  15.         text: text,
  16.         selection: TextSelection(baseOffset: text.length, extentOffset: text.length),
  17.         composing: TextRange.empty,
  18.       );
  19.     });
  20.     super.initState();
  21.   }
  23.   void dispose() {
  24.     _controller.dispose();
  25.     super.dispose();
  26.   }
  28.   Widget build(BuildContext context) {
  29.     return Scaffold(
  30.       appBar: new AppBar(
  31.         title: new Text('test'),
  32.         leading: IconButton(icon: Icon(Icons.dashboard), onPressed: () {}),
  33.         actions: <Widget>[ //导航栏右侧菜单
  34.           IconButton(icon: Icon(Icons.share), onPressed: () {}),
  35.         ],
  36.       ),
  37.       body: Column(
  38.         children: <Widget>[
  39.           Container(
  40.             alignment: Alignment.center,
  41.             padding: const EdgeInsets.all(6),
  42.             child: TextFormField(
  43.               controller: _controller, // 绑定控制器
  44.               decoration: InputDecoration(border: OutlineInputBorder()),
  45.             ),
  46.           ),
  47.           RaisedButton(
  48.             onPressed: () {
  49.               var text = _controller.text; // 获取输入的值
  50.               print(text);
  51.             },
  52.             child: Text('获取数据'),
  53.           )
  54.         ],
  55.       )
  56.     );
  57.   }
  58. }

解决输入框被键盘遮挡的问题

原理不说了, 看封装好的组件：

  1. /**
  2.  * 作者:Created by H on 2019/1/23 11:08.
  3.  * 介绍: 解决输入框被遮挡问题
  4.  */
  5. import 'package:flutter/material.dart';
  6. import 'package:flutter/rendering.dart';
  8. ///
  9. /// Helper class that ensures a Widget is visible when it has the focus
  10. /// For example, for a TextFormField when the keyboard is displayed
  11. ///
  12. /// How to use it:
  13. ///
  14. /// In the class that implements the Form,
  15. ///   Instantiate a FocusNode
  16. ///   FocusNode _focusNode = new FocusNode();
  17. ///
  18. /// In the build(BuildContext context), wrap the TextFormField as follows:
  19. ///
  20. ///   new EnsureVisibleWhenFocused(
  21. ///     focusNode: _focusNode,
  22. ///     child: new TextFormField(
  23. ///       ...
  24. ///       focusNode: _focusNode,
  25. ///     ),
  26. ///   ),
  27. ///
  28. /// Initial source code written by Collin Jackson.
  29. /// Extended (see highlighting) to cover the case when the keyboard is dismissed and the
  30. /// user clicks the TextFormField/TextField which still has the focus.
  31. ///
  32. class EnsureVisibleWhenFocused extends StatefulWidget {
  33.   const EnsureVisibleWhenFocused({
  34.     Key key,
  35.     @required this.child,
  36.     @required this.focusNode,
  37.     this.curve: Curves.ease,
  38.     this.duration: const Duration(milliseconds: 100),
  39.   }) : super(key: key);
  41.   /// The node we will monitor to determine if the child is focused
  42.   final FocusNode focusNode;
  44.   /// The child widget that we are wrapping
  45.   final Widget child;
  47.   /// The curve we will use to scroll ourselves into view.
  48.   ///
  49.   /// Defaults to Curves.ease.
  50.   final Curve curve;
  52.   /// The duration we will use to scroll ourselves into view
  53.   ///
  54.   /// Defaults to 100 milliseconds.
  55.   final Duration duration;
  57.   @override
  58.   _EnsureVisibleWhenFocusedState createState() => new _EnsureVisibleWhenFocusedState();
  59. }
  61. ///
  62. /// We implement the WidgetsBindingObserver to be notified of any change to the window metrics
  63. ///
  64. class _EnsureVisibleWhenFocusedState extends State<EnsureVisibleWhenFocused> with WidgetsBindingObserver  {
  66.   @override
  67.   void initState(){
  68.     super.initState();
  69.     widget.focusNode.addListener(_ensureVisible);
  70.     WidgetsBinding.instance.addObserver(this);
  71.   }
  73.   @override
  74.   void dispose(){
  75.     WidgetsBinding.instance.removeObserver(this);
  76.     widget.focusNode.removeListener(_ensureVisible);
  77.     super.dispose();
  78.   }
  80.   ///
  81.   /// This routine is invoked when the window metrics have changed.
  82.   /// This happens when the keyboard is open or dismissed, among others.
  83.   /// It is the opportunity to check if the field has the focus
  84.   /// and to ensure it is fully visible in the viewport when
  85.   /// the keyboard is displayed
  86.   ///
  87.   @override
  88.   void didChangeMetrics(){
  89.     if (widget.focusNode.hasFocus){
  90.       _ensureVisible();
  91.     }
  92.   }
  94.   ///
  95.   /// This routine waits for the keyboard to come into view.
  96.   /// In order to prevent some issues if the Widget is dismissed in the
  97.   /// middle of the loop, we need to check the "mounted" property
  98.   ///
  99.   /// This method was suggested by Peter Yuen (see discussion).
  100.   ///
  101.   Future<Null> _keyboardToggled() async {
  102.     if (mounted){
  103.       EdgeInsets edgeInsets = MediaQuery.of(context).viewInsets;
  104.       while (mounted && MediaQuery.of(context).viewInsets == edgeInsets) {
  105.         await new Future.delayed(const Duration(milliseconds: 10));
  106.       }
  107.     }
  109.     return;
  110.   }
  112.   Future<Null> _ensureVisible() async {
  113.     // Wait for the keyboard to come into view
  114.     await Future.any([new Future.delayed(const Duration(milliseconds: 300)), _keyboardToggled()]);
  116.     // No need to go any further if the node has not the focus
  117.     if (!widget.focusNode.hasFocus){
  118.       return;
  119.     }
  121.     // Find the object which has the focus
  122.     final RenderObject object = context.findRenderObject();
  123.     final RenderAbstractViewport viewport = RenderAbstractViewport.of(object);
  124.     assert(viewport != null);
  126.     // Get the Scrollable state (in order to retrieve its offset)
  127.     ScrollableState scrollableState = Scrollable.of(context);
  128.     assert(scrollableState != null);
  130.     // Get its offset
  131.     ScrollPosition position = scrollableState.position;
  132.     double alignment;
  134.     if (position.pixels > viewport.getOffsetToReveal(object, 0.0).offset) {
  135.       // Move down to the top of the viewport
  136.       alignment = 0.0;
  137.     } else if (position.pixels < viewport.getOffsetToReveal(object, 1.0).offset){
  138.       // Move up to the bottom of the viewport
  139.       alignment = 1.0;
  140.     } else {
  141.       // No scrolling is necessary to reveal the child
  142.       return;
  143.     }
  145.     position.ensureVisible(
  146.       object,
  147.       alignment: alignment,
  148.       duration: widget.duration,
  149.       curve: widget.curve,
  150.     );
  151.   }
  153.   @override
  154.   Widget build(BuildContext context) {
  155.     return widget.child;
  156.   }
  157. }

使用方式：

  1. import 'package:flutter/material.dart';
  2. import './widgets/EnsureVisibleWhenFocused.dart';
  4. void main() {
  5.   runApp(new StartApp());
  6. }
  8. class StartApp extends StatefulWidget {
  9.   @override
  10.   State<StatefulWidget> createState() {
  11.     return new _StartAppState();
  12.   }
  13. }
  15. class _StartAppState extends State<StartApp> {
  16.   @override
  17.   Widget build(BuildContext context) {
  18.     return MaterialApp(
  19.       title: '首页',
  20.       theme: new ThemeData(
  21.         primarySwatch: Colors.blue,
  22.       ),
  23.       home: TestPage(),
  24.     );
  25.   }
  26. }
  28. class TestPage extends StatefulWidget {
  29.   @override
  30.   State<StatefulWidget> createState() {
  31.     return _TestPageState();
  32.   }
  33. }
  35. class _TestPageState extends State<TestPage> {
  36.   FocusNode _focusNode = new FocusNode();
  38.   Widget build(BuildContext context) {
  39.     return Scaffold(
  40.         appBar: new AppBar(
  41.           title: new Text('test'),
  42.           leading: IconButton(icon: Icon(Icons.dashboard), onPressed: () {}),
  43.           actions: <Widget>[
  44.             IconButton(icon: Icon(Icons.share), onPressed: () {}),
  45.           ],
  46.         ),
  47.         body: SingleChildScrollView( // 注意外层一定得有一个可滑动的组件
  48.           child: Padding(
  49.             padding: EdgeInsets.only(top: 300.0, left: 50.0, right: 50.0),
  50.             child: new EnsureVisibleWhenFocused( // 这里
  51.               focusNode: _focusNode,
  52.               child: new TextFormField(),
  53.             ),
  54.           ),
  55.         ));
  56.   }
  57. }

效果：
010.gif

七、表单

Form

Form 继承自StatefulWidget对象，它对应的状态类为FormState。Form类的定义如下：

  1. Form({
  2.   @required Widget child,
  3.   bool autovalidate = false,
  4.   WillPopCallback onWillPop,
  5.   VoidCallback onChanged,
  6. })
  • autovalidate：是否自动校验输入内容；当为true时，每一个子FormField内容发生变化时都会自动校验合法性，并直接显示错误信息。否则，需要通过调用FormState.validate()来手动校验。
  • onWillPop：决定Form所在的路由是否可以直接返回（如点击返回按钮），该回调返回一个Future对象，如果Future的最终结果是false，则当前路由不会返回；如果为true，则会返回到上一个路由。此属性通常用于拦截返回按钮。
  • onChanged：Form的任意一个子FormField内容发生变化时会触发此回调。

FormField

Form的子孙元素必须是FormField类型，FormField 是一个抽象类，定义几个属性，FormState内部通过它们来完成操作，FormField部分定义如下：

  1. const FormField({
  2.   ...
  3.   FormFieldSetter<T> onSaved, //保存回调
  4.   FormFieldValidator<T>  validator, //验证回调
  5.   T initialValue, //初始值
  6.   bool autovalidate = false, //是否自动校验。
  7. })

validator

validator 校验逻辑
如果不通过，直接可以返回提示的文案，如果通过，则返回 null 即可

调用数据校验
调用数据校验的时机一般放在按钮提交点击的时候，这个时候 _formKey 就派上用处了

  1. if ((_formKey.currentState as FormState).validate()) {
  2.   Scaffold.of(context).showSnackBar(SnackBar(
  3.     content: Text('提交成功...'),
  4.   ));
  5. }

FormState

FormState 为Form的State类，可以通过Form.of()或GlobalKey获得。我们可以通过它来对Form的子孙FormField进行统一操作。我们看看其常用的三个方法：

  • FormState.validate()：调用此方法后，会调用Form子孙FormField的validate回调，如果有一个校验失败，则返回false，所有校验失败项都会返回用户返回的错误提示。
  • FormState.save()：调用此方法后，会调用Form子孙FormField的save回调，用于保存表单内容
  • FormState.reset()：调用此方法后，会将子孙FormField的内容清空。

示例: 登录页面

  1. class FormTestRoute extends StatefulWidget {
  2.   @override
  3.   _FormTestRouteState createState() => new _FormTestRouteState();
  4. }
  6. class _FormTestRouteState extends State<FormTestRoute> {
  7.   TextEditingController _unameController = new TextEditingController();
  8.   TextEditingController _pwdController = new TextEditingController();
  9.   GlobalKey _formKey= new GlobalKey<FormState>();
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     return Scaffold(
  14.       appBar: AppBar(
  15.         title:Text("Form Test"),
  16.       ),
  17.       body: Padding(
  18.         padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 24.0),
  19.         child: Form(
  20.           key: _formKey, // 设置globalKey，用于后面获取FormState
  21.           autovalidate: true, // 开启自动校验
  22.           child: Column(
  23.             children: <Widget>[
  24.               TextFormField(
  25.                   autofocus: true,
  26.                   controller: _unameController,
  27.                   decoration: InputDecoration(
  28.                       labelText: "用户名",
  29.                       hintText: "用户名或邮箱",
  30.                       icon: Icon(Icons.person)
  31.                   ),
  32.                   // 校验用户名
  33.                   validator: (v) {
  34.                     return v.trim().length > 0 ? null : "用户名不能为空";
  35.                   }
  36.               ),
  37.               TextFormField(
  38.                   controller: _pwdController,
  39.                   decoration: InputDecoration(
  40.                       labelText: "密码",
  41.                       hintText: "您的登录密码",
  42.                       icon: Icon(Icons.lock)
  43.                   ),
  44.                   obscureText: true,
  45.                   // 校验密码
  46.                   validator: (v) {
  47.                     return v.trim().length > 5 ? null : "密码不能少于6位";
  48.                   }
  49.               ),
  50.               // 登录按钮
  51.               Padding(
  52.                 padding: const EdgeInsets.only(top: 28.0),
  53.                 child: Row(
  54.                   children: <Widget>[
  55.                     Expanded(
  56.                       child: RaisedButton(
  57.                         padding: EdgeInsets.all(15.0),
  58.                         child: Text("登录"),
  59.                         color: Theme.of(context).primaryColor,
  60.                         textColor: Colors.white,
  61.                         onPressed: () {
  62.                           // 在这里不能通过此方式获取FormState，context不对
  63.                           // print(Form.of(context));
  65.                           // 通过_formKey.currentState 获取FormState后，调用validate()方法校验用户名密码是否合法，校验通过后再提交数据。
  66.                           if((_formKey.currentState as FormState).validate()){
  67.                             // 验证通过提交数据
  68.                             print(_unameController.text);
  69.                             print(_pwdController.text);
  70.                           }
  71.                         },
  72.                       ),
  73.                     ),
  74.                   ],
  75.                 ),
  76.               )
  77.             ],
  78.           ),
  79.         ),
  80.       ),
  81.     );
  82.   }
  83. }

登录按钮的onPressed方法中不能通过 Form.of(context) 来获取，原因是，此处的 context 为 FormTestRoute 的 context，而 Form.of(context) 是根据所指定 context 向根去查找，而 FormState 是在 FormTestRoute 的子树中，所以不行。正确的做法是通过 Builder 来构建登录按钮，Builder会将widget节点的context作为回调参数：

  1. Expanded(
  2.  // 通过Builder来获取RaisedButton所在widget树的真正context(Element)
  3.   child:Builder(builder: (context){
  4.     return RaisedButton(
  5.       ...
  6.       onPressed: () {
  7.         // 由于本widget也是Form的子代widget，所以可以通过下面方式获取FormState
  8.         if(Form.of(context).validate()){
  9.           // 验证通过提交数据
  10.           print(_unameController.text);
  11.           print(_pwdController.text);
  12.         }
  13.       },
  14.     );
  15.   })
  16. )

参考资料