20 Flutter TextField单行文本和多行文本

TextField单行文本框和多行文本框

1.TextField

​ ————————基本等价于Android中EditText，其中属性都有很多一致

1.属性

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, // 点击时回调
})

——————重要属性

decoration ——————装饰器，可以修改样式，padding，调整文字位置，提示文字，icon、标签文字等。
我们给上面的代码新增decoration属性
keyboardType ——————键盘输入类型(除了隐藏密码不能做到)
keyboardType: TextInputType.visiblePassword, 显示密码
obscureText——————密码和普通文本框，maxLine必须1，否则报错
textAlign ——————文字对齐方式
maxLines ——————多行
maxLength——————最多多少文字
onChanged ——————文字改变时回调
autofocus: true——————自动对焦，第一次进来就弹起键盘
onEditingComplete ————点击键盘按钮确认时触发
onSubmitted,  //同样是点击键盘完成按钮时触发的回调，该回调有参数，参数即为当前输入框中的值。(String)
textInputAction ————修改键盘右小角按钮文字或图标（textInputAction: TextInputAction.go,）

2.TextField普通

class TextDemo extends StatelessWidget {
  const TextDemo({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          TextField(),
          SizedBox(height: 20),
          TextField(
            decoration: InputDecoration(
                hintText: "请输入搜索的内容", border: OutlineInputBorder()),
          ),
          SizedBox(height: 20),
          TextField(
            maxLines: 4,
            decoration: InputDecoration(
                hintText: "多行文本框", border: OutlineInputBorder()),
          ),
          SizedBox(height: 20),
          TextField(
            obscureText: true,
            decoration:
                InputDecoration(hintText: "密码框", border: OutlineInputBorder()),
          ),
          SizedBox(height: 20),
          TextField(
              decoration: InputDecoration(
                  border: OutlineInputBorder(), labelText: "用户名")),
          SizedBox(height: 20),
          TextField(
              obscureText: true,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: "密码",
                // labelStyle: TextStyle()
              )),
          SizedBox(height: 20),
          TextField(
              decoration: InputDecoration(
                  icon: Icon(Icons.people), hintText: "请输入用户名")),
        ],
      ),
    );
  }
}

3.添加TextEditingController进行文字上的监听获取

案例：实现登录

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('FlutterDemo')),
          body: TextFieldAndCheckPage(),
        ));
  }
}

class TextFieldAndCheckPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => TextFieldAndCheckPageState();
}

class TextFieldAndCheckPageState extends State<TextFieldAndCheckPage> {
  //手机号的控制器
  TextEditingController phoneController = TextEditingController();

  //密码的控制器
  TextEditingController passController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('输入和选择'),
      ),
      body: Column(
        children: <Widget>[
          TextField(
            controller: phoneController,
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              contentPadding: EdgeInsets.all(10.0),
              icon: Icon(Icons.phone),
              labelText: '请输入你的用户名)',
              helperText: '请输入注册的手机号',
            ),
            autofocus: false,
          ),
          TextField(
              controller: passController,
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                contentPadding: EdgeInsets.all(10.0),
                icon: Icon(Icons.lock),
                labelText: '请输入密码)',
              ),
              obscureText: true),
          RaisedButton(
            onPressed: _login,
            child: Text('登录'),
          ),
        ],
      ),
    );
  }

  void _login() {
    print({'phone': phoneController.text, 'password': passController.text});
    if (phoneController.text.length != 11) {
      showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: Text('手机号码格式不对'),
          ));
    } else if (passController.text.length == 0) {
      showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: Text('请填写密码'),
          ));
    } else {
      showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: Text('登录成功'),
          ));
      phoneController.clear();
    }
  }

  void onTextClear() {
    setState(() {
      phoneController.clear();
      passController.clear();
    });
  }
}