https://github.com/NXliujunjie/ljj_tabbar_selector

導(dǎo)航選擇器

page.png

導(dǎo)入:

  ljj_tabbar_selector:
    git:
      url: https://github.com/NXliujunjie/ljj_tabbar.git
    

使用示例:

 class _MyHomePageState extends State<MyHomePage> {
  List<Tab> listOne = List();
  List<Widget> listTwo = List();

  @override
  void initState() {
    super.initState();

    for (var i = 0; i < 20; i++) {
      listOne.add(Tab(text: "第$i個(gè)"));
      listTwo.add(Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.white,
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
  
    return LjjTabbarSelector.tabbarWidget(
          titleText: Text("導(dǎo)航選擇器"),
          tabBarTabsList: listOne,
          tabBarViewList: listTwo,
          selectItem: (index) {
            print(index);
          });
  }
}

自定義屬性

    ///APPBar 背景色
    Color backgroundColor = Colors.blue,

    ///AppBar高度
    double itemSizeFont = 64,

    ///tabbar顏色
    Color tabbarColor = Colors.white,
 
    ///默認(rèn)選中第幾個(gè)
    int initialIndex = 0,

    ///指示器顏色
    Color indicatorColor = Colors.blue,

    ///指示器高度
    double indicatorWeight = 2,

    ///指示器寬度, 值為tab或lable
    TabBarIndicatorSize indicatorSize = TabBarIndicatorSize.tab,

    ///tabbar 選擇條字體的顏色 選中狀態(tài)
    Color itemSelectorColor = Colors.blue,

    ///tabbar 選擇條字體的顏色 未選中狀態(tài)
    Color itemNormalColor = Colors.grey,
    ```