flutter-底部导航栏BottomNavigationBar

主入口文件main.dart，引入自定义的BottomNavigationWidget组件；main.dart代码如下：

import 'package:flutter/material.dart';
import 'bottom_navigation_widget.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'flutter底部导航',
      theme: ThemeData.light(),
      home: BottomNavigationWidget(),
    );
  }
}

在lib目录下，新建一个bottom_navigation_widget.dart文件。

StatefulWidget具有可变状态(state)的窗口组件（widget）。使用这个要根据变化状态，调整State值。使用StatefulWidget分为两个部分，第一个部分是继承与StatefullWidget，第二个部分是继承于State。其实State部分才是我们的重点，主要的代码都会写在State中。在bottom_navigation_widget.dart文件中创建BottomNavigationWidget组件，代码如下：

import 'package:flutter/material.dart';

class BottomNavigationWidget extends StatefulWidget {
  @override
  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  final _BottomNavigationColor = Colors.blue;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home, color: _BottomNavigationColor,),  
            title: Text('home', style: TextStyle(color: _BottomNavigationColor),)
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.email, color: _BottomNavigationColor,),  
            title: Text('home', style: TextStyle(color: _BottomNavigationColor),)
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.library_add, color: _BottomNavigationColor,),  
            title: Text('home', style: TextStyle(color: _BottomNavigationColor),)
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.pages, color: _BottomNavigationColor,),  
            title: Text('home', style: TextStyle(color: _BottomNavigationColor),)
          )
        ],
      ),
    );
  }
}

 在lib目录下新建pages文件夹，pages里面新建4个页面：

home_screen.dart

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('首页')),
      body: Center(
        child: Text('这是首页')
      )
    );
  }
}

 

hot_screen.dart

import 'package:flutter/material.dart';

class HotScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('热门')),
      body: Center(
        child: Text('这是热门')
      )
    );
  }
}

 

email_screen.dart

import 'package:flutter/material.dart';

class EmailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('消息')),
      body: Center(
        child: Text('这是消息')
      )
    );
  }
}

 

person_screen.dart

import 'package:flutter/material.dart';

class PersonScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('我的')),
      body: Center(
        child: Text('这是我的')
      )
    );
  }
}

接下来重写initState()方法，把刚才做好的页面初始化到一个Widget数组中，有了数组就可以根据数组的索引来切换不同的页面了。

List<Widget> pages = List();

  @override
  void initState() { 
    super.initState();
    pages
      ..add(HomeScreen())
      ..add(HotScreen())
      ..add(EmailScreen())
      ..add(PersonScreen());
  }

..add()是Dart语言的..语法，编程模式的建造者模式，简单来说就是返回调用者本身。这里pages数组后用了..add()，还会返回pages，然后就一直使用..语法，能一直向pages里增加widget元素，最后调用父类的initState()方法。

BottomNavigationBar组件里提供了一个相应事件onTap，这个事件自带一个索引值index，通过索引值就可以和我们pages里的索引值相对应了。

onTap: (int index){
  setState(() {
     curIndex = index;
  });
},

bottom_navigation_widget.dart最终全部代码如下：

import 'package:flutter/material.dart';
import 'pages/home_screen.dart';
import 'pages/hot_screen.dart';
import 'pages/email_screen.dart';
import 'pages/person_screen.dart';

class BottomNavigationWidget extends StatefulWidget {
  @override
  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  final bottomNavigationColor = Colors.blue;
  int curIndex = 0;
  List<Widget> pages = List();

  @override
  void initState() { 
    super.initState();
    pages
      ..add(HomeScreen())
      ..add(HotScreen())
      ..add(EmailScreen())
      ..add(PersonScreen());
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pages[curIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home, color: bottomNavigationColor),  
            label: '首页',
            // title: Text('home1', style: TextStyle(color: bottomNavigationColor))
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.pages, color: bottomNavigationColor), 
            label: '推荐', 
            // title: Text('home2', style: TextStyle(color: bottomNavigationColor))
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.email, color: bottomNavigationColor),  
            label: '消息',
            // title: Text('home', style: TextStyle(color: bottomNavigationColor))
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person, color: bottomNavigationColor),  
            label: '我的',
            // title: Text('home', style: TextStyle(color: bottomNavigationColor))
          )
        ],
        currentIndex: curIndex,
        onTap: (int index){
          setState(() {
            curIndex = index;
          });
        },
        fixedColor: Colors.blue,
        type: BottomNavigationBarType.fixed,
      ),
    );
  }
}