Flutter底部导航栏

实现

在Flutter中，底部导航栏是使用BottomNavigationBar组件实现的

BottomNavigationBar 的各个属性的详细介绍：

• items: 必需，表示底部导航栏的选项卡列表，每个选项卡都包含一个图标和一个标签。
• onTap: 表示用户点击底部导航栏选项卡时要执行的回调函数。
• currentIndex: 表示当前选中的底部导航栏选项卡的索引值，默认为0。
• elevation: 表示底部导航栏的阴影高度，默认为8.0。
• type: 表示底部导航栏的类型，可以是BottomNavigationBarType.fixed（固定选项卡数量）或BottomNavigationBarType.shifting（动态选项卡数量），默认为BottomNavigationBarType.fixed。（需注意：shifting不支持背景色，设置backgroundColor无效）
• fixedColor: 表示选中的选项卡的颜色，仅在type为BottomNavigationBarType.fixed时生效。
• backgroundColor: 表示底部导航栏的背景色。
• iconSize: 表示选项卡图标的大小，默认为24.0。
• selectedItemColor: 表示选中的选项卡的图标和标签的颜色。
• unselectedItemColor: 表示未选中的选项卡的图标和标签的颜色。
• selectedIconTheme: 表示选中的选项卡图标的主题，可以是IconThemeData类型。
• unselectedIconTheme: 表示未选中的选项卡图标的主题，可以是IconThemeData类型。
• selectedFontSize: 表示选中的选项卡标签的字体大小，默认为14.0。
• unselectedFontSize: 表示未选中的选项卡标签的字体大小，默认为12.0。
• selectedLabelStyle: 表示选中的选项卡标签的样式，可以是TextStyle类型。
• unselectedLabelStyle: 表示未选中的选项卡标签的样式，可以是TextStyle类型。
• showSelectedLabels: 表示是否显示选中的选项卡标签，默认为true。
• showUnselectedLabels: 表示是否显示未选中的选项卡标签，默认为true。
• mouseCursor: 表示鼠标指针悬停在底部导航栏选项卡上时要显示的光标，可以是MouseCursor类型。
• enableFeedback: 表示是否启用触觉反馈，默认为true。
• landscapeLayout: 表示底部导航栏在横屏模式下的布局方式，可以是BottomNavigationBarLandscapeLayout枚举类型。

首先需要定义一个列表，存储不同的页面，这里用几个无状态组件来代替

final List pages = [
  const HomePage(),
  const ProfilePage(),
  const SettingsPage()
];

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Home Page'),
    );
  }
}

还需要定义一个_selectedIndex变量，用于跟踪当前选中的底部导航栏选项卡的索引，默认值为0，赋值给BottomNavigationBar.currentIndex，
在BottomNavigationBar.onTap事件中更新_selectedIndex的值

void onTap(int index) {
  setState(() {
    _selectedIndex = index;
  });
}

代码

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MainPage(),
    );
  }
}

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

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  final List pages = [
    const HomePage(),
    const ProfilePage(),
    const SettingsPage()
  ];
  int _selectedIndex = 0;

  void onTap(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pages[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings')
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.orange,
        unselectedItemColor: Colors.grey.withOpacity(0.5),
        showSelectedLabels: false,
        showUnselectedLabels: false,
        elevation: 0,
        onTap: onTap,
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Home Page'),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Profile Page'),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Settings Page'),
    );
  }
}

预览