如何更改 CheckboxListTile 的刻度顏色

Question

我已經設置了我的復選框小部件，並希望在選中時將勾選顏色更改為綠色（當前為白色）。 因此，我設法通過添加主題將未選中的復選框的顏色更改為白色。 我想將選定的刻度顏色更改為綠色，但是我似乎無法在主題下找到正確的選項來執行此操作。

代碼：

  Widget buildResultTile(data) {
    return Theme(
      data: ThemeData(unselectedWidgetColor: white),
      child:
        CheckboxListTile(
        activeColor: transparent,
        title: AutoSizeText(
          data,
          maxLines: 1,
          style: TextStyle(
            color: white,
          ),
        ),
        value: _serachSelectList.contains(data),
        onChanged: (bool value) {
          setState(() {
            if (value) {
              _serachSelectList.add(data);
            } else {
              _serachSelectList.remove(data);
            }
          });
        },
        secondary: const Icon(Icons.account_box, color: white),      
      )
    );
  } 

未選中：

選中（我只想勾選Colors.green ）：

Answer 1

要更改CheckboxListTile的填充顏色，您只需在ThemeData設置toggleableActiveColor屬性：

ThemeData(
    // ... other theme values ...

    toggleableActiveColor: Colors.green
)

遺憾的是， CheckboxListTile無法更改刻度線的顏色，因為它沒有公開其Checkbox小部件的checkColor屬性，因此您只能滾動自己的列表checkColor貼。

Answer 2

您可以使用 CheckboxListTile-Widget 的checkColor屬性來設置復選標記的顏色：

CheckboxListTile(
  checkColor: Colors.black54, //sets checkmark color
  // ... other properties ...
)

（見https://github.com/flutter/flutter/pull/37636 ）

要更改復選框的填充顏色，請參閱 Magnus https://stackoverflow.com/a/56941539/702478的答案

Answer 3

請試試這個偽代碼，

Color selected_color = Colors.green;
Color unselected_color = Colors.transparent;
Color default_color = unselected_color ;

  Widget buildResultTile(data) {
    return Theme(
      data: ThemeData(unselectedWidgetColor: white),
      child:
        CheckboxListTile(
        activeColor: default_color,
        title: AutoSizeText(
          data,
          maxLines: 1,
          style: TextStyle(
            color: white,
          ),
        ),
        value: _serachSelectList.contains(data),
        onChanged: (bool value) {
          setState(() {
            if (value) {
              _serachSelectList.add(data);
              setState((){ default_color = selected_color });
            } else {
              _serachSelectList.remove(data);
              setState((){ default_color = unselected_color });
            }
          });
        },
        secondary: const Icon(Icons.account_box, color: white),      
      )
    );
  } 

我希望能幫助你

Answer 4

您需要CheckboxListTile ，而是使用帶有圖標、文本和簡單Checkbox小部件的Row 。

Checkbox提供checkColor屬性 - 負責檢查/勾選顏色，默認情況下為白色。 為該屬性設置您想要的顏色，它應該可以工作。

例如

Row(crossAxisAlignment: CrossAxisAlignment.center, children: [

  Icon(Icons.account_box, color: Colors.white),
  Expanded(
    child: AutoSizeText(
      data,
      maxLines: 1,
      style: TextStyle(
        color: white,
      ),
    )
  ),
  Checkbox(
    value: _serachSelectList.contains(data),
    onChanged: (bool value) {
      setState(() {
        if (value) {
          _serachSelectList.add(data);
          setState((){ default_color = selected_color });
        } else {
          _serachSelectList.remove(data);
          setState((){ default_color = unselected_color });
        }
      });
    },
    checkColor: Colors.green,
    activeColor: Colors.transparent,
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
  ),

]);

我沒有測試此代碼 - 您可能會遇到需要自己解決的大小和對齊問題。 然而，總體思路是有效的。

如果這有幫助，請告訴我。

Answer 5

它是 flutter 復選框顏色更改的工作代碼

檢查顏色：Colors.white，

活動顏色：Colors.red，

CheckboxListTile(
                checkColor: Colors.white,
                activeColor: Colors.red,
                value: checkedValue,
                onChanged: (newValue) {
                  setState(() {
                    checkedValue = newValue!;
                  });
                },
                controlAffinity:
                    ListTileControlAffinity.leading, //  <-- leading Checkbox
              ),