TextFiled 用于文本输入，提供了很多属性，我们先简单介绍一下主要属性的作用
keyboardType：用于设置该输入框默认的键盘输入类型，取值如下：
textInputAction：键盘动作按钮图标(即回车键位图标)，它是一个枚举值，有多个可选值，全部的取值列表读者可以查看 API 文档，下面是当值为TextInputAction.search时，原生Android系统下键盘样式如图所示：
onChange：输入框内容改变时的回调函数，注：内容改变事件也可以通过controller来监听。
decoration:InputDecoration用于控制外观的显示，常用属性：
///设置隐藏文字
hintText: text,
///设置去除下划线
// border: InputBorder.none,
///设置左边图标
prefixIcon:Icon(leftIconData),
///设置右边图标
suffixIcon:IconButton(
onPressed: (){
controller.clear();
},
icon: controller.text.length >0 ?Icon(rightIconData) :Icon(null),
),
///设置外边框样式
border:OutlineInputBorder(
///设置圆角20
borderRadius:BorderRadius.all(Radius.circular(20)),
///设置边框宽度为1 颜色
borderSide:BorderSide(color: Colors.grey, width:1),
),
///未选中时候的颜色
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0),
borderSide: BorderSide(color: Colors.grey, width: 1),
),
///选中时外边框颜色
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0),
borderSide: BorderSide(color: Colors.red, width: 1),
),
获取输入内容有两种方式：
1.定义两个变量，用于保存用户名和密码，然后在onChange触发时，个子保存一下输入内容
///监听文本变化
onChanged: (value){
LogUtil.d('$value');
},
2.通过Controller 直接获取
(1)：定义一个controller
TextEditingController nameController =TextEditingController();
(2)：设置输入框controller
TextField(
autofocus: true,
controller: nameController, //设置controller
)
（3)：监听输入改变
Namecontroller.addListener(() {
setState(() {
LogUtil.d(Namecontroller.text);
});
});
代码如下：
/*
* 输入框和表单
*/
import 'package:common_utils/common_utils.dart';
import 'package:flutter/material.dart';
class TextFieldPage extends StatefulWidget {
@override
_TextFieldPageState createState() =>_TextFieldPageState();
}
class _TextFieldPageState extends State {
TextEditingController Namecontroller =TextEditingController();
TextEditingController Pascontroller =TextEditingController();
bool isClear =false;
@override
void dispose() {
Namecontroller.dispose();
Pascontroller.dispose();
super.dispose();
}
@override
void initState() {
super.initState();
// Namecontroller.text="hello world!";
// Namecontroller.selection=TextSelection(
// baseOffset: 2,
// extentOffset: Namecontroller.text.length
// );
Namecontroller.addListener(() {
setState(() {
LogUtil.d(Namecontroller.text);
});
});
Pascontroller.addListener(() {
setState(() {
LogUtil.d(Pascontroller.text);
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
title:Text('输入框和表单'),
),
body:Column(
children: [
myInputFiled(
'请输入用户名或邮箱', Icons.person, Namecontroller, Icons.close),
myInputFiled('请输入密码', Icons.admin_panel_settings, Pascontroller,
Icons.close),
Container(
width: double.infinity,
alignment: Alignment.center,
height:45,
margin:EdgeInsets.all(20),
decoration:BoxDecoration(
color: Colors.blue,
borderRadius:BorderRadius.all(Radius.circular(20)),
),
child:Text(
'确定',
style:TextStyle(color: Colors.white),
),
)
],
));
}
/*
* 设置文字，左右
*/
myInputFiled(String text, IconData leftIconData,
TextEditingController controller, IconData rightIconData) {
return Container(
alignment: Alignment.center,
margin:EdgeInsets.fromLTRB(20, 10, 20, 10),
child:TextField(
autofocus:true,
controller: controller,
///设置键盘输入
keyboardType: TextInputType.text,
///键盘动作按钮图标(即回车键位图标)
textInputAction: TextInputAction.search,
///用于控制外观显示
decoration:InputDecoration(
///设置隐藏文字
hintText: text,
///设置去除下划线
// border: InputBorder.none,
///设置左边图标
prefixIcon:Icon(leftIconData),
///设置右边图标
suffixIcon:IconButton(
onPressed: (){
controller.clear();
},
icon: controller.text.length >0 ?Icon(rightIconData) :Icon(null),
),
///设置外边框样式
border:OutlineInputBorder(
borderRadius:BorderRadius.all(Radius.circular(20)),
borderSide:BorderSide(color: Colors.grey, width:1),
),
///未选中时候的颜色
// enabledBorder: OutlineInputBorder(
// borderRadius: BorderRadius.circular(5.0),
// borderSide: BorderSide(color: Colors.grey, width: 1),
// ),
// ///选中时外边框颜色
// focusedBorder: OutlineInputBorder(
// borderRadius: BorderRadius.circular(5.0),
// borderSide: BorderSide(color: Colors.red, width: 1),
// ),
),
///监听文本变化
// onChanged: (value){
// LogUtil.d('$value');
// },
),
);
}
}
两种方式相比，onChanged是专门用于监听文本变化，而controller的功能却多一些，除了能监听文本变化外，它还可以设置默认值、选择文本，下面我们看一个例子：
TextEditingController Namecontroller =TextEditingController();
Namecontroller.text="hello world!";
///设置默认值，并从第三个字符开始选中后面的字符
Namecontroller.selection=TextSelection(
baseOffset:2,
extentOffset:Namecontroller.text.length
);
设置controlle
TextField( controller: _selectionController,)
运行效果如图所示：
网友评论