Flutter ChoiceChip选择的文本颜色

Question

如何使用 ChoiceChip 小部件为所选芯片的文本设置特定颜色？“selectedColor”仅设置所选芯片的背景颜色。

Answer 1

使用labelStyle属性设置 的文本颜色ChoiceChip。

ChoiceChip(
  label: Text('Hi'),
  selected: isSelected,
  labelStyle: TextStyle(
    color: isSelected ? Colors.blue : Colors.red,
  ),
),

Answer 2

以防万一有人将来遇到这种情况并想要使用主题来设置所选标签文本颜色：

ThemeData example = ThemeData(
  chipTheme: ChipThemeData(
      showCheckmark: false,
      backgroundColor: Colors.transparent,
      selectedColor: Colors.blue,
      labelStyle: const TextStyle(
          color: ChipLabelColor()
      )
  ),
);

class ChipLabelColor extends Color
    implements MaterialStateColor {
  const ChipLabelColor() : super(_default);

  static const int _default = 0xFF000000;

  @override
  Color resolve(Set<MaterialState> states) {
    if (states.contains(MaterialState.selected)) {
      return Colors.white; // Selected text color
    }
    return Colors.black; // normal text color
  }
}

此示例创建一个具有黑色文本（和透明背景）的芯片，当选择该芯片（具有蓝色背景）时，该芯片会变为白色

此处记录了 MaterialStateColor 类，并提供了一个类似于上述代码的示例。虽然整个标签不能使用材质状态属性，但我发现标签颜色接受材质状态类来解析不同的状态。