Flutter笔记61：TextField文本输入框组件

TextField文本输入框组件就是html里面的input输入框，可以用来获取用户的输入内容。这里做个简单的登录效果：

class _TextFieldDemo extends State<TextFieldDemo> {
  //文本框编辑控制
  TextEditingController userNameController = TextEditingController();
  TextEditingController passwordController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: userNameController,
          maxLength: 11,
          maxLines: 1,
          //控制首字符大小写
          //TextCapitalization.words  每个单词的首字母大写
          //TextCapitalization.sentences  首字母大写
          //TextCapitalization.characters  所有字母大写
          //TextCapitalization.words  每个单词的首字母大写
          //TextCapitalization.words  每个单词的首字母大写
          textCapitalization: TextCapitalization.words,
          //键盘类型
          //TextInputType.number  数字类型的键盘
          //TextInputType.emailAddress  邮箱类型
          //TextInputType.datetime   时间类型
          //TextInputType.phone  电话类型
          //TextInputType.text  文本类型
          //TextInputType.url   地址类型
          keyboardType: TextInputType.url,
          decoration: InputDecoration(
              //外边框，如果不写参数默认会加上一个包裹的外边框
              border: OutlineInputBorder(),
              contentPadding: EdgeInsets.all(10.0),
              icon: Icon(Icons.phone),
              //前置图标
              prefixIcon: Icon(Icons.print),
              //后置图标
              suffixIcon: Icon(Icons.person),
              //placeholder
              labelText: '用户名',
              labelStyle: TextStyle(fontSize: 16.0, color: Colors.black),
              //文本框下的提示
              helperText: '用户名为邮箱',
              helperStyle: TextStyle(fontSize: 12.0)),
          // //光标颜色
          // cursorColor: Colors.red,
          // //光标弧度
          // cursorRadius: Radius.circular(16.0),
          // //光标宽度
          // cursorWidth: 3.0,
        ),
        //密码框
        TextField(
          controller: passwordController,
          keyboardType: TextInputType.number,
          decoration: InputDecoration(
              contentPadding: EdgeInsets.all(10.0),
              icon: Icon(Icons.lock),
              labelText: '请输入密码'),
          //显示为密码效果
          obscureText: true,
          //键盘回车按钮样式
          textInputAction: TextInputAction.go,
        ),
        RaisedButton(
          onPressed: () {
            loginCheck();
          },
          child: Text('登录'),
        )
      ],
    );
  }

  //登陆检测
  loginCheck() {
    if (userNameController.text.length != 11) {
      print('请输入正确的手机号');
      return;
    }
    if (passwordController.text.length != 6) {
      print('请输入六位数的密码');
      return;
    }
    print('登陆成功！');
  }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！