概述

#

現在,當 `Checkbox` 未選中時,`Checkbox.fillColor` 會應用於複選框的背景。

背景

#

以前,當 `Checkbox` 未選中且背景透明時,`Checkbox.fillColor` 會應用於複選框的邊框。在此更改後,當 `Checkbox` 未選中時,`Checkbox.fillColor` 會應用於複選框的背景,而邊框使用 `Checkbox.side` 的顏色。

變更說明

#

現在,當 `Checkbox` 未選中時,`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