如何在Flutter中实现自定义开关？非激活态CupertinoSwitch实现求助

方法1：通过原生参数自定义禁用状态样式 #

CupertinoSwitch的非激活状态本质就是禁用状态，当onChanged设为null时，开关会自动进入无法交互的禁用模式。你可以结合状态变量，为激活/非激活状态分别设置不同的颜色属性，实现自定义样式：

bool _isSwitchEnabled = true;
bool _switchValue = false;

@override
Widget build(BuildContext context) {
  return CupertinoSwitch(
    value: _switchValue,
    // onChanged为null时触发非激活状态
    onChanged: _isSwitchEnabled ? (newValue) {
      setState(() => _switchValue = newValue);
    } : null,
    // 激活状态颜色
    activeColor: _isSwitchEnabled ? CupertinoColors.activeBlue : CupertinoColors.systemGray3,
    // 轨道颜色（未激活时的背景）
    trackColor: _isSwitchEnabled 
        ? CupertinoColors.lightBackgroundGray 
        : CupertinoColors.systemGray4.withOpacity(0.5),
    // 滑块颜色
    thumbColor: _isSwitchEnabled ? CupertinoColors.white : CupertinoColors.systemGray2,
  );
}

方法2：添加自定义遮罩增强非激活视觉效果 #

如果需要更明显的非激活标识（比如添加半透明遮罩），可以用Stack包装CupertinoSwitch，在非激活状态时叠加一层遮罩：

bool _isSwitchEnabled = true;
bool _switchValue = false;

@override
Widget build(BuildContext context) {
  return Stack(
    alignment: Alignment.center,
    children: [
      CupertinoSwitch(
        value: _switchValue,
        onChanged: _isSwitchEnabled ? (newValue) {
          setState(() => _switchValue = newValue);
        } : null,
        activeColor: CupertinoColors.activeBlue,
        trackColor: CupertinoColors.lightBackgroundGray,
      ),
      // 非激活时显示半透明遮罩
      if (!_isSwitchEnabled)
        Container(
          width: 51, // CupertinoSwitch默认宽度
          height: 31, // CupertinoSwitch默认高度
          decoration: BoxDecoration(
            color: CupertinoColors.black.withOpacity(0.2),
            borderRadius: BorderRadius.circular(16),
          ),
        ),
    ],
  );
}

关键提示 #

• 必须将onChanged设为null才能让CupertinoSwitch真正进入非激活（禁用）状态，此时开关会自动拦截用户交互。
• 如果你的设计和原生CupertinoSwitch差异极大，建议直接自定义Switch组件；若只是调整颜色、透明度，上述方法完全满足需求。

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