TextField
常见属性:属性 | 描述 |
---|---|
maxLines | 将文本框改为多行文本框,默认是单行 |
onChanged | 文本框改变的时候触发的时间 |
decoration | hintText类似于EditText中hint属性。border 边框线,配合OutlineInputBorder使用、labelText:label的名称、labelStyle,配置label使用 |
obscureText | j将文本框改为密码框 |
controller | controller结合TextEditingController ()可以配置表单默认显示的内容 |
class TextFieldPage extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return _TextFieldPageState();
}
}
class _TextFieldPageState extends State<TextFieldPage> {
var _message=TextEditingController() ;
@override
void initState() {
// TODO: implement initState
super.initState();
_message.text='初始值';
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('TextFieldDemo'),),
body: Padding(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
TextField(),
SizedBox(height: 20,),
TextField(
decoration: InputDecoration(
hintText: '请输入内容',
border: OutlineInputBorder(),
),
),
SizedBox(height: 20,),
TextField(
maxLines: 3,
decoration: InputDecoration(
hintText: '多行文本框',
border: OutlineInputBorder(),
),
),
SizedBox(height: 20,),
TextField(
obscureText: true,
decoration: InputDecoration(
hintText: '密码框',
border: OutlineInputBorder(
),
),
),
SizedBox(height: 20,),
TextField(
decoration: InputDecoration(
hintText: '请输入用户名',
labelText: '用户名',
border: OutlineInputBorder(
),
),
),
SizedBox(height: 20,),
TextField(
decoration: InputDecoration(
hintText: '请输入用户名',
icon: Icon(Icons.account_circle),
border: OutlineInputBorder(
),
),
),
SizedBox(height: 20,),
TextField(
controller:_message,
decoration: InputDecoration(
hintText: '获取表单内容',
labelText: '获取表单内容',
icon: Icon(Icons.account_circle),
border: OutlineInputBorder(
),
),
),
SizedBox(height: 20,),
RaisedButton(
child: Text('获取上面文本框的内容'),
onPressed: (){
print('${_message.text}');
},
)
],
),
),
);
}
}
Checkbox
常见属性
属性 | 描述 |
---|---|
value | true或者false |
onChange | 改变的时候触发的事件 |
activeColor | 选中的颜色、背景颜色 |
checkColor | 选中的颜色、CheckBox里面对号的颜色 |
属性 | 描述 |
---|---|
value | true或者false |
onChange | 改变的时候触发的事件 |
activeColor | 选中的颜色、背景颜色 |
title | 标题 |
subtitle | 二级标题 |
secondary | 配置图标或者图片 |
selected | 选中的时候文字颜色是否跟着改变 |