使用滑块按钮创建分段控件小部件-Flutter

Question

如何创建与此类似的内容？ ：

Demo

我知道扑有

CupertinoSegmentedControl()

但这会创建类似于选项卡的东西，没有滑动像带有按钮的Switch之类的东西。

Answer 1

我发现最好的是CupertinoSlidingSegmentedControl()：

class _ViewState extends State<View> {
  int segmentedControlGroupValue = 0;
  final Map<int, Widget> myTabs = const <int, Widget>{
    0: Text("Item 1"),
    1: Text("Item 2")
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CupertinoSlidingSegmentedControl(
          groupValue: segmentedControlGroupValue,
          children: myTabs,
          onValueChanged: (i) {
            setState(() {
              segmentedControlGroupValue = i;
            });
          }),
    );
  }
}

希望这会有所帮助。请参阅文档here。

Answer 2

我建议与CupertinoSlidingSegmentedControl Widget一起获得上面的输出

CupertinoSlidingSegmentedControl窗口小部件是iOS 13样式的分段控件。它将在水平列表中显示Map的{​​{1}}中提供的小部件。用于在多个互斥选项之间进行选择。当在分段控件中选择一个选项时，在分段控件中的其他选项将不再被选择。

可以选择使用自定义颜色创建分段控件。 children，thumbColor参数可用于覆盖分段控件的默认颜色。

创建精美的分段控件，请遵循以下代码

backgroundColor