3

我需要一种将检查 (✔) 颜色更改为白色的方法。我如何做到这一点当前结果的截图

4

4 回答 4

3

黑色或白色复选标记

您可以根据浅色或深色主题将颜色更改为黑色或白色。您可以全局更改主题或将特定小部件包装在 Theme 小部件中。

Theme(
  data: ThemeData(
    brightness: Brightness.dark
  ), // or shorthand => ThemeData.dark()
  child: FilterChip(
    label: Text('My chip'),
    onSelected: (value) {
      // ...
    },
  ),
);

其他颜色

目前无法FilterChip将 Material 包提供的对勾颜色更改为任意颜色。复选标记的绘制方式可以在此处的类的源代码中Chip找到。

为了将来参考，这是绘制复选标记的代码部分：

void _paintCheck(Canvas canvas, Offset origin, double size) {
    Color paintColor;
    switch (theme.brightness) {
      case Brightness.light:
        paintColor = theme.showAvatar ? Colors.white : Colors.black.withAlpha(_kCheckmarkAlpha);
        break;
      case Brightness.dark:
        paintColor = theme.showAvatar ? Colors.black : Colors.white.withAlpha(_kCheckmarkAlpha);
        break;
    }
    ...

所以它现在只能显示为黑色或白色。如果您希望它着色，则必须使用自定义小部件。

你也可以加入 Flutters Github 项目上已经打开的问题。

于 2019-07-17T21:57:59.327 回答
2

您可以简单地将您的小部件包装FilterChip在一个小部件中，并在不更改一般应用程序样式的情况下Theme设置所需的内容。ThemeData

Theme(
  data: ThemeData.dark(), // White color. Select light for black.
  child: FilterChip(
    label: Text('Test'),
    selected: _selected,
    onSelected: (val) {
      setState(() => _selected = val);
    },
    backgroundColor: Colors.blue,
    selectedColor: Colors.pink,
    labelStyle: TextStyle(
      color: Colors.white,
    ),
  ),
),
于 2019-07-17T22:55:28.807 回答
2

您可以使用 checkMarkColor 属性更改复选标记的颜色 

FilterChip(
        label: Text('Pizza'),
        shape: StadiumBorder(side: BorderSide()),
        checkmarkColor: Colors.red,
        backgroundColor: Colors.transparent,
      ),
于 2020-03-20T06:42:38.433 回答
1

您可以通过使用 Avatar 并对其进行自定义以表示刻度线来解决此问题，例如

FilterChip(
   label: Text(
      "label text",
         style: TextStyle(color: Colors.red),
      ),
      avatar: isSelected ? Icon(Icons.check, color: contrastColor(Colors.red)) : null,
      // selected: isSelected,
   },
)

该功能contrastColor仅查看提供的颜色并根据其发光选择白色或黑色。

切换时的动画效果会稍微破坏这一点，因此如果看起来很糟糕，您可能希望保留一个“空”化身而不是 null。

FilterChip用一种作品来包装，Theme但至少对我来说，在浅色和深色主题之间切换时，它会错误地渲染背景颜色（太暗）。

于 2019-08-03T15:25:42.477 回答