Flutter：如何去除CupertinoSwitch内置padding并自定义尺寸？

因为CupertinoSwitch的内置4px padding是源码硬编码实现的，无法直接通过组件参数修改，你可以通过以下两种方式实现需求：

1. 自定义无Padding的Cupertino风格开关组件 #

直接参考Flutter原生CupertinoSwitch的逻辑，移除其中的padding处理，同时将轨道尺寸设置为你需要的40.32×24px。核心实现代码如下：

class CustomCupertinoSwitch extends StatefulWidget {
  const CustomCupertinoSwitch({
    super.key,
    required this.value,
    required this.onChanged,
    this.activeColor = CupertinoColors.activeGreen,
    this.trackColor = CupertinoColors.secondarySystemFill,
  });

  final bool value;
  final ValueChanged<bool>? onChanged;
  final Color activeColor;
  final Color trackColor;

  @override
  State<CustomCupertinoSwitch> createState() => _CustomCupertinoSwitchState();
}

class _CustomCupertinoSwitchState extends State<CustomCupertinoSwitch> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _positionAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 200),
      vsync: this,
    );
    _positionAnimation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    );
    _controller.value = widget.value ? 1.0 : 0.0;
  }

  @override
  void didUpdateWidget(covariant CustomCupertinoSwitch oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.value != oldWidget.value) {
      widget.value ? _controller.forward() : _controller.reverse();
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  // 自定义目标尺寸
  static const double _kTrackWidth = 40.32;
  static const double _kTrackHeight = 24.0;
  static const double _kThumbDiameter = 20.0;

  @override
  Widget build(BuildContext context) {
    final trackColor = widget.onChanged == null
        ? CupertinoColors.quaternarySystemFill
        : widget.value
            ? widget.activeColor.withOpacity(0.5)
            : widget.trackColor;

    return GestureDetector(
      onTap: widget.onChanged == null ? null : () => widget.onChanged!(!widget.value),
      behavior: HitTestBehavior.opaque,
      child: SizedBox(
        width: _kTrackWidth,
        height: _kTrackHeight,
        child: Stack(
          alignment: Alignment.centerLeft,
          children: [
            // 开关轨道
            Container(
              width: _kTrackWidth,
              height: _kTrackHeight,
              decoration: BoxDecoration(
                color: trackColor,
                borderRadius: BorderRadius.circular(_kTrackHeight / 2),
              ),
            ),
            // 可滑动滑块
            AnimatedBuilder(
              animation: _positionAnimation,
              builder: (context, child) {
                return Transform.translate(
                  offset: Offset(
                    _positionAnimation.value * (_kTrackWidth - _kThumbDiameter),
                    0,
                  ),
                  child: Container(
                    width: _kThumbDiameter,
                    height: _kThumbDiameter,
                    decoration: BoxDecoration(
                      color: widget.onChanged == null
                          ? CupertinoColors.systemGrey3
                          : widget.value
                              ? widget.activeColor
                              : CupertinoColors.white,
                      borderRadius: BorderRadius.circular(_kThumbDiameter / 2),
                      boxShadow: [
                        BoxShadow(
                          color: CupertinoColors.black.withOpacity(0.1),
                          blurRadius: 2,
                          spreadRadius: 0.5,
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

这个自定义组件完全移除了原生组件的内置padding，同时保留了Cupertino开关的交互逻辑和视觉风格，尺寸完全符合你的需求。

2. 修改原生CupertinoSwitch源码（不推荐） #

如果你只是临时测试需求，可以直接修改Flutter SDK中的cupertino_switch.dart文件：

• 将_kSwitchSize修改为Size(40.32, 24.0)
• 同步将_kTrackWidth和_kTrackHeight也改为40.32和24.0（原生组件的padding是通过(_kSwitchSize.width - _kTrackWidth)/2计算得到的，两者尺寸一致时padding就会消失）

这种方式的缺点是修改会在Flutter版本升级后丢失，仅适合临时场景。

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