Question

我都设置了复选框小部件，并希望在选中时将对勾颜色更改为绿色（当前为白色）。因此，通过添加主题，我设法将未选中的复选框的颜色更改为白色。我想将选定的刻度颜色更改为绿色，但是似乎无法在主题下找到合适的选项。

代码：

It [the token] is encoded in plain base64

未选中：

已选中（我希望仅标记是 const RootQuery = new GraphQLObjectType({ //Query for getting details of a specific book. name:'RootQueryType', fields:{ book:{ type:BookType, args:{id:{type:GraphQLID}}, resolve(parent,args){ console.log(typeof(args.id)); return_.find(books,{id:args.id}); } }, author:{ type:AuthorType, args:{id:{type:GraphQLID}}, resolve(parent,args){ //code to get data from db/other source. return_.find(authors,{id:args.id}); } }, books:{ type:new GraphQLList(BookType), resolve(parent,args){ return books; } }, authors:{ type:new GraphQLList(AuthorType), resolve(parent,args){ return authors; } } //line 94 });）：

Answer 1

您可以使用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 2

请尝试使用此伪代码，

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 3

您需要抛弃CheckboxListTile，而使用带有图标，文本和简单Row小部件的Checkbox。

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 4

要更改CheckboxListTile中复选框的填充颜色，您只需在toggleableActiveColor中设置ThemeData属性：

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

    toggleableActiveColor: Colors.green
)

不幸的是，CheckboxListTile不能更改刻度线的颜色，因为它不会公开其checkColor小部件的Checkbox属性，因此您只能滚动自己的列表图块。

如何更改CheckboxListTile的刻度颜色

4 个答案: