如何控制 SegmentedButton 小部件的选定和未选定背景颜色

Question

我正在尝试新的SegmentedButton小部件：

SegmentedButton<int>(
  onSelectionChanged: (i) {},
  showSelectedIcon: false,
  style: ButtonStyle(
    backgroundColor: MaterialStatePropertyAll(Theme.of(context).primaryColor),
    iconColor: MaterialStateProperty.all(Colors.white),
  ),
  segments: const <ButtonSegment<int>>[
    ButtonSegment<int>(
      value: 12,
      icon: Icon(FlutterRemix.thumb_up_fill),
      enabled: true,
    ),
    ButtonSegment<int>(
      value: 20,
      icon: Icon(FlutterRemix.thumb_down_fill),
    ),
  ],
  selected: {12},
),

此代码显示了两个分段按钮，如下所示：

当我设置时，如何自定义选定和未选定按钮的颜色：

backgroundColor: MaterialStatePropertyAll(Theme.of(context).primaryColor),

它确实为选定的和选定的设置背景颜色。

谢谢你！

Answer 1

您可以使用材质状态来控制它：

backgroundColor: MaterialStateProperty.resolveWith<Color>(
   (Set<MaterialState> states) {
      if (states.contains(MaterialState.selected)){
        return Colors.green;
      }
      return Colors.red;
    },
 ),