Flutter CupertinoSwitch如何修改轨道背景为白色、滑块为橙色？

你可以通过组件自带的拆分属性分别配置不同区域的颜色，避免activeColor全局影响多区域样式的问题，实现滑块橙色、轨道白色的效果，具体操作如下：

核心对应属性 #

• thumbColor：控制开关滑块的颜色，直接设置为目标橙色即可
• activeTrackColor：控制开关开启状态下的轨道背景色，设置为白色
• trackColor：控制开关关闭状态下的轨道背景色，可按需设置为白色或其他颜色
• trackOutlineColor（可选）：如果需要单独调整轨道边框颜色，可以通过该属性拆分配置开/关状态的边框，不会被其他属性连带修改

可直接运行的示例代码 #

bool _switchState = true;

@override
Widget build(BuildContext context) {
  return CupertinoSwitch(
    value: _switchState,
    onChanged: (newValue) {
      setState(() {
        _switchState = newValue;
      });
    },
    // 滑块设置为橙色
    thumbColor: Colors.orange,
    // 开启状态轨道设置为白色
    activeTrackColor: Colors.white,
    // 关闭状态轨道也可按需设为白色
    trackColor: Colors.white,
    // 可选：单独配置边框颜色，和滑块配色呼应
    trackOutlineColor: WidgetStateProperty.resolveWith((states) {
      // 开启状态边框设为橙色
      if (states.contains(WidgetState.selected)) {
        return Colors.orange;
      }
      // 关闭状态边框可按需调整为灰色或其他颜色
      return Colors.grey.shade300;
    }),
  );
}

如果你使用的是3.10以下的低版本Flutter，trackOutlineColor属性还未上线，可以用CupertinoTheme包裹组件覆写局部主题实现边框自定义：

CupertinoTheme(
  data: const CupertinoThemeData(
    primaryColor: Colors.orange,
  ),
  child: CupertinoSwitch(
    value: _switchState,
    onChanged: (newValue) => setState(() => _switchState = newValue),
    thumbColor: Colors.orange,
    activeTrackColor: Colors.white,
    trackColor: Colors.white,
  ),
)

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