Flutter输入框TextField属性及监听事件介绍

textField用于文本输入，它提供了很多属性：

const TextField({
  ...
  TextEditingController controller,
  FocusNode focusNode,
  InputDecoration decoration = const InputDecoration(),
  TextInputType keyboardType,
  TextInputAction textInputAction,
  TextStyle style,
  TextAlign textAlign = TextAlign.start,
  bool autofocus = false,
  bool obscureText = false,
  int maxLines = 1,
  int maxLength,
  this.maxLengthEnforcement,
  ToolbarOptions? toolbarOptions,
  ValueChanged<String> onChanged,
  VoidCallback onEditingComplete,
  ValueChanged<String> onSubmitted,
  List<TextInputFormatter> inputFormatters,
  bool enabled,
  this.cursorWidth = 2.0,
  this.cursorRadius,
  this.cursorColor,
  this.onTap,
  ...
})

示例：注意提示内容都是在InputDecoration中设置的

void mian()=>runApp(MyApp());

class MyApp extends StatelessWidget
{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "文本输出框",
      home:Scaffold(
        appBar: AppBar(title:const Text("文本输入框")),
        body:Column(
          children:const  <Widget>[
            TextField(
              autofocus: true,
              decoration: InputDecoration(
                //文本
                labelText:"用户名",
                //提示信息
                hintText: "用户名或邮箱",
                //图标
                prefixIcon: Icon(Icons.person),
              ),
              //设置最大行数
              maxLines: 1,
            ),
            TextField(
              autofocus: true,
              decoration: InputDecoration(
                labelText:"密码",
                hintText: "您的登录密码",
                prefixIcon: Icon(Icons.lock),
              ),
              //隐藏文本
              obscureText: true,
            ),
          ],
        ),
      )
    );
  }
}

监听事件：

获取内容的两种方式：

• 定义两个变量，用于保存用户名和密码，然后再onChanged触发时，各自保存输入内容

• 通过Controller直接获取,onChanged是一种单纯的监听改变事件，但Controller中还有一些其他方法可以使用。

第一种方式：

onChanged: (value){
                print("你输入的内容为$value");
}

第二种方式：

定义一个controller：

TextEditingController _unameController = TextEditingController();
    _unameController.addListener(() {
      print("你输入的内容为：${_unameController.text}");
});

完整代码：

void main()=>runApp(MyApp());

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {
    //定义一个controller
    TextEditingController _unameController = TextEditingController();
    //调用.addListener重写其中的方法
    _unameController.addListener(() {
      print("你输入的内容为：${_unameController.text}");
    });
    return MaterialApp(
      title: "文本输出框",
      home:Scaffold(
        appBar: AppBar(title:const Text("文本输入框")),
        body:Column(
          children: <Widget>[
            TextField(
                //设置监听
              controller: _unameController,
              autofocus: true,
              decoration: const InputDecoration(
                //文本
                labelText:"用户名",
                //提示信息
                hintText: "用户名或邮箱",
                //图标
                prefixIcon: Icon(Icons.person),
              ),
              //设置最大行数
              maxLines: 1,
            ),
            TextField(
              autofocus: true,
              decoration:const  InputDecoration(
                labelText:"密码",
                hintText: "您的登录密码",
                prefixIcon: Icon(Icons.lock),
              ),
              //隐藏文本
              obscureText: true,
                //表单改变事件
              onChanged: (value){
                print("你输入的内容为$value");
              },
            ),
          ],
        ),
      )
    );
  }
}

来源：https://blog.csdn.net/m0_55721894/article/details/121598084