flutter如何实现底部菜单栏

在Flutter中如何实现一个底部菜单栏？我看到很多App都有底部导航功能，但不知道具体该怎么实现。想请教一下：

  1. 使用哪个Widget最合适？
  2. 是否需要配合PageView使用？
  3. 点击切换时如何保持页面状态？
  4. 能否自定义图标和选中效果？
    希望有详细的代码示例和实现步骤说明，谢谢！
2 回复

在Flutter中，使用BottomNavigationBar组件实现底部菜单栏。将其放入Scaffold的bottomNavigationBar属性中，并通过currentIndex和onTap控制选中项。

更多关于flutter如何实现底部菜单栏的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，底部菜单栏可以通过 BottomNavigationBar 组件实现。以下是基本步骤和示例代码：

1. 基本实现步骤：

  • 使用 Scaffold 的 bottomNavigationBar 属性。
  • 定义 BottomNavigationBar，设置 items（菜单项列表）和 currentIndex（当前选中索引）。
  • 通过 onTap 切换页面并更新状态。

2. 示例代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  final List<Widget> _pages = [
    Page1(),
    Page2(),
    Page3(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: '业务',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: '学校',
          ),
        ],
      ),
    );
  }
}

// 示例页面组件
class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Center(child: Text('首页'));
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Center(child: Text('业务页'));
}

class Page3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Center(child: Text('学校页'));
}

3. 关键属性说明：

  • currentIndex：控制当前选中的菜单项索引。
  • onTap：点击菜单项时触发，用于切换页面和状态。
  • items：定义菜单项，每个项包含图标（icon）和标签（label）。

4. 自定义样式：

  • 可通过 selectedItemColor 和 unselectedItemColor 设置选中/未选中颜色。
  • 使用 type: BottomNavigationBarType.fixed 防止标签在选中时移位。

此实现简单高效，适合大多数应用场景。如需更复杂效果（如凸起按钮），可结合 FloatingActionButton 或第三方库。

回到顶部