如何创建与此类似的内容?:
演示:

我知道flutter有
CupertinoSegmentedControl()但这创造了一些类似于标签的东西,没有什么能像里面有按钮的开关那样滑动。
发布于 2020-03-02 07:16:21
我找到的最好的东西是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。
发布于 2020-10-08 19:32:32
我建议使用CupertinoSlidingSegmentedControl Widget来获得上面这样的输出
CupertinoSlidingSegmentedControl小工具是iOS13风格的分段控件。它将以水平列表的形式显示children的Map列表中提供的小部件。用于在多个互斥选项之间进行选择。当选择分段控件中的一个选项时,分段控件中的其他选项停止被选择。
分段控件可以任选地用自定义颜色创建。可以使用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(),
),
);
}
}

https://stackoverflow.com/questions/58252223
复制相似问题