Flutter ChoiceChip selected文本颜色

jgwigjjp  于 2023-06-07  发布在  Flutter
关注(0)|答案(2)|浏览(212)

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

dsf9zpds

dsf9zpds1#

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

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

ukdjmx9f2#

以防将来有人遇到这种情况,并希望使用主题来设置所选标签文本颜色:

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 class is documented here的示例类似于上面的代码。虽然整个标签不能使用材料状态属性,但我发现标签颜色接受材料状态类来解决不同的状态。

相关问题