Flutter 之BottomNavigationBar

1. 在main中的代码如下

import 'package:flutter/material.dart';
// 底部Tabbar的widget文件引用
import 'Tabbar/buttom_navigator_widget.dart';

void main(List args) {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.red),
      title: '底部导航栏切换',
      home: BottomNavigationWidget(),
    );
  }
}

2. 创建Tabbar文件夹，并创建buttom_navigator_widget文件，使用快捷键(stl)创建StatefulWidget代码。可以根据需求创建StatelessWidget 和StatefulWidget不同的widget，切换Tabbar时需要保存currentIndex，所以需要创建有状态管理的widget，代码如下：

import 'package:flutter/material.dart';
//个人中心，记录仪文件的引用
import 'package:tachograph/page/personal_enter.dart';
import 'package:tachograph/page/recorder.dart';

class BottomNavigationWidget extends StatefulWidget {
  const BottomNavigationWidget({Key? key}) : super(key: key);

  @override
  State createState() => _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends State {
//用于保存点击的是哪个item
  int _currentIndex = 0;
  List dataList = [];

// 初始化widget数组，添加controller
  @override
  void initState() {
    // TODO: implement initState
    dataList.add(Recorder());
    dataList.add(Personal_center());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
  // 脚手架widget，
    return Scaffold(
      body: dataList[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        unselectedItemColor: Colors.red,   //未选中颜色
        selectedItemColor: Colors.green,   // 选中颜色
        items: [
          BottomNavigationBarItem(
              icon: Icon(
                Icons.home,
                color: Colors.blue,
              ),
              title: Text(
                '记录仪',
                // style: TextStyle(color: Colors.redAccent),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.mail,
                // color: Colors.red,
              ),
              title: Text(
                '个人中心',
                // style: TextStyle(color: Colors.redAccent),
              )),
        ],
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
      // item 点击处理
        onTap: (int value) {
          setState(() {
            _currentIndex = value;
          });
        },
      ),
    );
  }
}

3. 创建page文件夹，并创建Personal_center和Recorder文件，代码如下：

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          "个人中心",
          style: TextStyle(color: Colors.red, fontSize: 20),
        ),
      ),
    );
  }
}


import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          '记录仪',
          style: TextStyle(color: Colors.green, fontSize: 20),
        ),
      ),
    );
  }
}

4. 运行代码，效果如下：

   
   
   Simulator Screen Shot - iPhone 8 - 2022-04-16 at 11.35.24.png

Simulator Screen Shot - iPhone 8 - 2022-04-16 at 11.35.28.png