TextField

[

](https://book.flutterchina.club/chapter3/input_and_form.html)

TextField的样式 decoration

  2. TextField(
  3.          onChanged: (value) {
  4.         //输入内容改变时的回调,value是变化后文本框里的内容
  5.         debugPrint('input $value');
  6.       },
  7.       onSubmitted: (value) {
  8.         //点击确定时的回调,value是文本框里所有的内容
  9.         debugPrint('submit $value');
  10.       },
  11.       decoration: InputDecoration(
  12.         icon: Icon(Icons.subject),
  13.         labelText: 'Title', //输入框上方的title
  14.         hintText: 'Enter Post Title', //placeText
  15.         // border: InputBorder.none,//设置文本框的下边框无
  16.         border: OutlineInputBorder(), //四周外边框
  17.         fillColor: Colors.grey[400], //填充的背景色
  18.         filled: true, //是否填充背景色
  19.       ),
  20.     );

监听文本变化

  • 使用TextEditingController监听文本字段变化 ```dart

class TextFieldDemo extends StatefulWidget { @override _TextFieldDemoState createState() => _TextFieldDemoState(); }

class _TextFieldDemoState extends State { final textEditingController = TextEditingController(); //创建文本框监听

@override void dispose() { // TODO: implement dispose textEditingController.dispose(); //释放textEditingController super.dispose(); }

@override void initState() { // TODO: implement initState super.initState(); textEditingController.text = ‘Hi’; textEditingController.addListener( () { debugPrint(‘input ${textEditingController.text}’); }, ); }

@override Widget build(BuildContext context) { return TextField( controller: textEditingController,

  1.   onSubmitted: (value) {
  2.     //点击确定时的回调,value是文本框里所有的内容
  3.     debugPrint('submit $value');
  4.   },
  5.   decoration: InputDecoration(
  6.     icon: Icon(Icons.subject),
  7.     labelText: 'Title', //输入框上方的title
  8.     hintText: 'Enter Post Title', //placeText
  9.     // border: InputBorder.none,//设置文本框的下边框无
  10.     border: OutlineInputBorder(), //四周外边框
  11.     fillColor: Colors.grey[400], //填充的背景色
  12.     filled: true, //是否填充背景色
  13.   ),
  14. );

} }

  2. - 设置onChange回调
  3. ```dart
  4. TextField(
  5.     autofocus: true,
  6.     onChanged: (v) {
  7.       print("onChange: $v");
  8.     }
  9. )

控制焦点

  • 通过FocusNode和FocusScopeNode来控制 ```dart

class FocusTestRoute extends StatefulWidget { @override _FocusTestRouteState createState() => new _FocusTestRouteState(); }

class _FocusTestRouteState extends State { 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: [ TextField( autofocus: true, focusNode: focusNode1,//关联focusNode1 decoration: InputDecoration( labelText: “input1” ), ), TextField( focusNode: focusNode2,//关联focusNode2 decoration: InputDecoration( labelText: “input2” ), ), Builder(builder: (ctx) { return Column( children: [ 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(); }, ), ], ); }, ), ], ), ); }

}

  2. - 监听焦点状态改变事件
  3. ```dart
  4. // 创建 focusNode   
  5. FocusNode focusNode = new FocusNode();
  6. ...
  7. // focusNode绑定输入框   
  8. TextField(focusNode: focusNode);
  9. ...
  10. // 监听焦点变化    
  11. focusNode.addListener((){
  12.   //获得焦点时focusNode.hasFocus值为true，失去焦点时为false。
  13.    print(focusNode.hasFocus);
  14. });

Form 表单

  2. class RegisterForm extends StatefulWidget {
  3.   @override
  4.   _RegisterFormState createState() => _RegisterFormState();
  5. }
  7. class _RegisterFormState extends State<RegisterForm> {
  8.   final registerFormKey = GlobalKey<FormState>(); //创建FormKey
  9.   String username, password;
  10.   bool autovalidate = false;
  12.   void submitRegisterForm() {
  13.     if (registerFormKey.currentState.validate()) {
  14.       registerFormKey.currentState.save(); //调用onSave
  15.       registerFormKey.currentState.validate(); //调用验证
  16.       debugPrint('username : $username , password : $password');
  17.     } else {
  18.       setState(() {
  19.         autovalidate = true;
  20.       });
  21.     }
  22.   }
  24.   String validatorUsername(value) {
  25.     if (value.isEmpty) {
  26.       return 'Username is required';
  27.     }
  28.     return null;
  29.   }
  31.   String validatorPassword(value) {
  32.     if (value.isEmpty) {
  33.       return 'Password is required';
  34.     }
  35.     return null;
  36.   }
  38.   @override
  39.   Widget build(BuildContext context) {
  40.     return Form(
  41.       key: registerFormKey, //指定可以
  42.       child: Column(
  43.         children: <Widget>[
  44.           TextFormField(
  45.             decoration: InputDecoration(
  46.               labelText: 'Username',
  47.               helperText: '',
  48.             ),
  49.             onSaved: (value) {
  50.               username = value; //获取TextField的值
  51.             },
  52.             validator: validatorUsername, //添加验证函数
  53.             autovalidate: autovalidate,
  54.           ),
  55.           TextFormField(
  56.             obscureText: true, //密码的圆点显示
  57.             decoration: InputDecoration(
  58.               labelText: 'Password',
  59.               helperText: '',
  60.             ),
  61.             onSaved: (value) {
  62.               password = value; //获取TextField的值
  63.             },
  64.             validator: validatorPassword, //添加验证函数
  65.             autovalidate: autovalidate,
  66.           ),
  67.           SizedBox(
  68.             height: 32.0,
  69.           ),
  70.           Container(
  71.             width: double.infinity,
  72.             child: RaisedButton(
  73.               color: Theme.of(context).accentColor,
  74.               child: Text('Register', style: TextStyle(color: Colors.white)),
  75.               elevation: 0.0,
  76.               onPressed: submitRegisterForm,
  77.             ),
  78.           )
  79.         ],
  80.       ),
  81.     );
  82.   }
  83. }

自定义案例

  1. import 'package:flutter/material.dart';
  2. ///主色调
  3. const MaterialColor primary = const MaterialColor(
  4.   0xfffb7299,
  5.   const <int, Color>{50: const Color(0xffff9db5)},
  6. );
  8. ///登录输入框，自定义widget
  9. class LoginInput extends StatefulWidget {
  10.   final String title;
  11.   final String hint;
  12.   final ValueChanged<String> onChanged;
  13.   final ValueChanged<bool> focusChanged;
  14.   final bool lineStretch;
  15.   final bool obscureText;
  16.   final TextInputType keyboardType;
  18.   const LoginInput(this.title, this.hint,
  19.       {Key key,
  20.       this.onChanged,
  21.       this.focusChanged,
  22.       this.lineStretch = false,
  23.       this.obscureText = false,
  24.       this.keyboardType})
  25.       : super(key: key);
  27.   @override
  28.   _LoginInputState createState() => _LoginInputState();
  29. }
  31. class _LoginInputState extends State<LoginInput> {
  32.   final _focusNode = FocusNode();
  34.   @override
  35.   void initState() {
  36.     super.initState();
  37.     //是否获取光标的监听
  38.     _focusNode.addListener(() {
  39.       print("Has focus: ${_focusNode.hasFocus}");
  40.       if (widget.focusChanged != null) {
  41.         widget.focusChanged(_focusNode.hasFocus);
  42.       }
  43.     });
  44.   }
  46.   @override
  47.   void dispose() {
  48.     _focusNode.dispose();
  49.     super.dispose();
  50.   }
  52.   @override
  53.   Widget build(BuildContext context) {
  54.     return Column(
  55.       children: [
  56.         Row(
  57.           children: [
  58.             Container(
  59.               padding: EdgeInsets.only(left: 15),
  60.               width: 100,
  61.               child: Text(
  62.                 widget.title,
  63.                 style: TextStyle(fontSize: 16),
  64.               ),
  65.             ),
  66.             _input()
  67.           ],
  68.         ),
  69.         Padding(
  70.           padding: EdgeInsets.only(left: !widget.lineStretch ? 15 : 0),
  71.           child: Divider(
  72.             height: 1,
  73.             thickness: 0.5,
  74.           ),
  75.         )
  76.       ],
  77.     );
  78.   }
  80.   _input() {
  81.     return Expanded(
  82.         child: TextField(
  83.       focusNode: _focusNode,
  84.       onChanged: widget.onChanged,
  85.       obscureText: widget.obscureText,
  86.       keyboardType: widget.keyboardType,
  87.       autofocus: !widget.obscureText,
  88.       cursorColor: primary,
  89.       style: TextStyle(
  90.           fontSize: 16, color: Colors.black, fontWeight: FontWeight.w300),
  91.       //输入框的样式
  92.       decoration: InputDecoration(
  93.           contentPadding: EdgeInsets.only(left: 20, right: 20),
  94.           border: InputBorder.none,
  95.           hintText: widget.hint ?? '',
  96.           hintStyle: TextStyle(fontSize: 15, color: Colors.grey)),
  97.     ));
  98.   }
  99. }

复选框

Checkbox

  1.  var checkbox = Checkbox(
  2.                       value: _checkBoxA,
  3.                       onChanged: (value) {
  4.                         setState(() {
  5.                           _checkBoxA = value;
  6.                         });
  7.                       },
  8.                       activeColor: Colors.black,//勾选状态的颜色,默认是主题下的Theme.of(context).accentColor
  9.                     );

CheckboxListTile

  1. var checkboxListTile = CheckboxListTile(
  2.                   value: _checkBoxA,
  3.                   onChanged: (value) {
  4.                     setState(() {
  5.                       _checkBoxA = value;
  6.                     });
  7.                   },
  8.                   title: Text('Checkbox Item A'),//标题文字
  9.                   subtitle: Text('Description'),//副标题
  10.                   secondary: Icon(Icons.bookmark),//显示的图标
  11.                   selected: _checkBoxA,//是否处于激活状态
  12.                 );

单选框

Radio

  1. class RadioDemo extends StatefulWidget {
  2.   @override
  3.   _RadioDemoState createState() => _RadioDemoState();
  4. }
  6. class _RadioDemoState extends State<RadioDemo> {
  7.   int _radioGroupA = 0;
  9.   void _handleRadioValueChanged(int value) {
  10.     setState(() {
  11.       _radioGroupA = value;
  12.     });
  13.   }
  15.   @override
  16.   Widget build(BuildContext context) {
  17.     var radioDemo = Row(
  18.                   mainAxisAlignment: MainAxisAlignment.center,
  19.                   children: <Widget>[
  20.                     Radio(
  21.                       value: 0,
  22.                       groupValue: _radioGroupA,//权组值
  23.                       onChanged: _handleRadioValueChanged,
  24.                       activeColor: Colors.black,//选中的颜色
  25.                     ),
  26.                     Radio(
  27.                       value: 1,
  28.                       groupValue: _radioGroupA,//权组值
  29.                       onChanged: _handleRadioValueChanged,
  30.                       activeColor: Colors.black,//选中的颜色
  31.                     )
  32.                   ],
  33.                 );
  34.         return Scaffold(
  35.           appBar: AppBar(
  36.             title: Text('RadioDemo'),
  37.             elevation: 0.0,
  38.           ),
  39.           body: Container(
  40.             padding: EdgeInsets.all(16.0),
  41.             child: Column(
  42.               mainAxisAlignment: MainAxisAlignment.center,
  43.               children: <Widget>[
  44.                radioDemo,
  45.           ],
  46.         ),
  47.       ),
  48.     );
  49.   }
  50. }

RadioListTile

  1. Column(
  2.               mainAxisAlignment: MainAxisAlignment.center,
  3.               children: <Widget>[
  4.                 Text('RadioGroupValue:$_radioGroupA'),
  5.                 SizedBox(height: 32.0),
  6.                RadioListTile(
  7.                  value: 0,
  8.                  groupValue: _radioGroupA,
  9.                  onChanged: _handleRadioValueChanged,
  10.                  title:Text('Option A') ,
  11.                  subtitle: Text('Description'),
  12.                  secondary: Icon(Icons.filter_1),//右侧图标
  13.                  selected: _radioGroupA == 0,
  14.                ),
  15.                RadioListTile(
  16.                  value: 1,
  17.                  groupValue: _radioGroupA,
  18.                  onChanged: _handleRadioValueChanged,
  19.                  title:Text('Option B') ,
  20.                  subtitle: Text('Description'),
  21.                  secondary: Icon(Icons.filter_2),//右侧图标
  22.                  selected: _radioGroupA == 1,
  23.                ),
  24.           ],
  25.         ),

Switch和Slider

Switch

  1. import 'package:flutter/material.dart';
  3. class SwitchDemo extends StatefulWidget {
  4.   @override
  5.   _SwitchDemoState createState() => _SwitchDemoState();
  6. }
  8. class _SwitchDemoState extends State<SwitchDemo> {
  9.   bool _switchA = false;
  10.   @override
  11.   Widget build(BuildContext context) {
  12.     return Scaffold(
  13.       appBar: AppBar(
  14.         title: Text('SwitchDemo'),
  15.         elevation: 0.0,
  16.       ),
  17.       body: Container(
  18.         padding: EdgeInsets.all(16.0),
  19.         child: Column(
  20.           mainAxisAlignment: MainAxisAlignment.center,
  21.           children: <Widget>[
  22.             Text(_switchA ? '☺' :'😭',style: TextStyle(fontSize: 32.0)),
  23.             Switch(
  24.               value: _switchA,
  25.               onChanged: (value) {
  26.                 setState(() {
  27.                   _switchA = value;
  28.                 });
  29.               },
  31.             )
  32.           ],
  33.         ),
  34.       ),
  35.     );
  36.   }
  37. }

SwitchListTile

  1.  SwitchListTile(
  2.               value: _switchA,
  3.               onChanged: (value) {
  4.                 setState(() {
  5.                   _switchA = value;
  6.                 });
  7.               },
  8.               title: Text('Switch Item A'),
  9.               subtitle:Text('Description'),
  10.               secondary: _switchA ? Icon(Icons.visibility):Icon(Icons.visibility_off),
  11.               selected: _switchA,
  12.             )

Slider

  1.  Slider(
  2.    value: _sliderA,
  3.    onChanged: (value) {
  4.      setState(() {
  5.        _sliderA = value;
  6.      });
  7.    },
  8.    min: 0.0,
  9.    max: 10.0,
  10.    divisions: 10,
  11.    activeColor: Theme.of(context).accentColor,
  12.    inactiveColor: Theme.of(context).accentColor.withOpacity(0.3),
  13.    label: '${_sliderA.toInt()}',
  14.  )