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

【问题标题】：Create a Segmented Control Widget with slider button - Flutter使用滑块按钮创建分段控件小部件 - Flutter
【发布时间】：2020-02-03 17:25:45
【问题描述】：

我如何创建类似的东西？：

演示：

我知道颤振有

CupertinoSegmentedControl()

但这会创建类似于选项卡的东西，不会像内部带有按钮的 Switch 那样滑动。

【问题讨论】：

标签： button flutter controls flutter-layout

【解决方案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。

【讨论】：

太好了，这里是关于实现的票和显示行为的图像。 github.com/flutter/flutter/pull/42775

【解决方案2】：

我建议使用CupertinoSlidingSegmentedControl Widget 来获得如上所示的输出

CupertinoSlidingSegmentedControl 小部件是 iOS 13 样式的分段控件。它将在水平列表中显示Map 或children 中提供的小部件。用于在多个互斥选项之间进行选择。选择分段控件中的一个选项时，分段控制中的其他选项可选择。

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

创建优雅的分段控件，遵循此代码

import 'package:flutter/cupertino.dart';

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

class _SegmentedControlState extends State<SegmentedControl> {

  int segmentedControlValue = 0;

  Widget segmentedControl() {
    return Container(
      width: 300,
      child: CupertinoSlidingSegmentedControl(
          groupValue: segmentedControlValue,
          backgroundColor: Colors.blue.shade200,
          children: const <int, Widget>{
            0: Text('One'),
            1: Text('Two'),
            2: Text('Three')
          },
          onValueChanged: (value) {
            setState(() {
              segmentedControlValue = value;
            });
          }
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Segmented Control")),
      body: Padding(
        padding: const EdgeInsets.only(top: 30.0, left: 50),
        child: segmentedControl(),
      ),
    );
  }

}

【讨论】：