Flutter 分段控制器 HBSegmentedControl

Z时代
2024-01-10
分类：技术分享

起因

最近在用flutter 开发一个web页面，然后遇到界面需要用到iOS中的UISegmentedControl

就像这样

Flutter中有CupertinoSegmentedControl，于是就直接用了。

我先在Flutter移动端开发好了界面，一切显示正常，就像这样

没啥问题。

但是当我把组件迁移到web端时，出了问题。

估计短时间内也得不到解决，于是决定自己造个轮子。

先展示一下成果

优化

原先CupertinoSegmentedControl代码冗余，数据处理相对麻烦。需要传入一个Map<String, Widget>类型的参数作为数据源。

Widget segmentControll(
List titles, String groupValue, Function onValueChange) {
TextStyle style = TextStyle(fontSize: 14);
Color grey = Color.fromARGB(255, 101, 102, 103);
List<String> keys = ["a", "b", "c", "d"];
Map<String, Widget> children = {};
for (var i = 0; i < titles.length; i++) {
String str = keys[i];
Widget w = Container(
alignment: Alignment.center,
width: 56.0,
height: 32,
child: Text(
titles[i],
style: style,
));
// Map item = {str:w};
// children.add(item);
children[str] = w;
}
return CupertinoSegmentedControl(
onValueChanged: onValueChange,
pressedColor: Colors.white,
borderColor: grey,
selectedColor: grey,
groupValue: groupValue,
children: children);
}

我自己的轮子，只需要一个List<String>即可，代码量减少了许多

Widget segmentControll(List titles, String groupValue, Function onValueChange) {
Color grey = Color.fromARGB(255, 101, 102, 103);
return HBSegmentedControl(titleList: titles,selectedColor: grey,onTap: (index){
print(index);
});
}