版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
在Flutter中通过Navigator组件管理路由导航。
并提供了管理堆栈的方法。如：Navigator.push和Navigator.pop
TextField 文本框组件
| 属性 | 描述 |
|---|---|
| maxLines | 设置此参数可以把文本框改为多行文本框 |
| onChanged | 文本框改变的时候触发的事件 |
| decoration | hintText 类似 html 中的 placeholder border 配置文本框边框 OutlineInputBorder 配合使用 labelText lable 的名称 labelStyle 配置 lable 的样式 |
| obscureText | 把文本框框改为密码框 |
| controller | controller 结合 TextEditingController()可以配置表单默认显示的内容 |
TextField(
maxLines: 10,
// obscureText: true,
decoration: InputDecoration(
hintText: "密码框",
border: OutlineInputBorder()
)
)
String _username=TextEditingController();
void initState() {
// TODO: implement initState
super.initState();
_username.text='这是文本框初始值';
}
TextField(
controller: _username,
onChanged: (value){
// print(value);
setState(() {
this._username.text=value;
});
},
decoration: InputDecoration(
hintText: "请输入您的内容",
),
)
Checkbox、CheckboxListTile 多选框组件
Checkbox 常见属性：
| 属性 | 描述 |
|---|---|
| value | true 或者 false |
| onChanged | 改变的时候触发的事件 |
| activeColor | 选中的颜色、背景颜色 |
| checkColor | 选中的颜色、Checkbox 里面对号的颜色 |
CheckboxListTile 常见属性：
| 属性 | 描述 |
|---|---|
| value | true 或者 false |
| onChanged | 改变的时候触发的事件 |
| activeColor | 选中的颜色、背景颜色 |
| title | 标题 |
| subtitle | 二级标题 |
| secondary | 配置图标或者图片 |
| selected | 选中的时候文字颜色是否跟着改变 |
Checkbox(
value: _isSelected,
onChanged: (v) {
// print(v);
setState(() {
this._isSelected=v
});
},
activeColor: Colors.red,
checkColor:Colors.blue
)
CheckboxListTile(
value: _isSelected,
title: Text("111111"),
subtitle: Text("222"),
onChanged: (v){
setState(() { this._isSelected=v; });
},
activeColor: Colors.red,
secondary: Image.network("baidu.com"),
selected:_isSelected
)
// 例子
class CheckBoxDemo extends StatefulWidget {
CheckBoxDemo({Key key}) : super(key: key);
_CheckBoxDemoState createState() => _CheckBoxDemoState();
}
class _CheckBoxDemoState extends State<CheckBoxDemo> {
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,
)
]),
Row(
children: <Widget>[
Text(this.flag?"选中":"未选中")
],
),
SizedBox(height: 40),
// CheckboxListTile(
// 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),
selected: this.flag,
)
],
),
);
}
}
Radio、RadioListTile 单选按钮组件
Radio 常用属性：
| 属性 | 描述 |
|---|---|
| value | 单选的值 |
| onChanged | 改变时触发 |
| activeColor | 选中的颜色、背景颜色 |
| groupValue | 选择组的值 |
RadioListTile 常用属性：
| 属性 | 描述 |
|---|---|
| value | true 或者 false |
| onChanged | 改变的时候触发的事件 |
| activeColor | 选中的颜色、背景颜色 |
| title | 标题 |
| subtitle | 二级标题 |
| secondary | 配置图标或者图片 |
| groupValue | 选择组的值 |
class RadioDemo extends StatefulWidget {
RadioDemo({Key key}) : super(key: key);
_RadioDemoState createState() => _RadioDemoState();
}
class _RadioDemoState extends State<RadioDemo> {
int sex=1;
bool flag=true;
@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){
// 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('baidu.com'),
selected: this.sex==2,
),
SizedBox(height: 40),
Switch(
value: this.flag,
onChanged: (v){
setState(() {
print(v);
this.flag=v;
});
},
)
],
),
),
);
}
}
开关 Switch
| 属性 | 描述 |
|---|---|
| value | 单选的值 |
| onChanged | 改变时触发 |
| activeColor | 选中的颜色、背景颜色 |