Flutter中具有3个值的多个复选框答案

【问题标题】：Multiple Checkbox in Flutter with 3 valuesFlutter中具有3个值的多个复选框
【发布时间】：2020-09-09 08:48:39
【问题描述】：

Dart 中的 bool 可以具有这些值中的任何一个

空
是的
假

我想要一个Checkbox，它的工作原理如下：

第一次，我有bool 值null，所以给我看空框，之后我的值将是true 或false，所以给我看相应的小部件。

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

创建这个小部件（可从外部自定义）：

class MyCheckbox extends StatefulWidget {
  final bool? value;
  final ValueChanged<bool?> onChanged;
  final Color? checkedIconColor;
  final Color? checkedFillColor;
  final IconData? checkedIcon;
  final Color? uncheckedIconColor;
  final Color? uncheckedFillColor;
  final IconData? uncheckedIcon;

  const MyCheckbox({
    Key? key,
    required this.value,
    required this.onChanged,
    this.checkedIconColor = Colors.white,
    this.checkedFillColor = Colors.teal,
    this.checkedIcon = Icons.check,
    this.uncheckedIconColor = Colors.white,
    this.uncheckedFillColor = Colors.red,
    this.uncheckedIcon = Icons.close,
  }) : super(key: key);

  @override
  _MyCheckboxState createState() => _MyCheckboxState();
}

class _MyCheckboxState extends State<MyCheckbox> {
  bool? _checked;

  @override
  void initState() {
    super.initState();
    _checked = widget.value;
  }

  @override
  void didUpdateWidget(MyCheckbox oldWidget) {
    super.didUpdateWidget(oldWidget);
    _checked = widget.value;
  }

  Widget _buildIcon() {
    Color? fillColor;
    Color? iconColor;
    IconData? iconData;

    var checked = _checked;
    if (checked != null) {
      if (checked) {
        fillColor = widget.checkedFillColor;
        iconColor = widget.checkedIconColor;
        iconData = widget.checkedIcon;
      } else {
        fillColor = widget.uncheckedFillColor;
        iconColor = widget.uncheckedIconColor;
        iconData = widget.uncheckedIcon;
      }
    }

    return Container(
      decoration: BoxDecoration(
        color: fillColor,
        border: Border.all(color: Colors.grey),
      ),
      child: Icon(
        iconData,
        color: iconColor,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: _buildIcon(),
      onPressed: () {
        bool? result = _checked;
        widget.onChanged(result == null ? true : result ? false : null);
      },
    );
  }
}

并像这样使用它：

bool? _value;

MyCheckbox(
  value: _value,
  onChanged: (value) => setState(() => _value = value),
)

【讨论】：

我认为您可以通过单独使用 _checked 并摆脱该 CheckStatus 变量来改进这一点 - 或相反。它们目前代表完全相同的东西并且是多余的，因此容易出错并且代码很臭。小部件的好主意 - 我可以看到这可能会有用。
@Eiko 我也是这么想的，但后来我决定添加enum 以使MyCheckbox 将来可以维护，当您尝试向其添加更多内容时，否则您' 必须使用 _value == null ? doThis 否则如果 !value 这样做。