如何在Flutter中使复选框被激活/选中后保持边框

18 浏览
0 Comments

如何在Flutter中使复选框被激活/选中后保持边框

我现在拥有的是\"this\"——当选中时无边框的复选框。

我想要实现的是\"this\"——当选中时有边框的复选框。

这是我当前的复选框代码：

Checkbox(
          value: _isChecked,
          onChanged: (bool value) {
            setState(() {
              _isChecked = value;
            });
           },
          checkColor: Colors.pinkAccent,
          activeColor: Colors.transparent,
        ),
Text("Remember me")

admin 更改状态以发布 2023年5月22日
0

2 答案

0 Comments

如果你想使用Theme来实现这个,你可以像这样覆盖他:

runApp(MaterialApp(
  theme: ThemeData(
    checkboxTheme: CheckboxThemeData(
      checkColor: MaterialStateProperty.resolveWith((_) => Colors.black),
      fillColor: MaterialStateProperty.resolveWith((_) => Colors.transparent),
      side: AlwaysActiveBorderSide(),
    ),
  ),
));
class AlwaysActiveBorderSide extends MaterialStateBorderSide {
  @override
  BorderSide? resolve(_) => const BorderSide(color: Colors.black54);
}

example

0
0 Comments

你可以把它包裹在一个容器中，并设置一个边框
如何在Flutter中为小部件添加边框？
然后可以使用主题(unselectedwidgetcolor:)更改复选框的默认边框
在Flutter中更改复选框边框颜色
然后根据这些问题，我们可以同时使用，以实现我们想要的效果

bool _isChecked = false;

然后我们可以定义我们的复选框，并说如果isChecked等于true，颜色将是粉色强调，如果不是，则通过三元运算符将其更改为白色

  Container(
            decoration: BoxDecoration(
              border: Border.all(
                  color: _isChecked == true ? Colors.pinkAccent: Colors.black,
                  width: 2.3),
            ),
            width: 24,
            height: 24,
            child: Theme(
              data: ThemeData(unselectedWidgetColor: Colors.white),
              child: Checkbox(
                checkColor: Colors.pinkAccent,
                activeColor: Colors.transparent,
                value: _isChecked,
                tristate: false,
                onChanged: (bool isChecked) {
                  setState(() {
                    _isChecked = isChecked;
                  });
                },
              ),
            ),
          ),

使用上述代码，您将获得类似于此的内容
enter image description here

您还可以将粉色边框更改为任何您想要的颜色

0