flutter tab 切换 和 BottomNavigationBar 自定义 底部导航条

BottomNavigationBar 组件介绍

// BottomNavigationBar 是 Flutter 提供的底部导航条组件，它常被用于实现 Tab 的切换。
// bottomNavigationBar 是 Scaffold 组件的一个参数，用于在 Scaffold 中设置底部导航。

BottomNavigationBar 的常见属性

// items: 是一个 BottomNavigationBarItem 的集合，用于定义每一个底部导航条按钮。
// iconSize: 定义图标的大小。
// currentIndex: 用于设置默认选中哪一个 Tab。
// onTap: 定义点击事件的回调函数。
// fixedColor: 定义选中状态下的颜色。
// type: 定义底部导航条的类型，包括 BottomNavigationBarType.fixed 和 BottomNavigationBarType.shifting 两种。

案例代码

// 在 main.dart 文件中定义主题组件
return MaterialApp(
    home: Home()
);

// home组件定义
import 'package:flutter/material.dart';
import 'home/index.dart';
import 'home/class.dart';
import 'home/my.dart';

class Home extends StatefulWidget {
    Home({Key key});
    _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
    // 当前选中的索引值
    var _currentIndex = 0;
    // 定义三个 Tab 对应的页面
    var tabs = [Index(), ClassIf(), My()];

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('欢迎')),
            // 根据当前选中的索引值展示对应的页面
            body: tabs[_currentIndex],
            bottomNavigationBar: BottomNavigationBar(
                currentIndex: _currentIndex,
                type: BottomNavigationBarType.fixed,
                onTap: (val) {
                    // 更新选中的索引值并重建界面
                    setState(() {
                        _currentIndex = val;
                    });
                },
                // 定义底部导航条按钮
                items: [
                    BottomNavigationBarItem(
                        title: Text('首页'),
                        icon: Icon(Icons.home)
                    ),
                    BottomNavigationBarItem(
                        title: Text('分类'),
                        icon: Icon(Icons.category)
                    ),
                    BottomNavigationBarItem(
                        title: Text('我的'),
                        icon: Icon(Icons.my_location)
                    ),
                ],
            ),
        );
    }
}