Flutter中如何为SizedBox内的CupertinoSegmentedControl设置圆角

需要给嵌套在SizedBox内的CupertinoSegmentedControl设置圆角，该SizedBox又位于Container的Column中。尝试将CupertinoSegmentedControl和SizedBox包裹在带有BoxDecoration的Container中，但未生效。

CustomSegmentControl 代码

Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SizedBox(
            height: 36,
            child: CupertinoSegmentedControl<int>(
              children: const {
                0: Padding(padding: EdgeInsets.symmetric(horizontal: 12), child: Text('Segment 1',)),
                1: Padding(padding: EdgeInsets.symmetric(horizontal: 12), child: Text('Segment 1',)),
                2: Padding(padding:EdgeInsets.symmetric(horizontal: 12), child: Text('Segment 1',)),
              },
              onValueChanged: (int value) {
                setState(() {
                  selectedSegment = value;
                });
              },
              groupValue: selectedSegment,
              selectedColor: AppColors.primaryColor,
              unselectedColor: AppColors.backgroundShadingColor,
              borderColor: Colors.transparent,
            ),
          ),
        ],
      ),
    );
  }

组件使用代码

Widget build(BuildContext context) {
    return Container(
        padding: const EdgeInsets.symmetric(horizontal: 25),
        color: Colors.white,
        child: Column(children: [
          const SizedBox(
            height: 100,
          ),
          const Center(
            child: CustomSegmentControl(),
          ),
          SizedBox(
              height: 250,
              child: LineChartSample(intensityValues: generateSampleData()))
        ]));
  }

以下是三种可行的实现方式，按需选择：

方式1：直接使用组件自带的borderRadius参数 #

这是最简便的方法，CupertinoSegmentedControl本身提供了圆角配置参数，直接添加即可：

Widget build(BuildContext context) {
  return Container(
    padding: const EdgeInsets.all(16.0),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SizedBox(
          height: 36,
          child: CupertinoSegmentedControl<int>(
            children: const {
              0: Padding(padding: EdgeInsets.symmetric(horizontal: 12), child: Text('Segment 1')),
              1: Padding(padding: EdgeInsets.symmetric(horizontal: 12), child: Text('Segment 2')),
              2: Padding(padding: EdgeInsets.symmetric(horizontal: 12), child: Text('Segment 3')),
            },
            onValueChanged: (int value) {
              setState(() {
                selectedSegment = value;
              });
            },
            groupValue: selectedSegment,
            selectedColor: AppColors.primaryColor,
            unselectedColor: AppColors.backgroundShadingColor,
            borderColor: Colors.transparent,
            // 设置圆角大小
            borderRadius: BorderRadius.circular(8.0), 
          ),
        ),
      ],
    ),
  );
}

方式2：用ClipRRect包裹实现裁剪 #

如果需要更复杂的裁剪逻辑，或者希望保持外层容器的独立性，可以用ClipRRect包裹分段控件：

Widget build(BuildContext context) {
  return Container(
    padding: const EdgeInsets.all(16.0),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SizedBox(
          height: 36,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(8.0),
            child: CupertinoSegmentedControl<int>(
              children: const {
                0: Padding(padding: EdgeInsets.symmetric(horizontal: 12), child: Text('Segment 1')),
                1: Padding(padding: EdgeInsets.symmetric(horizontal: 12), child: Text('Segment 2')),
                2: Padding(padding: EdgeInsets.symmetric(horizontal: 12), child: Text('Segment 3')),
              },
              onValueChanged: (int value) {
                setState(() {
                  selectedSegment = value;
                });
              },
              groupValue: selectedSegment,
              selectedColor: AppColors.primaryColor,
              unselectedColor: AppColors.backgroundShadingColor,
              borderColor: Colors.transparent,
            ),
          ),
        ),
      ],
    ),
  );
}

方式3：为外层Container添加裁剪行为 #

如果坚持使用Container加BoxDecoration的方式，必须开启clipBehavior属性才能让圆角生效：

Widget build(BuildContext context) {
  return Container(
    padding: const EdgeInsets.all(16.0),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SizedBox(
          height: 36,
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8.0),
            ),
            // 开启裁剪，否则圆角不会作用到子组件
            clipBehavior: Clip.hardEdge, 
            child: CupertinoSegmentedControl<int>(
              children: const {
                0: Padding(padding: EdgeInsets.symmetric(horizontal: 12), child: Text('Segment 1')),
                1: Padding(padding: EdgeInsets.symmetric(horizontal: 12), child: Text('Segment 2')),
                2: Padding(padding: EdgeInsets.symmetric(horizontal: 12), child: Text('Segment 3')),
              },
              onValueChanged: (int value) {
                setState(() {
                  selectedSegment = value;
                });
              },
              groupValue: selectedSegment,
              selectedColor: AppColors.primaryColor,
              unselectedColor: AppColors.backgroundShadingColor,
              borderColor: Colors.transparent,
            ),
          ),
        ),
      ],
    ),
  );
}

原方法失效原因 #

之前用Container加BoxDecoration没效果，是因为默认情况下Container的圆角不会自动裁剪内部子组件，必须显式设置clipBehavior属性，才能让圆角样式作用到子控件上。

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