Flutter 分段控制器 HBSegmentedControl

起因

最近在用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);
    });
  }
複製程式碼

整合

PUB 地址

pub.flutter-io.cn/packages/hb…

在pubspec.yaml檔案中新增這段程式碼

dependencies:
  hbsegmented_control: ^0.0.1
複製程式碼