Flutter - TextField

TextField用于文本输入

1 TextField 简单运用

//用于控制TextField的外观显示，如提示文本、背景颜色、边框等
//InputDecoration decoration = const InputDecoration()

const TextField(
     decoration: InputDecoration(
     		labelText: "用户名",
     		hintText: "用户名或邮箱",
     		prefixIcon: Icon(Icons.person),
     		),
		),

2 获取输入内容

1 定义一个变量，用于保存用户名和密码，然后在onChange触发时，各自保存一下输入内容。
2 通过controller直接获取。

第二种放法的例子

1 定义
TextEditingController _unameController = TextEditingController();

2 设置 controller
TextField(
   controller: _unameController,
   decoration: const InputDecoration(
      labelText: "用户名",
      hintText: "用户名或邮箱",
      prefixIcon: Icon(Icons.person),
   ),
)

3 通过controller获取输入框内容
print(_unameController.text)


ElevatedButton(onPressed: (){
   
   print(_unameController.text);                
}, child:const Text("输出文本内容")),

3 监听文本变化
1 设置onChange回调

TextField(
  decoration: const InputDecoration(
      labelText: "密码",
      hintText: "您的登录密码",
      prefixIcon: Icon(Icons.lock)
  ),
  obscureText: true,
  onChanged: (v) {
   
      print("onChange: $v");
    }
),
 

2 通过controller监听

 @override
  void initState() {
   
    // TODO: implement initState
    super.initState();
    print("initState");
    _unameController.addListener(() {
   
      print(_unameController.text);
    });
	//初始化时 设置文本内容
    _unameController.text = "hello word";
    _unameController.selection=TextSelection(
        baseOffset: 2,
        extentOffset: _unameController.text.length
    );
  }

4 控制焦点
焦点可以通过FocusNode和FocusScopeNode来控制，默认情况下，焦点由FocusScope来管理，它代表焦点控制范围，可以在这个范围内可以通过FocusScopeNode在输入框之间移动焦点、设置默认焦点等。我们可以通过FocusScope.of(context) 来获取Widget树中默认的FocusScopeNode

TextField(
  autocorrect: true,
  controller: _unameController,
  focusNode: focusNode1,
  keyboardType : TextInputType.phone,
  decoration: const InputDecoration(
    hintText: "用户名或邮箱",
    prefixIcon