25.Flutter中的表单 Radio RadioListTile Switch SwitchListTile 以及表单组件实现一个简单的学员登记系统(下)
2024-08-27 06:34:21
四、Radio、RadioListTile单选按钮组件
Radio常用属性：
value单选的值。
onChanged改变时触发。
activeColor:选中的颜色、背景颜色
groupValue:选择组的值。
RadioListTile：常用属性：
value:true或者false
onChanged:改变的时候触发的事件。
activeColor:选中的颜色、背景颜色
title:标题
subtitle:二级标题
secondary:配置图标或者图片
groupValue:选择租的值。
五、开关Switch
Radio:
import 'package:flutter/material.dart';
class RadioDemoPage extends StatefulWidget {
RadioDemoPage({Key key}) : super(key: key); _RadioDemoPageState createState() => _RadioDemoPageState();
} class _RadioDemoPageState extends State<RadioDemoPage> {
int sex=;
bool flag=true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
title: Text('Radio'),
),
body: Padding(
padding: EdgeInsets.all(),
child:Column(
children: <Widget>[
Row(
children: <Widget>[
//groupValue:一样表示是同一个按钮组：
Text('男'),
Radio(
value: ,
onChanged:(v){
setState(() {
this.sex=v;
});
},
groupValue: this.sex,
),
SizedBox(width:),
Text('女'),
Radio(
value: ,
onChanged:(v){
setState(() {
this.sex=v;
});
},
groupValue: this.sex,
)
],
),
Row(
children: <Widget>[
Text("${this.sex}"),
Text(this.sex==?'男':'女')
],
),
SizedBox(height: ),
RadioListTile(
value: ,
onChanged: (v){
setState(() {
this.sex=v;
});
},
groupValue: this.sex,
title: Text('标题'),
subtitle: Text('二级标题'),
secondary: Icon(Icons.help),
),
RadioListTile(
value: ,
onChanged: (v){
setState(() {
this.sex=v;
});
},
groupValue: this.sex,
title: Text('标题'),
subtitle: Text('二级标题'),
secondary: Icon(Icons.help),
),
SizedBox(height: ),
Switch(
value:this.flag,
onChanged: (v){
setState(() {
print(v);
this.flag=v;
});
},
)
],
),
),
);
}
}
FormDemo.dart
import 'package:flutter/material.dart';
class FormDemoPage extends StatefulWidget {
FormDemoPage({Key key}) : super(key: key);
_FormDemoPageState createState() => _FormDemoPageState();
}
class _FormDemoPageState extends State<FormDemoPage> {
String username;
int sex = ;
String info;
List hobby = [
{"checked": true, "title": "吃饭"},
{"checked": true, "title": "睡觉"},
{"checked": true, "title": "写代码"}
];
List<Widget> _getHobby() {
List<Widget> tempList = [];
for (var i = ; 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 Container(
child: Scaffold(
appBar: AppBar(
title: Text('学员信息登记系统'),
),
body: Padding(
padding: EdgeInsets.all(),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(hintText: "输入用户信息"),
onChanged: (value) {
setState(() {
this.username = value;
});
},
),
Row(
children: <Widget>[
Text("男"),
Radio(
value: ,
onChanged: this._sexChanged,
groupValue: this.sex,
),
Text("女"),
Radio(
value: ,
onChanged: this._sexChanged,
groupValue: this.sex,
)
],
),
//爱好：
Column(
children: this._getHobby(),
),
TextField(
maxLines: ,
decoration: InputDecoration(
hintText: "描述信息",
border: OutlineInputBorder()
),
onChanged: (value){
setState(() {
this.info=value;
});
},
),
SizedBox(height: ),
Container(
width: double.infinity,
height: ,
child: RaisedButton(
child: Text("登录"),
onPressed: () {
print(this.sex);
print(this.username);
print(this.hobby);
print(this.info);
},
color: Colors.blue,
textColor: Colors.white,
),
)
],
),
),
),
);
}
}
最新文章
- ElasticSearch+Kibana 索引操作( 附源码)
- 使用Mulesoft建立webservice, jax-ws方式, wsdl first
- fastcgi 性能初配 504 gateway time-out
- Microsoft JScript提示‘DIRECT’未定义（2014-08-26记）
- js中对象概念的声明
- 【crunch bang】增加壁纸图片文件
- leetcode 113 Path Sum II ----- java
- HDU1003 dp 动态规划解析
- C++顺序容器类总结
- SQL Server 字段状态判断语句
- 关于看似简单的eclipse中tomcat小猫图标消失的问题解决
- c# 获取TFS结构 文件
- Electron 项目在 Mac 下复制和粘贴快捷键失效的解决办法
- 【已解决】checkout 配置无效的问题可以进来看下
- L2-025 分而治之(并查集)
- 【Java并发编程】14、Thread，线程说明
- PyCharm Tips 常用操作帮助
- 【分布式session】Spring-session的使用
- MYSQL-使用mysqldump创建数据库快照
- jenkins持续集成python cases