flutter 项目实战七 bottomNavigationBar

本项目借用逛丢网站的部分数据，仅作为 flutter 开发学习之用。逛丢官方网址：https://guangdiu.com/

侧边栏的问题已经解决了，接下到底部的导航栏了，先放上kotlin开发的主页面

如底部红线框框中的部分，在Android或者kotlin中我们可以使用 BottomNavigationView （android.support.design.widget包下面）来实现，也可使用 RadioGroup 来实现，在 flutter 中我们使用 bottomNavigationBar 来实现效果。

为了导航效果，我们先新建两个页面，hai_tao.dart 和 hour_rank.dart ，

class HaiTao extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return HaitaoWidget();
  }
  
}

class HaitaoWidget extends State<HaiTao>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("海淘"),
      ),
      body: Text("海淘"),
    );
  }
  
}

class HourRank extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return HourWidget();
  }
  
}

class HourWidget extends State<HourRank>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("小时风云榜"),
      ),
      body: Text("小时风云榜"),
    );
  }
  
}

修改main.dart代码，添加 bottomNavigationBar

class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Main(),
    );
  }
  
}

class Main extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MainWidget();
  }
  
}

class MainWidget extends State<Main>{

  int _index=0;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: HomeIndex(),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home,color: Colors.grey,),
            title: Text("首页"),
            activeIcon: Icon(Icons.home,color: Colors.green,),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.flight_takeoff,color: Colors.grey,),
            title: Text("首页"),
            activeIcon: Icon(Icons.flight_takeoff,color: Colors.green,),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.timer,color: Colors.grey,),
            title: Text("小时风云榜"),
            activeIcon: Icon(Icons.timer,color: Colors.green,),
          ),
        ],
        currentIndex: _index,
        onTap: (index){
          setState(() {
            _index=index;
          });
        },
      ),
    );
  }
  
}

BottomNavigationBarItem是 BottomNavigationBar的组成部分，类似于 radiobuttom 与 radiogroup 。icon 是 BottomNavigationBarItem的图片部分，activeIcon 是选中之后的图片样式，可以不设置，currentIndex 表示当前展示的序号，onTap是 BottomNavigationBarItem 点击时触发的方法，参数为点击的序号。

底部item切换好了，下面就到了页面切换了，需要根据 item选中状态的变化，切换上部的内容。

flutter 提供了名为 indexStack 的widget 来实现，children 包含了一共有几个页面，index 用了控制当前展示页面时第几个页面。

IndexedStack(
  children: <Widget>[
      HomeIndex(),
      HaiTao(),
      HourRank()
  ],
  index: _index,)

修改main.dart的build方法：

@override
Widget build(BuildContext context) {
  // TODO: implement build
  return Scaffold(
    body: IndexedStack(
      children: <Widget>[
          HomeIndex(),
          HaiTao(),
          HourRank()
      ],
      index: _index,
    ),
    bottomNavigationBar: BottomNavigationBar(
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.home,color: Colors.grey,),
          title: Text("首页",style: TextStyle(color: _index==0?Colors.green:Colors.grey),),
          activeIcon: Icon(Icons.home,color: Colors.green,),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.flight_takeoff,color: Colors.grey,),
          title: Text("海淘",style: TextStyle(color: _index==1?Colors.green:Colors.grey),),
          activeIcon: Icon(Icons.flight_takeoff,color: Colors.green,),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.timer,color: Colors.grey,),
          title: Text("小时风云榜",style: TextStyle(color: _index==2?Colors.green:Colors.grey),),
          activeIcon: Icon(Icons.timer,color: Colors.green,),
        ),
      ],
      currentIndex: _index,
      onTap: (index){
        setState(() {
          _index=index;
        });
      },
    ),
  );
}

可以对 bottomNavigationBarItem 的 title设置

style: TextStyle(color: _index==0?Colors.green:Colors.grey)

来改变选中的item的文字的颜色

运行程序：

bottomNavigationBar 至此已基本完成。

目前项目里面还剩下的就是海淘页面以及小时风云榜了，至于九块九的页面是用webview加载的HTML页面，就不再做过多的详述了。

不多在首页当中我们还剩下一个下拉刷新以及上拉加载的功能未实现，将在下一章给出。

码云 git 下载

kotlin版本的源码下载：git下载地址

flutter 项目实战七 bottomNavigationBar

码云 git 下载

猜你喜欢