Switch - 开关
安卓
安卓属性 | 类型 | 说明 |
---|
value | bool | 开关得值,一般与状态字段绑定 |
onChanged | Function | 开关状态变更时调用 |
activeColor | Colors | 开关开启时得圆圈颜色 |
activeTrackColor | Colors | 开关开启时得轨道颜色 |
inactiveThumbColor | Colors | 开关关闭时得圆圈颜色 |
inactiveTrackColor | Colors | 开关关闭时得轨道颜色 |
ios
ios属性 | 类型 | 说明 |
---|
value | bool | 开关得值,一般与状态字段绑定 |
onChanged | Function | 开关状态变更时调用 |
activeColor | Colors | 开关开启时得轨道颜色 |
trackColor | Colors | 开关未开启时得轨道颜色 |
checkbox - 复选框
checkbox 属性
属性 | 类型 | 说明 |
---|
value | bool | 复选框的值 |
onChanged | Function | 复选框状态变更时调用 |
activeColor | Colors | 选中时,复选框背景的颜色 |
checkColor | Colors | 选中时,复选框中对号的颜色 |
checkboxListTile 多选列表
Radio - 单选框
radio 属性
属性 | 类型 | 说明 |
---|
value | bool | 开关得值,一般与状态字段绑定 |
onChanged | Function | 开关状态变更时调用 |
groupValue | 选则组的值 | |
RadioListTile - 单选列表
属性: 与radio 属性一致
TextField - 输入框
属性 | 类型 | 说明 |
---|
autofocus | bool | 是否获取焦点 |
keyboardType | TextInputType | 键盘类型 |
obscureText | bool | 设置为密码框 |
onChanged | Function | 内容更改时自动调用-value |
decoration.labelText | InputDecoration | 标题 |
decoration.hintText | InputDecoration | 提示文字-placeholder |
maxLines | int | 显示行数-文本域 |
日历
- CalendarDatePicker(日历选择器)
- initialCalendarMode
- DatePickerMode.day
- DatePickerMode.year\
- showDatePicker(日期选择器)
- initialDatePickerMode(year| day)
- initialEntryMode (calendar | input)
- showTimePicker(时间选择器)
表单 - Form
- 使用步骤
- 创建表单Form, 并以GlobalKey 作为唯一性标识
- 添加带验证逻辑的TextFormField到Form 中
- 创建按钮以验证和提交表单
- Form (表单容器)
- 创建表单唯一键:
final GlobalKey<FormState> _formState = GlobalKey<FormState>();
- 验证表单:
_formState.currentState.validate()
- 提交表单:
_formState.currentState.save()
- 重置表单
_formState.currentState.reset()
- textFormField(输入框)
- 与TextField 的区别: 必须在Form 内使用 & 带有验证器
validator
(验证器)obscureText
(密码框)onSaved
代码示例
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
class Body extends StatefulWidget {
Body({Key key}) : super(key: key);
@override
_BodyState createState() => _BodyState();
}
class _BodyState extends State<Body> {
bool _switchValue = false;
int _gender = 1;
String _name = "";
final GlobalKey<FormState> _formState = GlobalKey<FormState>();
String _phone = '';
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(10),
child: ListView(
children: [
ListTile(
title: Text('安卓 Switch 组件基本使用'),
subtitle: Row(
children: [
Container(
child: Switch(
value: _switchValue,
activeColor: Colors.amberAccent, // 选中圆圈颜色
activeTrackColor: Colors.pink, // 选中轨道颜色
inactiveTrackColor: Colors.blue, // 未选中轨道颜色
inactiveThumbColor: Colors.cyan, // 未选中圆圈颜色
onChanged: (bool value) {
setState(() {
_switchValue = value;
});
},
),
),
Container(
child: Text('${_switchValue ? '选中': '未选中'}'),
)
]
)
),
ListTile(
title: Text('ios Switch 组件基本使用'),
subtitle: Row(
children: [
Container(
child: CupertinoSwitch(
value: _switchValue,
activeColor: Colors.amberAccent, // 选中轨道颜色
trackColor: Colors.blue, // 未选中轨道颜色
onChanged: (bool value) {
setState(() {
_switchValue = value;
});
},
),
),
Container(
child: Text('${_switchValue ? '选中': '未选中'}'),
)
]
)
),
ListTile(
title: Text('checkbox 复选框'),
subtitle: Row(
children: [
Container(
child: Checkbox(
value: this._switchValue,
activeColor: Colors.amberAccent, // 选中背景颜色
checkColor: Colors.blue, // 选中对号颜色
onChanged: (bool value) {
setState(() {
_switchValue = value;
});
},
),
),
Container(
child: Text('${_switchValue ? '选中': '未选中'}'),
)
]
)
),
CheckboxListTile(
secondary: Icon(Icons.account_box, size: 50),
value: this._switchValue,
activeColor: Colors.amberAccent, // 选中背景颜色
checkColor: Colors.blue, // 选中对号颜色
onChanged: (bool value) {
setState(() {
_switchValue = value;
});
},
title: Text('checkboxListTile'),
subtitle: Text('checkboxListTile 选中listTile '),
selected: _switchValue, // 整个选中
),
ListTile(
title: Text('Radio 单选'),
subtitle: Row(
children: [
Text('男'),
Radio(
value: 1,
groupValue: _gender,
onChanged: (value) {
print(value);
setState(() {
_gender = value;
});
}
),
Text('女'),
Radio(
value: 2,
groupValue: _gender,
onChanged: (value) {
print(value);
setState(() {
_gender = value;
});
}
)
]
)
),
RadioListTile(
value: 1,
groupValue: _gender,
onChanged: (value) {
print(value);
setState(() {
_gender = value;
});
},
title: Text('男-RadioListTile'),
subtitle: Text('我是那男人'),
secondary: Icon(Icons.arrow_forward_ios, size: 20),
selected: _gender == 1,
selectedTileColor: Colors.cyan[100], // 选中背景
),
RadioListTile(
value: 2,
groupValue: _gender,
onChanged: (value) {
print(value);
setState(() {
_gender = value;
});
},
title: Text('女-RadioListTile'),
subtitle: Text('我是那女人'),
secondary: Icon(Icons.arrow_forward_ios, size: 20),
selected: _gender == 2,
selectedTileColor: Colors.cyan[100], // 选中背景
),
TextField(
obscureText: true,
autofocus: false, // 自动获取焦点
keyboardType: TextInputType.phone, // 键盘类型
decoration: InputDecoration(
prefixIcon: Icon(Icons.person), // 图标
labelText: '用户名',
hintText: '请输入用户名',
// 提示文字样式
hintStyle: TextStyle(
color: Colors.green,
fontSize: 20,
),
// 获取焦点时边框样式
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.lightBlueAccent,
)
),
// 默认边框样式
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.yellow,
)
),
),
// maxLines: 2, // 行数
maxLength: 10, //字数
onChanged: (value) {
setState(() {
_name = value;
});
},
),
Divider(color: Colors.blue),
Form(
key: _formState,
child: Column(
children: [
TextFormField(
decoration: InputDecoration(
hintText: '手机号',
),
validator: (value) {
RegExp reg = new RegExp(r'^\d{11}$');
if(!reg.hasMatch(value)) {
return '手机号格式不正确';
}
return null;
},
onSaved: (value) {
_phone = value;
},
),
],
),
),
// 表单提交
Container(
child: ElevatedButton(
child: Text('提交'),
onPressed: () {
if(_formState.currentState.validate()) {
print('保存成功');
// 提交表单,触发sava后会调用TextFormField 中的onSaved 方法
_formState.currentState.save();
}
},
)
)
],
),
);
}
}