Material 组件库中提供了 Material 风格的单选开关Switch和复选框Checkbox,虽然它们都是继承自StatefulWidget,但它们本身不会保存当前选中状态,选中状态都是由父组件来管理的。当Switch或Checkbox被点击时,会触发它们的onChanged回调,我们可以在此回调中处理选中状态改变逻辑
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
class SwitchAndCheckBoxTestRoute extends StatefulWidget {
const SwitchAndCheckBoxTestRoute({Key? key}) : super(key: key);
@override
State<SwitchAndCheckBoxTestRoute> createState() => _MyState();
}
class _MyState extends State<SwitchAndCheckBoxTestRoute> {
bool _switchSelected = true ;
bool _checkboxSelected = true ;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("buttonState"),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Switch(
value: _switchSelected,
onChanged: (value){
setState(() {
_switchSelected = value;
});
}
),
Row(
children: [
Checkbox(
value: _checkboxSelected,
activeColor: Colors.red, //选中时的颜色
tristate: false,
onChanged:(value){
setState(() {
_checkboxSelected=value!;
});
}
),
const Text("足球"),
Checkbox(
value: !_checkboxSelected,
activeColor: Colors.red, //选中时的颜色
tristate: false,
onChanged:(value){
setState(() {
_checkboxSelected=!value!;
});
}
),
Text("蓝球"),
],
),
],
),
);
}
}