跳至主要内容
内容

更新 `Checkbox.fillColor` 行为

内容

摘要

#

当复选框未选中时，Checkbox.fillColor 现在将应用于复选框的背景。

上下文

#

之前，当复选框未选中且背景透明时，Checkbox.fillColor 会应用于复选框的边框。此更改后，当复选框未选中时，Checkbox.fillColor 会应用于复选框的背景，而边框则使用 Checkbox.side 颜色。

更改说明

#

现在，当复选框未选中时，Checkbox.fillColor 会应用于复选框的背景，而不是用作边框颜色。

迁移指南

#

更新后的 Checkbox.fillColor 行为在复选框未选中状态下将填充颜色应用于复选框的背景。要获得之前的行为，请在未选中状态下将 Checbox.fillColor 设置为 Colors.transparent，并将 Checkbox.side 设置为所需的颜色。

如果您使用 Checkbox.fillColor 属性来自定义复选框。

迁移前的代码

dart
Checkbox(
  fillColor: MaterialStateProperty.resolveWith((states) {
    if (!states.contains(MaterialState.selected)) {
      return Colors.red;
    }
    return null;
  }),
  value: _checked,
  onChanged: _enabled
    ? (bool? value) {
        setState(() {
          _checked = value!;
        });
      }
    : null,
),

迁移后的代码

dart
Checkbox(
  fillColor: MaterialStateProperty.resolveWith((states) {
    if (!states.contains(MaterialState.selected)) {
      return Colors.transparent;
    }
    return null;
  }),
  side: const BorderSide(color: Colors.red, width: 2),
  value: _checked,
  onChanged: _enabled
    ? (bool? value) {
        setState(() {
          _checked = value!;
        });
      }
    : null,
),

如果您使用 CheckboxThemeData.fillColor 属性来自定义复选框。

迁移前的代码

dart
checkboxTheme: CheckboxThemeData(
  fillColor: MaterialStateProperty.resolveWith((states) {
    if (!states.contains(MaterialState.selected)) {
      return Colors.red;
    }
    return null;
  }),
),

迁移后的代码

dart
checkboxTheme: CheckboxThemeData(
  fillColor: MaterialStateProperty.resolveWith((states) {
    if (!states.contains(MaterialState.selected)) {
      return Colors.transparent;
    }
    return null;
  }),
  side: const BorderSide(color: Colors.red, width: 2),
),

时间线

#

包含于版本：3.10.0-17.0.pre
稳定版发布：3.13.0

参考

#

API 文档

相关问题

相关 PR

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面最后更新于 2024-04-04。 查看源代码 或 报告问题.