TextField
属性 | 释义 |
---|
maxLines | 多行文本框 |
onChanged | 监听文本框中的文字改变 |
decoration | hintText, border, labelText, labelStyle |
obscureText | 把文本框改为密码框 |
controller | 结合TextEditingController()可以配置表单默认显示内容 |
import 'package:flutter/material.dart';
class TextFieldDemoPage extends StatefulWidget {
TextFieldDemoPage({Key key}) : super(key: key);
_TextFieldDemoPageState createState() => _TextFieldDemoPageState();
}
class _TextFieldDemoPageState extends State<TextFieldDemoPage> {
var _username=new TextEditingController(); //初始化的时候给表单赋值
var _password;
@override
void initState() {
// TODO: implement initState
super.initState();
_username.text='初始值';
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('表单演示页面'),
),
body: Padding(
padding: EdgeInsets.all(10),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
hintText: "请输入用户名"
),
controller: _username,
onChanged: (value){
setState(() {
_username.text = value;
});
},
),
SizedBox(height: 10,),
TextField(
obscureText: true,
decoration: InputDecoration(
hintText: "请输入密码"
),
onChanged: (value) {
setState(() {
_password = value;
});
},
),
SizedBox(height: 10,),
Container(
width: double.infinity, // 相当于match_parent
height: 40,
child: RaisedButton(
child: Text("登录"),
onPressed: () {
print(this._username.text);
print(this._password);
},
color: Colors.blue,
textColor: Colors.white,
),
)
],
),
),
);
}
}
Checkbox, CheckboxListTile多选框组件
Checkbox属性
属性 | 释义 |
---|
value | true或者false |
onChanged | 状态改变监听 |
activeColor | 选中的颜色、背景颜色 |
checkColor | 选中的颜色、Checkbox填充颜色 |
CheckboxListTile属性
属性 | 释义 |
---|
value | true或者false |
onChanged | 监听触发事件 |
activeColor | 选中的颜色和背景 |
title | 标题 |
subtitle | 二级标题 |
secondary | 配置图标或者图片 |
selected | 选中的时候文字是否跟随着改变 |
import 'package:flutter/material.dart';
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),
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 | 选择组的值,相同的值为一个组,value值和groupValue值相等处于选中状态 |
RadioListTile属性
属性 | 释义 |
---|
value | true或者false |
onChanged | 监听触发事件 |
activeColor | 选中的颜色和背景 |
title | 标题 |
subtitle | 二级标题 |
secondary | 配置图标或者图片 |
groupValue | 选择组的值,相同的值为一个组 |
import 'package:flutter/material.dart';
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('https://profile.csdnimg.cn/B/0/A/1_qq_39424143'),
selected: this.sex==2, // 选中文字高亮
),
SizedBox(height: 40),
Switch(
value: this.flag,
onChanged: (v){
setState(() {
print(v);
this.flag=v;
});
},
)
],
),
),
);
}
}