Flutter：更改复选框的选中颜色

Question

我正在尝试创建一个带有复选框的底部sheet。我发现很难让复选框被选中并在点击后显示不同的颜色。目前复选框只是空的。

我该如何解决这个问题？

bool isChecked = false;

...

Column(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.fromLTRB(50, 10, 10, 10),
                    child: Row(
                      children: <Widget>[
                        Expanded(child: Text('Classes Booked')),
                        Checkbox(
                          checkColor: isChecked
                              ? Colors.grey
                              : Theme.of(context).colorScheme.aqua,
                          value: isChecked,
                          onChanged: (bool value) {
                            setState(() {
                              value = true;
                            });
                          },
                        ),

Answer 1

我认为你应该这样做：

onChanged: (bool value) {
     setState(() {
          isChecked = true;
     });

或者更高效的方法，例如：

onChanged: (bool value) {
     setState(() {
          isChecked = !isChecked;
     });

Answer 2

有一个名为 CheckboxListTile 的预制小部件负责布局。

class AppHomePage extends StatefulWidget {
  @override
  _AppHomePageState createState() => _AppHomePageState();
}

class _AppHomePageState extends State<AppHomePage> {
  bool isChecked = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: CheckboxListTile(
        checkColor: Colors.red,  // for the actual check mark
        activeColor: Colors.green,  // for the surrounding box
        value: isChecked,
        onChanged: (v) => setState(() => isChecked = v),
        title: Text('foo'),
        subtitle: Text('bar'),
      ),
    );
  }

通过更改 checkColor 和 activeColor 您可以修复它。

Flutter：更改复选框的选中颜色

Flutter: Change Checked Colour of Checkboxes

checkbox

flutter

bottom-sheet