文本框组件
TextField(
maxLines: , 设置后即可将文本框改成多行文本框
maxLength: , 最大输入长度
onChanged: (text){} 内容改变回调,第一个参数是输入框的内容,修改状态使用setState
onSubmitted, 文字提交触发(键盘按键)
obscureText: true, 将文本框改成密码输入形式
TextInputType keyboardType: TextInputType.text, 输入的类型
autofocus
obscureText: false, 是否隐藏输入
controller: 控制器名, 利用控制器来设置文本框初始值
decoration:InputDecoration( 文本框样式
hintText:"xx", 类似placeholder效果
labelText: "xx", 设置文本框内容,输入时标签内容会浮动在文本框上
labelStyle
icon:Icon(Icons.search), 在输入框前添加图标
prefixIcon: Icon(Icons.search), 在输入框内字体前添加图标
suffixIcon:在输入框内末尾添加内容,
suffixText:'在输入框末尾添加文字'
border: InputBorder.none, 取消输入框的下划线
border: OutlineInputBorder( 设置文本框边框样式
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color:Colors.blue,width: 2)
)
) ,
),
若要预先设定文本框的值
(1)先定义控制器
var 控制器名=new TextEditingController();
(2)在文本框的controller参数中赋值控制器名
(3)设置内容(可以在生命周期函数中设置)
控制名.text='xx'; 可读可写属性
代码示例:
import 'package:flutter/material.dart';
class Home4 extends StatefulWidget {
Home4({Key key}) : super(key: key);
@override
_Home2State createState() => _Home2State();
}
class _Home2State extends State<Home4> {
var uname=new TextEditingController();
var flag=true;
@override
void initState() {
super.initState();
this.uname.text="初始值";
}
@override
Widget build(BuildContext context) {
return Container(
child: Column(children: <Widget>[
TextField(
// maxLines: , 设置后即可将文本框改成多行文本框
//maxLength: , 最大输入长度
onChanged: (text){
setState(() {
uname.text=text;
});
}, //内容改变回调
// obscureText: true, //将文本框改成密码输入形式
controller: uname, //利用控制器来设置文本框初始值
decoration:InputDecoration(
hintText:"请输入", //类似placeholder效果
// labelText: "哈哈" //设置文本框内容,输入时标签内容会浮动在文本框上
//labelStyle
icon:Icon(Icons.search), //在输入框前添加图标
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color:Colors.blue,width: 2)
)
) ,
)
]),
);
}
}
// 因为表单组件需要改变状态,所以要使用有状态组件