直播系统代码,flutter手写一个底部导航栏

发布时间 2023-11-01 14:12:31作者: 云豹科技-苏凌霄

直播系统代码,flutter手写一个底部导航栏

使用方式如下:

 


@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      bottomNavigationBar: XXNaviBar(
        onDestinationSelected: (value) => {
          developer.log("click tab $value"),
          if (currentPageIndex != value)
            {
              setState(() {
                currentPageIndex = value;
              })
            }
        },
        icons: [
          XXNaviIcon(
            normalImage: "assets/images/tabbar/home.png",
            selectedImage: "assets/images/tabbar/home-selected.png",
            title: "首页",
          ),
          XXNaviIcon(
            normalImage: "assets/images/tabbar/data.png",
            selectedImage: "assets/images/tabbar/data-selected.png",
            title: "数据",
          ),
          XXNaviIcon(
            normalImage: "assets/images/tabbar/mine.png",
            selectedImage: "assets/images/tabbar/mine-selected.png",
            title: "我的",
          ),
        ],
      ),
      body: <Widget>[
        Container(
          color: Colors.white,
          alignment: Alignment.center,
          child: const Text('Page 1'),
        ),
        Container(
          color: Colors.white,
          alignment: Alignment.center,
          child: const Text('Page 2'),
        ),
        Container(
          color: Colors.white,
          alignment: Alignment.center,
          child: const Text('Page 3'),
        ),
      ][currentPageIndex],
    );
  }

 以上就是 直播系统代码,flutter手写一个底部导航栏,更多内容欢迎关注之后的文章