如何在flutter中激活/选中复选框后保持边框

ryevplcw  于 2023-02-09  发布在  Flutter
关注(0)|答案(3)|浏览(215)

因此,我现在拥有的是

,选中时无边框复选框
我想要实现的是

,选中时会出现一个带边框的复选框
这是我的复选框的代码:

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

v09wglhw1#

可以将其 Package 在容器中并为其设置边框
How to add a border to a widget in Flutter?
然后你可以使用主题(unselectedwidgetcolor:)来改变复选框的默认边框
change checkbox border-color in flutter
那么根据这些问题,我们可以两者并用,达到我们想要的

bool _isChecked = false;

然后,我们可以定义复选框,假设isChecked等于true,如果不通过ternary if将其更改为白色,则颜色将为粉红色

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;
                  });
                },
              ),
            ),
          ),

使用上面的代码,您将得到如下所示的内容

你也可以改变粉红色的边界到任何你想要的

ulydmbyx

ulydmbyx2#

如果你想使用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);
}

swvgeqrz

swvgeqrz3#

使用MaterialStateBorderSide可以获得预期的视图

bool state = false;

 Checkbox(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(4),
              ),
              activeColor: Colors.pink,
              checkColor: Colors.white,
              side: MaterialStateBorderSide.resolveWith(
                (states) => const BorderSide(color: Colors.white),
              ),
              value: state,
              onChanged: (value) {
                setState(() {
                  state = value!;
                });
              },
            ),

相关问题