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

时间：2022-04-25 10:48:42|栏目：Android代码|点击：次

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,
   ...
 })

属性	类型	说明
controller	TextEditingController	控制器，通过它可以获取文本内容，监听编辑文本事件，大多数情况下我们需要主动提供一个控制器
focusNode	InputDecoration	焦点控制
decoration	InputDecoration	用于控制文本的外观，如提示文本、背景色、边框等
keyboardType	TextInputType	用于设置输入框的默认键盘类型
textInputAction	TextInputAction	键盘动作图标按钮，他是一个枚举值
style	TextStyle	正在编辑的文本样式
textAlign	TextAlign	文本框的在水平方向的对齐方式
autofocus	bool	是否自动获取焦点
obscureText	bool	是否隐藏正在编辑的文本，用于密码输入场景
maxLines	int	输入框的最大行数
maxlength	int	文本框的最大长度
maxLengthEnforcement		当文本长度超出文本框长度时如何处理
toolbarOptions	ToolbarOptions	长按时出现的选项
onChange	ValueChanged<String>	输入框改变时候的回调函数，也可以通过controller来监听
onEditingComplete	VoidCallback	输入完后触发的回调函数，不接受参数
onSubmitted	ValueChanged<String>	接收ValueChanged<String>的参数
inputFormatters	List<TextInputFormatter>	用于指定输入格式,可以用于检验格式
enable	bool	为bool时，输入框将变为禁用状态
cursorWidth、cursorRadius和cursorColor		这三个属性是用于自定义输入框光标宽度、圆角和颜色

示例：注意提示内容都是在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");
               },
             ),
           ],
         ),
       )
     );
   }
 }

上一篇：Android自定义Progress控件的方法

栏目：Android代码

下一篇：Android如何让APP无法在指定的系统版本上运行(实现方法)

本文标题：Flutter输入框TextField属性及监听事件介绍

本文地址：http://www.codeinn.net/misctech/200155.html

更多Android代码

Android代码

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

阅读排行

推荐教程