如何修改Flutter CupertinoSlidingSegmentedControl边框半径实现半圆样式

默认CupertinoSlidingSegmentedControl没有公开修改形状的配置参数，你可以通过以下两种方案实现半圆样式效果：

方案1：使用ClipRRect包裹实现（改动最小，适配性强） #

直接在原生控件外层套一层裁剪组件，将边角裁剪为半圆即可，仅需修改你代码中build方法的返回部分，修改后完整代码如下：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

class SlideButton extends StatefulWidget {
  final Function(int) onChanged;
  const SlideButton({super.key, required this.onChanged});

  @override
  State<StatefulWidget> createState() => _SlideButtonState();
}

class _SlideButtonState extends State<SlideButton> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    final Map<int, Widget> myTabs = <int, Widget>{
      0: Text(
        'Discovery',
        style: TextStyle(
          fontFamily: 'AppleSDGothicNeo',
          color: _index == 0 ? Colors.white : Colors.black,
        ),
      ),
      1: Text(
        'My Page',
        style: TextStyle(
          fontFamily: 'AppleSDGothicNeo',
          color: _index == 1 ? Colors.white : Colors.black,
        ),
      ),
    };

    return ClipRRect(
      // 圆角半径设为控件高度的一半即可得到完全半圆的边角效果
      borderRadius: BorderRadius.circular(20),
      child: CupertinoSlidingSegmentedControl(
        // 调整内边距避免文字太贴近边缘
        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
        // 可自定义背景色
        backgroundColor: Colors.grey.shade200,
        groupValue: _index,
        children: myTabs,
        thumbColor: const Color(0xFF254690),
        onValueChanged: (i) {
          // 增加空判断适配空安全
          if (i != null) {
            setState(() {
              _index = i;
              widget.onChanged(i);
            });
          }
        },
      ),
    );
  }
}

方案2：自定义组件源码（适合需要修改滑块形状的场景） #

如果除了外边框，还需要把内部滑动的滑块也改成完全半圆的样式，可以拷贝Flutter官方CupertinoSlidingSegmentedControl的源码到你的项目中，修改源码中_thumbRadius的常量值，将默认的8.0修改为你需要的半径（和控件高度一半一致即可）。

优化提示 #

• 如果你的控件高度是动态的，可以先通过LayoutBuilder获取控件高度后再动态计算圆角半径
• 可以通过调整padding参数适配不同尺寸的文字内容

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