Flutter-TextFormField组件

2022-05-08  本文已影响0人  阿博聊编程
配图来自网络,如侵必删

在日常的开发中,在表单界面需要我们去校验输入的需求。在Flutter中,material包给我们提供了TextFormField组件,帮助我们更好校验用户的输入。这篇博客就来分享TextFormField组件相关的知识,希望对看文章的小伙伴有所帮助。

TextFormField简单使用

TextFormField(
     autofocus: false,
     keyboardType: TextInputType.number,
     decoration: InputDecoration(
                  contentPadding:const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                  hintText: '请输入密码',
                  border: OutlineInputBorder(borderRadius: BorderRadius.circular(32))),
)

效果大概是这样的:


控件的效果

常用属性

是否自动对焦,默认是false

autofocus: true,

设置输入模式,常用的就是手机号、邮箱、数字:

keyboardType: TextInputType.number,

设置边界,就拿上面的代码举例:

decoration: InputDecoration(
                  contentPadding:const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                  hintText: '请输入密码',
                  border: OutlineInputBorder(borderRadius: BorderRadius.circular(32))),

设默认值:

initialValue: '123456',
上一篇 下一篇

猜你喜欢

热点阅读