Flutter通过底部导航栏实现页面的跳转

放自己定义的BottomNavigationWidget 这个组件的核心代码

import 'package:flutter/material.dart';
import 'pages/home.dart';
import 'pages/map.dart';
import 'pages/timer.dart';

void main(){
  runApp(BottomNavigationWidget());
}

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

class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  final _bottomColor = Colors.blue;
  int _currentIdex = 0;  //当前的页面索引
  List<Widget> pagelist = List();
  
  @override
  void initState(){
    pagelist
      ..add(Home())
      ..add(Map())
      ..add(Timer());
    super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pagelist[_currentIdex],
      bottomNavigationBar: new BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home,color: _bottomColor),
            title: Text("首页"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.map,color: _bottomColor),
            title: Text("地图")
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.timer,color: _bottomColor),
            title: Text("计时")
          ),
        ],
        currentIndex: _currentIdex,
        onTap: (int index){
          setState(() {
           _currentIdex = index; 
          });
        },
        type: BottomNavigationBarType.fixed,
      )
    );
  }
}

上一篇博客实现了底部导航的UI效果，但是没有实现跳转功能，那这篇博客写跳转功能的实现。

1. 首先声明一个用来储存Widget类型的列表组件。

List <Widget> pagelist = List()

2. 然后重写我们的initState()方法，相当于把页面初始化到一个Widget数组(即上面声明的pagelist)里，
   有了数组就可以通过索引切换不同的页面辽，相当于是对页面进行重新加载(可能理解有错)。里面是用了dart语法中的…add方法，相当于
   pagelist = pagelist.add(Home());
   pagelist = pagelist.add(Map());
   pagelist = pagelist.add(Timer());
   最后使用super调用父类的initState()方法，这样这三个子页面的组件就可以根据组件里的索引得到。

  void initState(){
    pagelist
      ..add(Home())
      ..add(Map())
      ..add(Timer());
    super.initState();
  }

3. 接下来重写build方法，body属性可以通过当前点击对象的index重构页面。

body: pagelist[_currentIdex]

4. 然后设置底部导航栏组件中的currentIndex属性

currentIndex: _currentIdex,

5. 处理点击事件（自己也没理解）

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