如何在Flutter中通过ThemeData设置SwitchListTile的非激活轨道与滑块颜色

你没遗漏配置，SwitchThemeData确实没有单独的inactiveThumbColor/inactiveTrackColor属性，它是通过MaterialStateProperty来根据组件状态动态切换颜色的——单个SwitchListTile的inactive属性只是封装好的快捷写法，主题层面需要用状态解析的方式实现统一配置。

具体实现方式 #

用MaterialStateProperty.resolveWith方法，根据组件的选中/未选中状态返回对应颜色：

ThemeData(
  switchTheme: SwitchThemeData(
    thumbColor: MaterialStateProperty.resolveWith<Color>((states) {
      // 未选中（非激活）状态
      if (!states.contains(MaterialState.selected)) {
        return AppColors.lightGrey;
      }
      // 选中（激活）状态
      return AppColors.tealPrimary;
    }),
    trackColor: MaterialStateProperty.resolveWith<Color>((states) {
      if (!states.contains(MaterialState.selected)) {
        return Colors.grey;
      }
      return AppColors.tealDarkest;
    }),
    overlayColor: MaterialStateProperty.all<Color>(AppColors.lightGrey),
  ),
);

补充：区分禁用状态的非激活颜色 #

如果需要单独设置禁用状态下的非激活颜色，可以加上MaterialState.disabled的判断：

thumbColor: MaterialStateProperty.resolveWith<Color>((states) {
  if (states.contains(MaterialState.disabled)) {
    return AppColors.disabledGrey; // 禁用时的拇指颜色
  }
  if (!states.contains(MaterialState.selected)) {
    return AppColors.lightGrey; // 未选中但启用的拇指颜色
  }
  return AppColors.tealPrimary; // 选中时的拇指颜色
}),

这样就能在主题中统一控制所有SwitchListTile的激活/非激活、启用/禁用状态的颜色了。

内容的提问来源于stack exchange，提问作者Kdon