flutter中的表单部件

TextField

const TextField({
    Key key,
    this.controller,                    // 控制正在编辑文本
    this.focusNode,                     // 获取键盘焦点
    this.decoration = const InputDecoration(),              // 边框装饰
    TextInputType keyboardType,         // 键盘类型
    this.textInputAction,               // 键盘的操作按钮类型
    this.textCapitalization = TextCapitalization.none,      // 配置大小写键盘
    this.style,                         // 输入文本样式
    this.textAlign = TextAlign.start,   // 对齐方式
    this.textDirection,                 // 文本方向
    this.autofocus = false,             // 是否自动对焦
    this.obscureText = false,           // 是否隐藏内容，例如密码格式
    this.autocorrect = true,            // 是否自动校正
    this.maxLines = 1,                  // 最大行数
    this.maxLength,                     // 允许输入的最大长度
    this.maxLengthEnforced = true,      // 是否允许超过输入最大长度
    this.onChanged,                     // 文本内容变更时回调
    this.onEditingComplete,             // 提交内容时回调
    this.onSubmitted,                   // 用户提示完成时回调
    this.inputFormatters,               // 验证及格式
    this.enabled,                       // 是否不可点击
    this.cursorWidth = 2.0,             // 光标宽度
    this.cursorRadius,                  // 光标圆角弧度
    this.cursorColor,                   // 光标颜色
    this.keyboardAppearance,            // 键盘亮度
    this.scrollPadding = const EdgeInsets.all(20.0),        // 滚动到视图中时，填充边距
    this.enableInteractiveSelection,    // 长按是否展示【剪切/复制/粘贴菜单LengthLimitingTextInputFormatter】
    this.onTap,                         // 点击时回调
})

获取文本框输入的值有两种办法

1. 使用controller文本控制器，监听输入内容回调；

final textEditingController=TextEditingController();//定义一个controller

然后设置输入框controller：

TextField(
    autofocus: true,
    controller: _unameController, //设置controller
    ...)

通过controller获取输入框内容

print(_unameController.text)

通过controller监听监听文本框的变化

void initState() {
  //监听输入改变  
  _unameController.addListener((){
    print(_unameController.text);
  });}

2.使用onChanged事件

onChanged: (String value){
       print(value);
},

两种方式相比，onChanged是专门用于监听文本变化，而controller的功能却多一些，除了能监听文本变化外，它还可以设置默认值、选择文本，下面我们看一个例子：

class TextFileDemo extends StatefulWidget {
  @override
  _TextFileDemoState createState() => _TextFileDemoState();
}

class _TextFileDemoState extends State<TextFileDemo> {

  final textEditingController=TextEditingController();
  @override
  void initState() {
    // TODO: implement initState

    super.initState();
    //设置文本框的默认值
    textEditingController.text='';
    //监听文本框的变化
    textEditingController.addListener((){
      print('输入的值是${textEditingController.text}');
    });
  }
  @override
  void dispose() {
    // TODO: implement dispose
    textEditingController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: textEditingController,
      keyboardType: TextInputType.number,
      //文本化发声变化的回调函数
//      onChanged: (String value){
//          print(value);
//      },
      //点击键盘的缺点触发的函数
      onSubmitted: (value){
        print('提交的值是$value');
      },
      decoration:InputDecoration(
        icon: Icon(Icons.assignment_ind),
        labelText: '用户名',
        hintText: '请输入用户名',
        border: OutlineInputBorder(),
      ) ,
    );
  }
}

监听焦点状态改变事件

FocusNode继承自ChangeNotifier，通过FocusNode可以监听焦点的改变事件，如：

FocusNode focusNode = new FocusNode();
...
// focusNode绑定输入框   
TextField(focusNode: focusNode);
...
// 监听焦点变化    
focusNode.addListener((){
print(focusNode.hasFocus);
});

获得焦点时focusNode.hasFocus值为true，失去焦点时为false。