Flutter 的 CupertinoSlidingSegmentedControl 的设计问题？

Question

第一张图片是我想要制作的，但是使用 flutter CupertinoSlidingSegmentedControl 不允许添加边框半径。第二张图片是我目前所做的。

我想为我的 CupertinoSlidingSegmentedControl 选项添加边框半径。目标是让它看起来像标签但具有滑动效果。我试过用 Flutter Tabbar 制作它，但 tabbar 没有任何滑动效果。现在 CupertinoSlidingSegmentedControl 没有边框属性。我在这里添加我的代码。

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

       void main() {
       runApp(MyApp());
      }

       class MyApp extends StatelessWidget {
       @override
       Widget build(BuildContext context) {
       return MaterialApp(home: SegmentedControl());
       }
       }

     class SegmentedControl extends StatefulWidget {
      @override
        _SegmentedControlState createState() => _SegmentedControlState();
       }

       class _SegmentedControlState extends State<SegmentedControl> {
         int segmentedControlGroupValue = 0;


      final Map<int, Widget> myTabs = const <int, Widget>{
        0: Text( "Services",style: TextStyle(
        color: Colors.tealAccent,
         fontWeight: FontWeight.normal,fontSize: 20),),
           1: Text( "E-commerce",
          style: TextStyle(color: 
             Colors.tealAccent,
             fontWeight: FontWeight.normal,fontSize: 20,),),
         };

      @override
      Widget build(BuildContext context) {
      return Scaffold(
      endDrawerEnableOpenDragGesture: false, // This way it will not open
      drawer: Drawer(),
      appBar: AppBar(
      title: Container(
      alignment: Alignment.center,
      padding: EdgeInsets.all(5),
      child: CupertinoSlidingSegmentedControl(
        thumbColor: Colors.teal,
        padding: EdgeInsets.only(
          left: 8,
          right: 8,
          top: 5,
          bottom: 5,
        ),
        backgroundColor: Colors.white,
        children: myTabs,
        groupValue: segmentedControlGroupValue,
        onValueChanged: (i) {
          setState(() {
            segmentedControlGroupValue = i;
          });
         // segmentedControlGroupValue == 0;
        },
      ),
    ),
    ),
);

} }

Answer 1

试试这个 custom_sliding_segmented_control:

CustomSlidingSegmentedControl<int>(
              children: {
                0: Text('Services'),
                1: Text('E-Commerce'),
              },
              duration: Duration(milliseconds: 200),
              radius: 30.0,
              onValueChanged: (index) {
                print(index);
              },
            ),

Flutter 的 CupertinoSlidingSegmentedControl 的设计问题？

Designing issue with Flutter's CupertinoSlidingSegmentedControl?

segmentedcontrol

flutter

flutter-layout