Flutter 组件之表单组件TextField、CheckBox、Radio、Switch
程序员文章站
2022-05-30 09:36:28
...
TextField
普通输入框
TextField(//文本输入框
decoration: InputDecoration(//表单定义模块
hintText: "请输入用户名"//类似html的placeholder
),
),
图标输入框
TextField(//文本输入框
decoration: InputDecoration(//表单定义模块
hintText: "图标输入框",
icon: Icon(Icons.people)//表单内的Icon
),
),
带有边框的本输入框
TextField(//文本输入框
decoration: InputDecoration(//表单定义模块
hintText: "带有边框的表单",//类似html的placeholder
border: OutlineInputBorder(),//带有边框的输入框
),
多行文本输入框
TextField(//多行文本输入框
maxLines: 4,//控制函数,类似html 文本域textarea
decoration: InputDecoration(//表单定义模块
hintText: "请输入多行文本"//类似html的placeholder
),
),
密码输入框
TextField(
obscureText: true,//密码输入框属性
decoration: InputDecoration(
labelText: "密码:", //label文字内容
hintText: "密码"//
),
),
模拟登陆设置获取输入框内容
class _PeopleState extends State<People> {
// 表单controller-> TextEditingController()可以配置表单默认显示内容
var _username=new TextEditingController(); //初始化的时候给表单赋值
var _password;//定义类属性
@override
void initState() {//初始化组件name默认赋值
// TODO: implement initState
super.initState();
_username.text='初始值';//初始化数据
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('模拟登陆'),
),
body: Padding(
padding: EdgeInsets.all(20),
// child:TextDemo() ,
child:Column(
children: <Widget>[
TextField(//input文本输入框
decoration: InputDecoration(//表单定义模块
hintText: "请输入用户名"//类似html的placeholder
),
onChanged: (value){
setState(() {//设置获取文本内容
_username.text=value;
});
},
),
SizedBox(height: 20,),
TextField(
obscureText: true,//密码输入框属性
decoration: InputDecoration(
hintText: "密码"//
),
onChanged: (value){//表单改变事件可以获取vlue值
setState(() {
this._password=value;//不设置默认值直接就可以赋值
});
},
),
SizedBox(height: 40),
Container(//登陆按钮
width: double.infinity,//无穷大与外层容器,就是自适应的意思
height: 40,
child: RaisedButton(
child: Text("登录"),
onPressed: (){//点击获取文本
print(this._username.text);
print(this._password);
},
color: Colors.blue,
textColor: Colors.white,
),
)
],
) ,
)
);
}
}
Checkbox
class _PeopleState extends State<People> {
var flag=true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("checkbox"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(children: <Widget>[
Checkbox(//独立多选框
value: this.flag,
onChanged: (v){
setState(() {
this.flag=v;
});
},
activeColor: Colors.red,
),Checkbox(//多选框
value: this.flag,
onChanged: (v){
setState(() {
this.flag=v;
});
},
activeColor: Colors.red,
),
]),
Row(
children: <Widget>[
Text(this.flag?"选中":"未选中")//获取this.flag的值
],
),
SizedBox(height: 40),
CheckboxListTile(//列表和checkBox结合属性
value: this.flag,
onChanged: (v){
setState(() {
this.flag=v;
});
},
title: Text("标题"),
subtitle:Text("这是二级标题") ,
),
Divider(),
CheckboxListTile(
value: this.flag,
onChanged: (v){
setState(() {
this.flag=v;
});
},
title: Text("标题"),
subtitle:Text("这是二级标题") ,
secondary:Icon(Icons.help)
)
],
),
);
}
}
Radio、Switch
class _PeopleState extends State<People> {
var flag=true;
var sex;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Radio"),
),
body: Padding(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text("男:"),
Radio(
value:1,
onChanged: (v){//通过change事件获取单选框的值
setState(() {
this.sex=v;
});
},
groupValue:this.sex ,//单选按钮值
),
SizedBox(width: 20),
Text("女:"),
Radio(
value:2,
onChanged: (v){
setState(() {
this.sex=v;
});
},
groupValue:this.sex ,
)
],
),
Row(
children: <Widget>[
Text("${this.sex}"),
Text(this.sex==1?"男":"女")
],
),
SizedBox(height: 40),
RadioListTile(//单选按钮列表
value:1,
onChanged: (v){
setState(() {
this.sex=v;
});
},
groupValue:this.sex ,
title: Text("标题"),
subtitle:Text("这是二级标题") ,
secondary:Icon(Icons.help),//尾部图标
selected: this.sex==1,//通过判断来选中
),
RadioListTile(
value:2,
onChanged: (v){
setState(() {
this.sex=v;
});
},
groupValue:this.sex ,
title: Text("标题"),
subtitle:Text("这是二级标题") ,
secondary:Image.network('https://www.itying.com/images/flutter/1.png'),
selected: this.sex==2,//通过判断来选中
),
SizedBox(height: 40),
Switch(//Switch选框 值是true,false
value: this.flag,
onChanged: (v){//同样change事件来监听
setState(() {
print(v);
this.flag=v;
});
},
)
],
),
),
);
}
}
表单Demo
class _PeopleState extends State<People> {
String username;
int sex=1;
String info='';
List hobby=[
{
"checked":true,
"title":"吃饭"
},
{
"checked":false,
"title":"睡觉"
},
{
"checked":true,
"title":"写代码"
}
];
List<Widget> _getHobby(){
List<Widget> tempList=[];
for(var i=0;i<this.hobby.length;i++){
tempList.add(
Row(
children: <Widget>[
Text(this.hobby[i]["title"]+":"),
Checkbox(
value: this.hobby[i]["checked"],
onChanged: (value){
setState(() {
this.hobby[i]["checked"]=value;
});
}
)
],
)
);
}
return tempList;
}
void _sexChanged(value){
setState(() {
this.sex=value;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("学员信息登记系统"),
),
body: Padding(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
hintText: "输入用户信息"
),
onChanged: (value){
setState(() {
this.username=value;
});
},
),
SizedBox(height:10),
Row(
children: <Widget>[
Text("男"),
Radio(
value: 1,
onChanged: this._sexChanged,
groupValue: this.sex
),
SizedBox(width: 20),
Text("女"),
Radio(
value: 2,
onChanged:this._sexChanged,
groupValue: this.sex
)
],
),
//爱好
SizedBox(height:40),
Column(
children: this._getHobby(),
),
TextField(
maxLines: 4,
decoration: InputDecoration(
hintText: "描述信息",
border: OutlineInputBorder()
),
onChanged: (value){
setState(() {
this.info=value;
});
},
),
SizedBox(height:40),
Container(
width: double.infinity,
height: 40,
child: RaisedButton(
child: Text("提交信息"),
onPressed: (){
print(this.sex);
print(this.username);
print(this.hobby);
},
color: Colors.blue,
textColor: Colors.white,
),
)
],
),
),
);
}
}
推荐阅读
-
Ext表单组件之textField
-
Flutter之CupertinoSwitch和Switch开关组件的简单使用
-
17.Flutter学习之路常用表单TextField、CheckBox等组件
-
Flutter 组件之表单组件TextField、CheckBox、Radio、Switch
-
Flutter基础组件之输入框和表单
-
flutter 单选框按钮组件Radio、单选框卡片组件 RadioListTile、开关组件Switch、开关卡片组件SwitchListTile
-
小程序-文本输入框input+表单组件组合+开关选择器按钮+滑动选择器按钮slider+文本输入框+单选按钮radio+多选按钮checkbox+添加手机联系人+input绑定事件处理函数+剪贴板
-
自定义浏览器原生组件样式之radio和checkbox_html/css_WEB-ITnose
-
自定义浏览器原生组件样式之radio和checkbox_html/css_WEB-ITnose
-
第四十讲:tapestry表单组件详解之TextField