Flutter 输入框组件

基本属性

autofocus：是否自动获取焦点。obscureText：密码输入框。maxLines只能为1，否则出现异常。showCursor & cursorWidth & cursorRadius & cursorColor：光标是否显示、光标宽度、圆角、颜色。textAlign：文本水平对齐方式。textAlignVertical：文本垂直对齐方式。style：文本样式。maxLength：输入框最大长度。inputFormatters：设置输入框内容格式，值允许输入指定格式的数据。- FilteringTextInputFormatter.allow(RegExp("[a-zA-Z]"))：只允许a-zA-Z。- FilteringTextInputFormatter.digitsOnly：仅数字1-9.decoration：TextField组件的装饰，类型是InputDecoration，可以设置文本、提示文本、样式等。- labelText：label文本。- labelStyle：label文本样式- hintText：输入框为空时提示文本。- hintStyle：hint文本样式。- icon：输入框外前面的图标- prefixIcon：输入框内前面的图标。- prefix：输入框内前面的组件。- contentPadding：内边距。controller：用于控制输入框，监听输入框内容变化、设置默认文本、选中输入框内容。onChange：监听输入框内容变化。onTap：点击输入框时回调。onSubmitted：点击软键盘回车键时回调。keyboardType：控制软键盘输入类型- text：通用键盘。- multiline：多行文本，支持换行，需要配合maxLines使用。- number：数字键盘。- phone：电话键盘，相比数字键盘多了“*”和“#”。- datetime：日期时间键盘。- emailAddress：邮件键盘。- url：url输入键盘。- visiblePassword：字母和数字键盘。textInputAction：软键盘回车键图标。

自动换行

maxLines: null,
minLines: 1,

限制输入

maxLength虽然可以限制输入长度，但是右下角会出现输入计数，有些场景是不需要显示的，可以通过如下解决：

inputFormatters: [LengthLimitingTextInputFormatter(10),
]

只允许输入11手机号

inputFormatters: [LengthLimitingTextInputFormatter(11),FilteringTextInputFormatter.digitsOnly,
]

限制当行，会覆盖maxLines

inputFormatters: [FilteringTextInputFormatter.singleLineFormatter,
]

简单使用

final TextEditingController _usernameController = TextEditingController();
final TextEditingController _descController = TextEditingController();
var descriptionCount = "";@override
void initState() {//监听内容变化_usernameController.addListener(() {print("内容监听1：${_usernameController.text}");});//设置默认值_descController.text = "helloworld";//设置选择文本_descController.selection = TextSelection(baseOffset: 0,extentOffset: _descController.text.length,);super.initState();
}@override
void dispose() {_usernameController.dispose();_descController.dispose();super.dispose();
}TextField(controller: _usernameController,inputFormatters: [FilteringTextInputFormatter.allow(RegExp("[a-zA-Z]")),],decoration: const InputDecoration(labelText: "用户名",hintText: "请输入用户名(仅允许输入英文字符)",prefixIcon: Icon(Icons.person),),onChanged: (value) {print("内容监听2：$value");},
),
TextField(inputFormatters: [FilteringTextInputFormatter.allow(RegExp("[a-zA-Z0-9.]")),],decoration: const InputDecoration(labelText: "邮箱",hintText: "请输入邮箱账号",prefixIcon: Icon(Icons.mail),),keyboardType: TextInputType.emailAddress,
),
TextField(inputFormatters: [FilteringTextInputFormatter.digitsOnly,],decoration: const InputDecoration(labelText: "密码",hintText: "请输入密码（仅允许输入6位即以上的数字）",prefixIcon: Icon(Icons.lock),),keyboardType: TextInputType.number,obscureText: true,
),
TextField(autofocus: true,maxLines: 3,maxLength: 32,controller: _descController,onChanged: (value) {setState(() {descriptionCount = value;});},decoration: InputDecoration(labelText: "描述",hintText: "请输入描述",prefixIcon: const Icon(Icons.description),counterText: "${descriptionCount.length}/32",),keyboardType: TextInputType.multiline,
)

焦点控制

焦点控制可以通过FocusNode和FocusScopeNode来控制。一般情况下，简单由FoucusNode管理，它代表焦点控制范围，可以在这个范围内可以通过FocusScopeNode在输入框之间移动焦点、设置默认焦点等。

FocusNode focusNode1 = FocusNode();
FocusNode focusNode2 = FocusNode();
FocusScopeNode? focusScopeNode;@override
void dispose() {focusNode1.dispose();focusNode2.dispose();focusScopeNode?.dispose();super.dispose();
}TextField(autofocus: true,focusNode: focusNode1,decoration: const InputDecoration(labelText: "input1",),
),
TextField(autofocus: true,focusNode: focusNode2,decoration: const InputDecoration(labelText: "input2",),
),
ElevatedButton(onPressed: () {//方式一FocusScope.of(context).requestFocus(focusNode1);},child: const Text("input1获取焦点"),
),
ElevatedButton(onPressed: () {//方式二focusScopeNode ??= FocusScope.of(context);focusScopeNode?.requestFocus(focusNode2);},child: const Text("input2获取焦点"),
),
ElevatedButton(onPressed: () {//方式一focusNode1.unfocus();focusNode2.unfocus();//方式二// focusScopeNode?.unfocus();},child: const Text("隐藏键盘"),
),

自定义样式1

Padding(padding: EdgeInsets.all(10),child: TextField(textAlign: TextAlign.center,decoration: InputDecoration(fillColor: Color(0x30cccccc),filled: true,hintText: "QQ/邮箱/手机号",enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(100)),borderSide: BorderSide(color: Colors.grey),),focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(100)),borderSide: BorderSide(color: Colors.black),),),),
)

