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

Question

如何创建类似的东西？:

演示：

我知道 flutter 有

CupertinoSegmentedControl()

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

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 或 children 中提供的小部件。用于select 多个相互排斥的选项之间。当分段控件中的一个选项被 selected 时，分段控件中的其他选项将不再被 selected。

可以选择使用自定义颜色创建分段控件。 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(),
      ),
    );
  }

}

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

Create a Segmented Control Widget with slider button - Flutter

controls

button

segment

flutter

flutter-layout