TextField用于文本输入
1 TextField 简单运用
//用于控制TextField的外观显示，如提示文本、背景颜色、边框等
//InputDecoration decoration = const InputDecoration()
const TextField(
decoration: InputDecoration(
labelText: "用户名",
hintText: "用户名或邮箱",
prefixIcon: Icon(Icons.person),
),
),
2 获取输入内容
1 定义一个变量，用于保存用户名和密码，然后在onChange触发时，各自保存一下输入内容。
2 通过controller直接获取。
第二种放法的例子
1 定义
TextEditingController _unameController = TextEditingController();
2 设置 controller
TextField(
controller: _unameController,
decoration: const InputDecoration(
labelText: "用户名",
hintText: "用户名或邮箱",
prefixIcon: Icon(Icons.person),
),
)
3 通过controller获取输入框内容
print(_unameController.text)
ElevatedButton(onPressed: (){
print(_unameController.text);
}, child:const Text("输出文本内容")),
3 监听文本变化
1 设置onChange回调
TextField(
decoration: const InputDecoration(
labelText: "密码",
hintText: "您的登录密码",
prefixIcon: Icon(Icons.lock)
),
obscureText: true,
onChanged: (v) {
print("onChange: $v");
}
),
2 通过controller监听
void initState() {
// TODO: implement initState
super.initState();
print("initState");
_unameController.addListener(() {
print(_unameController.text);
});
//初始化时 设置文本内容
_unameController.text = "hello word";
_unameController.selection=TextSelection(
baseOffset: 2,
extentOffset: _unameController.text.length
);
}
4 控制焦点
焦点可以通过FocusNode和FocusScopeNode来控制，默认情况下，焦点由FocusScope来管理，它代表焦点控制范围，可以在这个范围内可以通过FocusScopeNode在输入框之间移动焦点、设置默认焦点等。我们可以通过FocusScope.of(context) 来获取Widget树中默认的FocusScopeNode
TextField(
autocorrect: true,
controller: _unameController,
focusNode: focusNode1,
keyboardType : TextInputType.phone,
decoration: const InputDecoration(
hintText: "用户名或邮箱",
prefixIcon: Icon(Icons.person),
),
),
ElevatedButton(onPressed: (){
// 点击按钮 使focusNode1 获取焦点
FocusScope.of(context).requestFocus(focusNode1);
}, child:const Text("获取焦点")),
ElevatedButton(onPressed: (){
// 放弃焦点
focusNode1.unfocus();
}, child:const Text("放弃焦点"))
5 自定义样式
const TextField(
decoration: InputDecoration(
hintText: "请输入用户名",
prefixIcon: Icon(Icons.person),
// 未获取焦点下划线设置为灰色
enabledBorder: OutlineInputBorder(
gapPadding: 50 ,
borderRadius: BorderRadius.all(Radius.circular(20.0)),
borderSide: BorderSide(color: Colors.grey),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue),
)
),
),
6 属性
//编辑框的控制器 获取编辑框的内容、选择编辑内容、监听编辑文本改变事件
TextEditingController controller,
// 控制当前TextField是否占有键盘的输入焦点
foucsNode.canRequestFocus: 是否能请求焦点
foucsNode.context: 焦点"附着"的 widget 的 BuildContext
foucsNode.hasFocus: 是否有焦点
foucsNode.unfocus: 放弃焦点, 如果当前 node 有焦点,并调用这个, 就放弃了焦点, 如果同时有软键盘弹起, 则软键盘收起
示例 : focusNode1.unfocus();
foucsNode.requestFocus: 请求焦点, 这个方法调用后, 会把焦点移到当前
示例 : FocusScope.of(context).requestFocus(focusNode1);
FocusNode foucsNode
//用于控制TextField的外观显示，如提示文本、背景颜色、边框等
InputDecoration decoration = const InputDecoration()
//用于设置该输入框默认的键盘输入类型
// - text 文本输入
// - multiline 多长文本,需与maxLines 配合使用
// - number 数字,会弹出数字键盘
// - phone 优化后的电话号码输入键盘；会弹出数字键盘并显示“* #”
// - datatime 优化后的日期输入键盘；Android上会显示“: -”
// - emailAddress 优化后的电子邮件地址；会显示“@ .”
// - url 优化后的url输入键盘； 会显示“/ .”
TextInputType keyboardType
// 键盘动作按钮图标(即回车键位图标)，它是一个枚举值，有多个可选值
// - TextInputAction.search 搜索
// - TextInputAction.send， 发送,
// - TextInputAction.search，搜索,
// - TextInputAction.join, 加入(仅ios支持),
// - TextInputAction.go，访问,
// - TextInputAction.previous,上一个(ios不支持),
// - TextInputAction.next,下一个,
// - TextInputAction.done,完成按钮
// - TextInputAction.unspecified, 操作系统自己选择最优
// - TextInputAction.none,操作系统自己选(仅安卓支持)
// - TextInputAction.continueAction, 继续(仅ios支持)
// - TextInputAction.route, 路线(仅ios支持)
// - TextInputAction.emergencyCall,紧急呼叫(仅ios支持)
// - TextInputAction.newline, 安卓(换行回车)ios(返回)
TextInputAction textInputAction,
// 文本样式
TextStyle style
//输入框内编辑文本在水平方向的对齐方式
TextAlign textAlign = TextAlign.start
//是否自动获取焦点。
bool autofocus = false
//是否隐藏正在编辑的文本，如用于输入密码的场景等，文本内容会用“•”替换。
bool obscureText = false
//输入框的最大行数，默认为1；如果为null，则无行数限制
int maxLines = 1 // 最大行数
//maxLength代表输入框文本的最大长度，设置后输入框右下角会显示输入的文本计数。
int maxLength , // 最大字数
//maxLengthEnforcement决定当输入文本长度超过maxLength时如何处理，如截断、超出等
this.maxLengthEnforcement ,
//长按或鼠标右击时出现的菜单，包括 copy、cut、paste 以及 selectAll。
ToolbarOptions toolbarOptions
//输入框内容改变时的回调函数；注：内容改变事件也可以通过controller来监听
ValueChanged<String> onChanged // 文本改变的回调
//这两个回调都是在输入框输入完成时触发，比如按了键盘的完成键（对号图标）或搜索键（🔍图标）。
//不同的是两个回调签名不同，onSubmitted回调是ValueChanged<String>类型，它接收当前输入内容做为参数，
//而onEditingComplete不接收参数。
VoidCallback onEditingComplete
ValueChanged<String> onSubmitted
//用于指定输入格式；当用户输入内容改变时，会根据指定的格式来校验
List<TextInputFormatter> inputFormatters
//如果为false，则输入框会被禁用，禁用状态不接收输入和事件，同时显示禁用态样式（在其decoration中定义）
bool enabled
//这三个属性是用于自定义输入框光标宽度、圆角和颜色的。
this.cursorWidth = 2
this.cursorRadius
this.cursorColor
7 练习
class _MyState extends State<MyTextFieldAndFormState> {
TextEditingController _unameController = TextEditingController();
FocusNode focusNode1 = FocusNode();
void initState() {
// TODO: implement initState
super.initState();
print("initState");
_unameController.addListener(() {
print(_unameController.text);
});
_unameController.text = "hello word";
_unameController.selection=TextSelection(
baseOffset: 2,
extentOffset: _unameController.text.length
);
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("buttonState"),
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextField(
controller: _unameController,
decoration: const InputDecoration(
labelText: "用户名",
hintText: "用户名或邮箱",
prefixIcon: Icon(Icons.person),
),
),
TextField(
autocorrect: true,
controller: _unameController,
focusNode: focusNode1,
keyboardType : TextInputType.phone,
decoration: const InputDecoration(
hintText: "用户名或邮箱",
prefixIcon: Icon(Icons.person),
),
),
TextField(
decoration: const InputDecoration(
labelText: "密码",
hintText: "您的登录密码",
prefixIcon: Icon(Icons.lock)
),
obscureText: true,
onChanged: (v) {
print("onChange: $v");
}
),
const TextField(
decoration: InputDecoration(
labelText: "请输入用户名",
prefixIcon: Icon(Icons.person),
// 未获取焦点下划线设置为灰色
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.blue),
)
),
),
const TextField(
decoration: InputDecoration(
hintText: "请输入用户名",
prefixIcon: Icon(Icons.person),
// 未获取焦点下划线设置为灰色
enabledBorder: OutlineInputBorder(
gapPadding: 50 ,
borderRadius: BorderRadius.all(Radius.circular(20.0)),
borderSide: BorderSide(color: Colors.grey),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue),
)
),
),
Theme(
data: Theme.of(context).copyWith(
hintColor: Colors.grey[400], //定义下划线颜色
inputDecorationTheme: const InputDecorationTheme(
labelStyle: TextStyle(color: Colors.grey),//定义label字体样式
hintStyle: TextStyle(color: Colors.grey, fontSize: 14.0)//定义提示文本样式
)
),
child: Column(
children: const <Widget>[
TextField(
decoration: InputDecoration(
labelText: "用户名",
hintText: "用户名或邮箱",
prefixIcon: Icon(Icons.person)
),
),
TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.lock),
hintText: "您的登录密码",
hintStyle: TextStyle(color: Colors.green, fontSize: 12.0)
),
obscureText: true,
)
],
)
),
Container(
child: const TextField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: "Email",
hintText: "电子邮件地址",
prefixIcon: Icon(Icons.email),
border: InputBorder.none //隐藏下划线
)
),
decoration: const BoxDecoration(
// 下滑线浅灰色，宽度1像素
border: Border(bottom: BorderSide(color: Colors.amber, width: 1.0))
),
),
ElevatedButton(onPressed: (){
// print(_unameController.text);
FocusScope.of(context).requestFocus(focusNode1);
}, child:const Text("获取焦点")),
ElevatedButton(onPressed: (){
// print(_unameController.text);
focusNode1.unfocus();
}, child:const Text("放弃焦点"))
],
)
),
);
}
}
8 后续补充
…
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
