脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Flutter输入框TextField

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

 更新时间：2021年11月29日 17:11:34   作者：老图拉丁  
这篇文章主要介绍了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,
   ...
 })
属性 类型 说明
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");
               },
             ),
           ],
         ),
       )
     );
   }
 }

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

您可能感兴趣的文章:

相关文章

  • 详解Android 7.0 Settings 加载选项

    详解Android 7.0 Settings 加载选项

    本篇文章主要介绍了Android 7.0 Settings 加载选项，Android 7.0 Settings顶部多了一个建议选项，多了个侧边栏，操作更加便捷了，有兴趣的可以了解一下。
    2017-02-02
  • Android中HttpURLConnection与HttpClient的使用与封装

    Android中HttpURLConnection与HttpClient的使用与封装

    这篇文章主要介绍了Android中HttpURLConnection与HttpClient的使用以及封装方法，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • Android获取手机联系人信息

    Android获取手机联系人信息

    这篇文章主要为大家详细介绍了Android获取手机联系人信息的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Android实现滑动效果

    Android实现滑动效果

    这篇文章主要为大家详细介绍了Android实现滑动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • Android如何动态调整应用字体大小详解

    Android如何动态调整应用字体大小详解

    这篇文章主要给大家介绍了关于Android如何动态调整应用字体大小的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-05-05
  • Android使用OpenGL和MediaCodec录制功能

    Android使用OpenGL和MediaCodec录制功能

    OpenGL是一个跨平台的操作GPU的API,但OpenGL需要本地视窗系统进行交互,这就需要一个中间控制层, EGL就是连接OpenGL ES和本地窗口系统的接口,引入EGL就是为了屏蔽不同平台上的区别,这篇文章主要介绍了Android使用OpenGL和MediaCodec录制功能,需要的朋友可以参考下
    2025-04-04
  • Kotlin中实现多线程数据刷新的完整方案

    Kotlin中实现多线程数据刷新的完整方案

    这篇文章主要介绍了Kotlin中实现多线程数据刷新的完整方案,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2025-04-04
  • Android中DrawerLayout实现侧滑菜单效果

    Android中DrawerLayout实现侧滑菜单效果

    这篇文章主要为大家详细介绍了Android中DrawerLayout实现侧滑菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • Android ViewPager小圆点指示器

    Android ViewPager小圆点指示器

    这篇文章主要为大家详细介绍了Android ViewPager小圆点指示器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Android实现带有进度条的按钮效果

    Android实现带有进度条的按钮效果

    这篇文章主要为大家详细介绍了Android实现带有进度条的按钮效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05

最新评论