flutter底部导航制作

实现一个底部导航栏，并且页面抬头显示的内容也会跟着改变。实现需要用到flutter里的BottonNavigationBar这个控件。

BottonNavigationBar参数

main.dart代码

import 'package:flutter/material.dart';
import './bottomNavigation/BottomNavigation.dart';

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

class Myapp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'demo',
      home: BottomNavgationWidget(),
    );
  }
}

BottomNavgationWidget代码：

import 'package:flutter/material.dart';
import '../pages/home.dart';
import '../pages/product.dart';
import '../pages/my.dart';

class BottomNavgationWidget extends StatefulWidget {
  @override
  _BottomNavgationWidgetState createState() => _BottomNavgationWidgetState();
}

class _BottomNavgationWidgetState extends State<BottomNavgationWidget> {
  final _bottomNavgiationColor = Colors.blue;
  //默认显示第几个页面
  int _currentIndex = 0;
  //把页面放在数组中
  List<Widget> pageList = [];
  @override
  void initState() {
    pageList..add(HomePage())..add(ProductPage())..add(MyPage());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pageList[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
              color: _bottomNavgiationColor,
            ),
            title: Text(
              '首页',
              style: TextStyle(
                color: _bottomNavgiationColor,
              ),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.school,
              color: _bottomNavgiationColor,
            ),
            title: Text(
              '产品',
              style: TextStyle(
                color: _bottomNavgiationColor,
              ),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.account_circle,
              color: _bottomNavgiationColor,
            ),
            title: Text(
              '我的',
              style: TextStyle(
                color: _bottomNavgiationColor,
              ),
            ),
          ),
        ],
        //点击事件改变当前显示页面的下标
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
        //底部导航索引，
        currentIndex: _currentIndex,
      ),
    );
  }
}

home.dart代码，其他页面与home.dart代码一致

import 'package:flutter/material.dart';

void maon() => runApp(HomePage());

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('home'),
      ),
      body: Center(
        child: Text('home page'),
      ),
    );
  }
}