如何使用ChoiceChip小部件为所选芯片的文本设置特定颜色?“selectedColor”仅设置所选芯片的背景颜色。
dsf9zpds1#
使用labelStyle属性设置ChoiceChip的文本颜色。
labelStyle
ChoiceChip
ChoiceChip( label: Text('Hi'), selected: isSelected, labelStyle: TextStyle( color: isSelected ? Colors.blue : Colors.red, ), ),
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的示例类似于上面的代码。虽然整个标签不能使用材料状态属性,但我发现标签颜色接受材料状态类来解决不同的状态。
2条答案
按热度按时间dsf9zpds1#
使用
labelStyle
属性设置ChoiceChip
的文本颜色。ukdjmx9f2#
以防将来有人遇到这种情况,并希望使用主题来设置所选标签文本颜色:
这个例子创建了一个筹码,它有黑色的文本(和透明的背景),当筹码被选中时(有蓝色的背景),它会变成白色
MaterialStateColor class is documented here的示例类似于上面的代码。虽然整个标签不能使用材料状态属性,但我发现标签颜色接受材料状态类来解决不同的状态。