项目的设计图出现分段选项卡UI，如图：
截屏2023-06-30 17.27.54.png
本人是一名iOS开发工程师，看见图第一瞬间就想起来UISegmentedControl这个控件，用法其实也比较简单，但是当前项目是用Flutter写的跨平台项目，研究了一下，Flutter里面也有相应的Widget，记录一下使用过程😄
1.CupertinoSegmentedControl
这个是iOS版的segmented控件，基本是差不多的，使用方法也比较简单:
final Map<T, Widget> children：其中一个children是一个字典，和不是常规的数组形式，以key、value对应，key可以任意，value为Widget
Obx(() {
return CupertinoSegmentedControl(
//子标签
children: const {
0: Text("价格"),
1: Text("成交量"),
2: Text("成交额"),
},
//当前选中的索引
groupValue: logic.segmentIndex.value,
//点击回调
onValueChanged: (int index) {
print("当前选中 $index");
logic.segmentIndex.value = index;
},
//选中的背景颜色
selectedColor: ColorsUtil.hexToColor("#52596D"),
//未选中的背景颜色
unselectedColor: Colors.white,
//边框颜色
borderColor: ColorsUtil.hexToColor("#52596D"),
//按下的颜色
pressedColor: ColorsUtil.hexToColor("#52596D").withOpacity(0.4),
);
})
我这里是使用的Getx来处理的，更改选中，也可以 setState((){})也一样的，看个人习惯就好。
效果：
截屏2023-07-03 10.25.48.png
可以先定义一个类型，来具体区分点击和不同需求处理，当然，也可以直接用int来代替，都可以的，都比较容易区分，我这里定义了一个type，仿照的官方文档形式
enum SegmentType {
price, //价格
turnover, //成交量
volume, //成交额
marketValue, //市值
}
这个Widget有固定的高度，过高，不太符合我项目具体需求，我就尝试从外部固定了widget的高度，也基本能实现，具体情况仅供参考哈 😋
Obx(() =>
Padding(
padding:
const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
child: SizedBox(
height: 35,
child: SegmentedButton<SegmentType>(
segments: const [
ButtonSegment<SegmentType>(
value: SegmentType.price,
label: SizedBox(height: 35, child: Text("价格")),
//icon: Icon(Icons.add),
enabled: true,
),
ButtonSegment<SegmentType>(
value: SegmentType.turnover,
label: SizedBox(height: 35, child: Text("成交量")),
// icon: Icon(Icons.safety_check),
),
ButtonSegment<SegmentType>(
value: SegmentType.volume,
label: SizedBox(height: 35, child: Text("成交额")),
// icon: Icon(Icons.safety_check),
),
],
style: ButtonStyle(
side: MaterialStateProperty.all(
const BorderSide(color: Colors.black, width: 1)),
shape: MaterialStateProperty.all(
const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(3)),
)),
textStyle: MaterialStateProperty.all(
const TextStyle(fontSize: 13)),
backgroundColor: MaterialStateProperty.resolveWith<
Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.selected)) {
return ColorsUtil.hexToColor("#52596D");
}
return Colors.white;
},
),
),
showSelectedIcon: false,
// 是否允许多选
// multiSelectionEnabled: false,
// 可选空
// emptySelectionAllowed: false,
selected: {logic.selectSegmentType.value},
onSelectionChanged: (Set<SegmentType> segmentType) {
print("点击的是：$segmentType");
logic.selectSegmentType.value = segmentType.first;
},
),
),
)),
一些自定义样式，都基本上用ButtonStyle来处理实现的，可根据自己设计图UI来修改调整哈~
我这里是使用的Getx来处理的，更改选中，也可以 setState((){})也一样的，看个人习惯就好。
效果：
截屏2023-07-03 10.45.51.png
长风破浪会有时，直挂云帆济沧海~一起加油！！！😄
