Flutter中如何在Cupertino Switch内部添加文本？

原生的CupertinoSwitch组件本身不支持直接在内部嵌入文本，你可以通过自定义组件来实现目标效果，以下是一个可复用的实现示例：

import 'package:flutter/cupertino.dart';

class TextCupertinoSwitch extends StatefulWidget {
  final bool value;
  final ValueChanged<bool> onChanged;
  final String onText;
  final String offText;

  const TextCupertinoSwitch({
    super.key,
    required this.value,
    required this.onChanged,
    this.onText = 'ON',
    this.offText = 'OFF',
  });

  @override
  State<TextCupertinoSwitch> createState() => _TextCupertinoSwitchState();
}

class _TextCupertinoSwitchState extends State<TextCupertinoSwitch> {
  late bool _switchValue;

  @override
  void initState() {
    super.initState();
    _switchValue = widget.value;
  }

  @override
  void didUpdateWidget(covariant TextCupertinoSwitch oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.value != widget.value) {
      _switchValue = widget.value;
    }
  }

  void _toggleSwitch() {
    setState(() => _switchValue = !_switchValue);
    widget.onChanged(_switchValue);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _toggleSwitch,
      child: Container(
        width: 62,
        height: 32,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(16),
          color: _switchValue ? CupertinoColors.activeBlue : CupertinoColors.systemGrey4,
        ),
        child: Stack(
          alignment: Alignment.center,
          children: [
            // 开关状态文本
            Text(
              _switchValue ? widget.onText : widget.offText,
              style: TextStyle(
                color: _switchValue ? CupertinoColors.white : CupertinoColors.label,
                fontSize: 12,
                fontWeight: FontWeight.w600,
              ),
            ),
            // 滑动按钮
            AnimatedPositioned(
              duration: const Duration(milliseconds: 200),
              left: _switchValue ? 34 : 2,
              child: Container(
                width: 28,
                height: 28,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(14),
                  color: CupertinoColors.white,
                  boxShadow: [
                    BoxShadow(
                      color: CupertinoColors.systemGrey.withOpacity(0.2),
                      blurRadius: 2,
                      spreadRadius: 0.5,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 使用示例
class DemoPage extends StatelessWidget {
  const DemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(middle: Text("带文本的Cupertino开关")),
      child: Center(
        child: TextCupertinoSwitch(
          value: true,
          onChanged: (val) => print("开关状态：${val ? '开启' : '关闭'}"),
          onText: "开",
          offText: "关",
        ),
      ),
    );
  }
}

这个组件通过Container模拟开关背景，用Stack叠加状态文本和滑动按钮，AnimatedPositioned实现滑块的平滑切换动画。你可以根据需求调整尺寸、颜色、文本字体等样式参数。

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