flutter控制元件練習demo地址：github
一。CheckBox(勾選框)
CheckBox 勾選框，繼承於 StatefulWidget, 所以本身他是沒有狀態的 Widget ，一般都是在 父 控制元件中加入有狀態的控制元件來給他設定。
1.1 屬性
- tristate： 預設這個是false，此時 value 必定不能是null， 可以設定 為 true，此時 value 可以是任意值
- value： 這個值不能是null(除非上面 tristate 是true) ， 用來設定 此 checkbox 是否選中
- onChanged： 是否選中發生變化時的回撥， 回撥的 bool 值 就是是否選中 ，true 就是選中
- activeColor： 勾選後 勾選框填充的顏色 預設是 ThemeData.toggleableActiveColor
- checkColor： 對勾的顏色 預設的是白色
- materialTapTargetSize：
二。CheckboxListTile(有標題的Checkbox)
2.1 屬性
- value： // 必須要的屬性，是否選定
- onChanged： 是否選中發生變化時的回撥， 回撥的 bool 值 就是是否選中 , true 是 選中
- activeColor： 選中時 checkbox 的填充的顏色
- title： 標題， 具有代表性的就是 Text
- subtitle： 副標題（在 title 下面）， 具有代表性的就是 Text
- isThreeLine = false：// 是否是三行文字
- true ： 副標題 不能為 null
- false：如果沒有副標題 ，就只有一行， 如果有副標題 ，就只有兩行
- dense： 是否密集垂直
- secondary： 左邊的一個控制元件
- selected = false： text 和 icon 的 color 是否 是 activeColor 的顏色
- controlAffinity = ListTileControlAffinity.platform：
- ListTileControlAffinity.platform 根據不同的平臺，來顯示 對話方塊 的位置
- ListTileControlAffinity.trailing：勾選在右，title 在中，secondary 在左
- ListTileControlAffinity.leading ：勾選在左，title 在中，secondary 在右
三 例項截圖
四 程式碼
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
class CheckBoxDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("CheckBox"),
centerTitle: true,
),
body: _Stateful(),
);
}
}
class _Stateful extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _CheckBoxState();
}
}
class _CheckBoxState extends State {
bool _isCheck;
bool _isMale;
bool _isFemale;
bool _checkboxListChecked;
bool _checkboxList2Checked;
@override
void initState() {
super.initState();
_isCheck = false;
_isMale = true;
_isFemale = false;
_checkboxListChecked = false;
_checkboxList2Checked = false;
}
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 20,
),
Text("一：Checkbox",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
Checkbox(
// tristate: true,
// 這個值不能是null(除非上面 tristate 是true) ， 用來設定 此 checkbox 是否選中
value: _isCheck,
// 勾選後 勾選框填充的顏色 預設是 ThemeData.toggleableActiveColor
activeColor: Colors.red,
// 對勾的顏色 預設的是白色
checkColor: Colors.blue,
// 是否選中發生變化時的回撥， 回撥的 bool 值 就是是否選中
// true 就是選中
onChanged: (isCheck) {
if (isCheck) {
Fluttertoast.showToast(msg: "改變了：$isCheck");
}
_isCheck = isCheck;
//改變_CheckBoxState
setState(() {});
},
),
Text("用checkbox實現單選，其實就是改值",
style: TextStyle(fontWeight: FontWeight.bold)),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
Text("男"),
Checkbox(
value: _isMale,
onChanged: (isMan) {
setState(() {
if (isMan) {
_isMale = true;
_isFemale = false;
}
});
},
)
],
),
SizedBox(
width: 20,
),
Row(
children: <Widget>[
Text("女"),
Checkbox(
value: _isFemale,
onChanged: (isFemale) {
setState(() {
if (isFemale) {
_isFemale = true;
_isMale = false;
}
});
},
)
],
)
],
),
SizedBox(
height: 20,
),
Text("二：CheckboxListTile",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
SizedBox(
width: 250,
child: Column(
children: <Widget>[
CheckboxListTile(
// 必須要的屬性
value: _checkboxListChecked,
//是否選中發生變化時的回撥， 回撥的 bool 值 就是是否選中 , true 是 選中
onChanged: (isCheck) {
Fluttertoast.showToast(msg: "選的$isCheck");
setState(() {
_checkboxListChecked = isCheck;
});
},
// 選中時 checkbox 的填充的顏色 ，
// selected 如果是 true ：
// 如果 不設定 title 和 subtitle 中 text 的 color 的話， text的顏色 跟隨 activeColor
activeColor: Colors.red,
// 標題， 具有代表性的就是 Text ，
// selected 如果是 true ：
// 如果 不設定 text 的 color 的話， text的顏色 跟隨 activeColor
title: Text(
"標題",
style: TextStyle(color: Colors.blueAccent),
),
// 副標題（在 title 下面）， 具有代表性的就是 Text ， 如果 不設定 text 的 color 的話， text的顏色 跟隨 activeColor
subtitle: Text("副標題"),
// 是否是三行文字
// 如果是 true ： 副標題 不能為 null
// 如果是 false：
// 如果沒有副標題 ，就只有一行， 如果有副標題 ，就只有兩行
isThreeLine: true,
// 是否密集垂直
dense: false,
// 左邊的一個控制元件
secondary: Text("secondary"),
// text 和 icon 的 color 是否 是 activeColor 的顏色
selected: false,
controlAffinity: ListTileControlAffinity.trailing,
),
CheckboxListTile(
onChanged: (isCheck) {
setState(() {
_checkboxList2Checked = isCheck;
});
},
selected: false,
value: _checkboxList2Checked,
title: Text("標題2"),
controlAffinity: ListTileControlAffinity.leading,
)
],
)),
],
);
}
}
複製程式碼