Switch和Checkbox屬性比較簡單,讀者可以查看API文檔,它們都有一個activeColor屬性,用于設(shè)置激活態(tài)的顏色。至于大小,到目前為止,Checkbox的大小是固定的,無法自定義,而Switch只能定義寬度,高度也是固定的。
Switch
class _MyHomeApp extends StatefulWidget {
const _MyHomeApp({Key? key}) : super(key: key);
@override
State<_MyHomeApp> createState() => _MyHomeAppState();
}
class _MyHomeAppState extends State<_MyHomeApp> {
bool _selectedSwitch = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("設(shè)置"),
centerTitle: true,
),
body: Column(children: [
Switch(
value: _selectedSwitch,
onChanged: (val) {
setState(() {
_selectedSwitch = val;
});
}),
]));
}
}
CheckBox
class _MyHomeApp extends StatefulWidget {
const _MyHomeApp({Key? key}) : super(key: key);
@override
State<_MyHomeApp> createState() => _MyHomeAppState();
}
class _MyHomeAppState extends State<_MyHomeApp> {
bool _selectedCheckbox = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("設(shè)置"),
centerTitle: true,
),
body: Column(children: [
Checkbox(
value: _selectedCheckbox,
onChanged: (val) {
setState(() {
_selectedCheckbox = val as bool;
});
})
]));
}
}
CheckBox 設(shè)置半選
tristate為true的時候, checkbox的值可以為null, null就是半選
class _MyHomeAppState extends State<_MyHomeApp> {
dynamic _selectedCheckbox = null;
bool _selectedSwitch = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("設(shè)置"),
centerTitle: true,
),
body: Column(children: [
Switch(
value: _selectedSwitch,
onChanged: (val) {
setState(() {
_selectedSwitch = val;
});
}),
Checkbox(
tristate: true,
value: _selectedCheckbox,
onChanged: (val) {
setState(() {
_selectedCheckbox = val as bool;
});
})
]));
}
}