自定义样式2

final FocusNode focusNode1 = FocusNode();
final FocusNode focusNode2 = FocusNode();
bool _hasFocus1 = false;
bool _hasFocus2 = false;@override
void initState() {super.initState();focusNode1.addListener(() {if (_hasFocus1 != focusNode1.hasFocus) {setState(() {_hasFocus1 = focusNode1.hasFocus;});}});focusNode2.addListener(() {if (_hasFocus2 != focusNode2.hasFocus) {setState(() {_hasFocus2 = focusNode2.hasFocus;});}});
}@override
void dispose() {focusNode1.dispose();focusNode2.dispose();super.dispose();
}Padding(padding: const EdgeInsets.all(10),child: Column(children: [Container(child: TextField(focusNode: focusNode1,cursorColor: Colors.black,decoration: InputDecoration(labelText: "用户名",labelStyle: TextStyle(color: _hasFocus1 ? Colors.black : Colors.grey,),hintText: "请输入用户名",prefixIcon: Icon(Icons.people,color: _hasFocus1 ? Colors.red : Colors.grey,),border: InputBorder.none,),),decoration: BoxDecoration(border: Border.all(color: _hasFocus1 ? Colors.red : Colors.grey,width: 1,),borderRadius: const BorderRadius.all(Radius.circular(10)),),),const SizedBox(height: 5,),Container(child: TextField(focusNode: focusNode2,cursorColor: Colors.black,decoration: InputDecoration(labelText: "密码",labelStyle: TextStyle(color: _hasFocus2 ? Colors.black : Colors.grey,),hintText: "请输入密码",prefixIcon: Icon(Icons.lock,color: _hasFocus2 ? Colors.red : Colors.grey,),border: InputBorder.none,),obscureText: true,),decoration: BoxDecoration(border: Border.all(color: _hasFocus2 ? Colors.red : Colors.grey,width: 1,),borderRadius: BorderRadius.circular(10),),),],),
)

Flutter 输入框组件相关推荐

浅识Flutter 基本组件之TextField组件输入框decoration属性
浅识Flutter 基本组件之TextField组件输入框decoration属性 decoration InputDecoration控制输人框提示信息样式的常用属性 InputDecoratio ...
futter 通过判定输入框组件是否都有值，对按钮进行禁用/启用。
onPressed 函数为空则按钮禁用,不为空则可操作. 于是想到三元操作 , 以下是踩坑踩完爬上来的结果 onPressed: checkInput() ? null : tapFunction, ...
value数字 vue_基于Vue开发数字输入框组件
随着 vue 越来越火热, 相关组件库也非常多啦, 只用轮子怎么够, 还是要造起来!!! 1.概述 vue组件开发的api:props.events和slots 2.组件代码效果: (1)index ...
一个优秀的可定制化Flutter相册组件，看这一篇就够了
背景在做图片.视频相关功能的时候,相册是一个绕不开的话题,因为大家基本都有从相册获取图片或者视频的需求.最直接的方式是调用系统相册接口,基本功能是满足的,一些高级功能就不行了,例如自定义UI.多选图 ...
Vue 组件开发 - 数据输入框组件
目录设计通用组件的一般思路组件效果 1. HTML结构 2. index.js 3. input-number.js 3.1 input-number.js代码注解设计通用组件的一般思路明确需 ...
Flutter文本组件Text
Flutter 文本组件Text 在android中,一个页面,一般是用 Activity 或者是一个Fragement 来加载显示出来的,而其中的一个View 或者一个布局文件(layout.x ...
Flutter 自定义组件实战之Cupertino（iOS）风格的复选框
继上一篇Flutter自定义组件的视频短课(视频地址: https://www.bilibili.com/video/BV1ap4y1U7UB/ )后,我们继续来聊自定义组件.视频中我为大家详解了Cu ...
Flutter 自定义组件实战
Flutter 自定义组件实战
带emoji表情的react输入框组件
简介博客项目重构后留言和评论功能一直没有emoji表情输入功能,在网上也没有找到比较好用的react组件,于是作者用了两周时间封装了一个输入框组件并发布到npm. 项目上线初期或多或少存在一些问题, ...

Flutter 输入框组件

文章目录

Flutter 输入框组件

基本属性

自动换行

限制输入

简单使用

焦点控制

自定义样式1

自定义样式2

Flutter 输入框组件相关推荐

最新文章

热门文章