Question

我在Flutter应用程序的UI中添加了一个复选框，我可以看到复选框颜色或活动颜色属性，但是找不到任何更改复选框颜色（通常为黑色）的选项。

有什么规定或调整来更改边框颜色？

Answer 1

Checkbox(value: false, tristate: false, onChanged: () {});
　　↓
Theme(
data: ThemeData(unselectedWidgetColor: Colors.red),
child: Checkbox(value: false, tristate: false, onChanged: (bool value) {}));

No onChanged, then the border will be grey(disabled).

Answer 2

您可以这样做：

        Container(
            decoration: const BoxDecoration(
              border: Border(
                top: BorderSide(width: 3.0, color: Colors.red),
                left: BorderSide(width: 3.0, color: Colors.red),
                right: BorderSide(width: 3.0, color: Colors.red),
                bottom: BorderSide(width: 3.0, color: Colors.red),
              ),
            ),
            child: Checkbox(value: false, onChanged: null),
            width: 20,
            height: 20),

BoxDecoration类包含border属性，该属性可让您自定义边框，然后可以添加Checkbox并将容器的宽度和高度与复选框匹配

Answer 3

如果您想为复选框定义应用程序范围的主题，您可以这样做：

MaterialApp(
   ...
  theme:ThemeData(
    checkboxTheme: CheckboxThemeData(
      fillColor: MaterialStateColor.resolveWith(
        (states) {
          if (states.contains(MaterialState.selected)) {
           return Colors.purple // the color when checkbox is selected;
            }
         return Colors.white //the color when checkbox is unselected;
         },
    ),
   ),
  ),
 )

为您的应用定义应用范围的主题是一种很好的做法，以避免代码重复并确保一致性，同时也提供更好的维护。享受编码:)

Answer 4

您可以使用 Side 属性...

side: BorderSide(color: Color(0xff585858)),

如何在Flutter / Dart中更改复选框的边框颜色

4 个答案: