Flutter开发之Input-TextField-文本输入框（45)

之前介绍了一些基础控件，回头来看遗漏了一些基础的控件的用法。TextField 是最常用的文本输入widget。今天就来学习使用一下。

参看：
Flutter组件-Input-TextField-文本输入框
Flutter中文网-处理文本输入

默认情况下，TextField有一个下划线装饰（decoration）。您可以通过提供给decoration属性设置一个InputDecoration来添加一个标签、一个图标、提示文字和错误文本。 要完全删除装饰（包括下划线和为标签保留的空间），将decoration明确设置为空即可。

有两种获取用户输入的主要方法：:

• 处理 onChanged回调
• 提供一个TextEditingController.

onChanged

每当用户输入时，TextField会调用它的onChanged回调。 您可以处理此回调以查看用户输入的内容。例如，如果您正在输入搜索字段，则可能需要在用户输入时更新搜索结果。

TextEditingController

一个更强大（但更精细）的方法是提供一个TextEditingController作为TextField的controller属性。 在用户输入时，controller的text和selection属性不断的更新。要在这些属性更改时得到通知，请使用controller的addListener方法监听控制器 。 （如果你添加了一个监听器，记得在你的State对象的dispose方法中删除监听器 ）。

该TextEditingController还可以让您控制TextField的内容。如果修改controller的text或selection的属性，TextField将更新，以显示修改后的文本或选中区间。 例如，您可以使用此功能来实现推荐内容的自动补全。

示例效果

以下是使用一个TextEditingController读取TextField中用户输入的值的示例：

示例完整代码

//文档地址:https://docs.flutter.io/flutter/material/TextField-class.html
import 'package:flutter/material.dart';

class TextFieldDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('TextField组件示例'),
        ),
        body:LoginPage(),
    );
  }
}

//登录组件
class LoginPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() => LoginPageState();
}

class LoginPageState extends State<LoginPage>{

  //文本编辑控制器
  TextEditingController usernameController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[

        TextField(
          controller: usernameController,
          //TextCapitalization.words 将每个单词的首字母大写
          //TextCapitalization.sentences 将首字母大写
          //TextCapitalization.characters 将所有字母大写
          textCapitalization: TextCapitalization.none,
          //键盘类型
          keyboardType: TextInputType.number,
          decoration: InputDecoration(
            //内容的内边距
            contentPadding: EdgeInsets.all(10.0),
            icon: Icon(Icons.person),
            //提示文本
            labelText: '请输入你的用户名',
            helperText: '请输入注册的用户名',

            // placehoder text
            hintText: 'Type something',

          ),
          //键盘插件按钮样式
          textInputAction: TextInputAction.go,
          //设置光标样式
//          cursorColor: Colors.green,
//          cursorRadius: Radius.circular(16.0),
//          cursorWidth: 16.0,
        ),
        TextField(
          controller: passwordController,
          keyboardType: TextInputType.text,
          decoration: InputDecoration(
            contentPadding: EdgeInsets.all(10.0),
            icon: Icon(Icons.lock),
            labelText: '请输入密码',
          ),
          obscureText: true,
        ),
        RaisedButton(
          onPressed: (){
            loginCheck();
          },
          child: Text('登录'),
        ),

        //decoration示例
//        TextField(
//          //带外边框的样式
//          decoration: InputDecoration(
//            border: OutlineInputBorder(),
//            hintText: '请输入你的用户名',
//            labelText: '用户名',
//            prefixIcon: Icon(Icons.person),
//            suffixIcon: Icon(Icons.print),
//          ),
//        ),

      ],
    );
  }

  loginCheck(){
    // 触摸收起键盘
    FocusScope.of(context).requestFocus(FocusNode());

    if(usernameController.text.length != 11){
      print('请输入正确的手机号');
    }

    if(passwordController.text.length != 6){
      print('请输入6位以上的密码');
    }
  }

}

总结

涉及取消键盘响应。让TextField 失去焦点。