Flutter-底部切换栏的方式-BottomNavigationBar

第一步,准备工作

//指示器
  int currentIndex = 0;
  //定义显示的页面,自备点击的时候所显示的页面
  final pages = [TestOne(), TestTwo(), TestThree()];

• 构建bottomNavItem,就是底部的按钮/文字这些东西。

final List<BottomNavigationBarItem> bottomNavItem = [
    BottomNavigationBarItem(
      icon: Icon(Icons.hail),
      label: '首页',
      activeIcon: Icon(Icons.handyman_outlined),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.hail),
      label: '中心',
      activeIcon: Icon(Icons.handyman_outlined),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: '我的',
      activeIcon: Icon(Icons.handyman_outlined),
    ),
  ];

第二步：在Scaffold里面，使用bottomNavigationBar

 bottomNavigationBar: BottomNavigationBar(
        items: bottomNavItem,
        onTap: (index) {
          setState(() {
            this.currentIndex = index;
          });
},
        currentIndex: currentIndex,
      ),

第三步，在body部分，将页面我们点击的索引值绑定。

body: pages[currentIndex],

展示完整代码

import 'package:flutter/material.dart';
import 'package:flutter_form_validator/Pages/practice_basic/bottomNavgationBar/test1.dart';
import 'package:flutter_form_validator/Pages/practice_basic/bottomNavgationBar/test2.dart';
import 'package:flutter_form_validator/Pages/practice_basic/bottomNavgationBar/test3.dart';

///@desc BottomNavigationBar
///@author @zhizhizang
///

class BottomNavgationBarPage extends StatefulWidget {
  @override
  _BottomNavgationBarPageState createState() => _BottomNavgationBarPageState();
}

class _BottomNavgationBarPageState extends State<BottomNavgationBarPage> {
  //指示器
  int currentIndex = 0;
  //定义显示的页面
  final pages = [TestOne(), TestTwo(), TestThree()];

  //抽离item项
  final List<BottomNavigationBarItem> bottomNavItem = [
    BottomNavigationBarItem(
      icon: Icon(Icons.hail),
      label: '首页',
      activeIcon: Icon(Icons.handyman_outlined),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.hail),
      label: '中心',
      activeIcon: Icon(Icons.handyman_outlined),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: '我的',
      activeIcon: Icon(Icons.handyman_outlined),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('bottomNavigationBar的使用'),
      ),
      body: pages[currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: bottomNavItem,
        onTap: (index) {
          setState(() {
            this.currentIndex = index;
          });
        },
        currentIndex: currentIndex,
      ),
    );
  }
}

展示图