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");
               },
             ),
           ],
         ),
       )
     );
   }
 }

到此这篇关于介绍Flutter输入框TextField属性及监听事件的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。