Flutter如何实现bottomnavigationbar效果

我正在学习Flutter开发，想实现一个底部导航栏效果，类似BottomNavigationBar。但不太清楚具体该如何实现，比如如何设置图标和文字、如何切换不同页面、如何保持页面状态不重建。希望能有个完整的示例代码，最好能详细说明下各个参数的用途和注意事项。

2 回复

Flutter中使用BottomNavigationBar组件实现底部导航栏。在Scaffold的bottomNavigationBar属性中配置，设置items定义导航项，通过currentIndex和onTap控制选中状态和页面切换。

更多关于Flutter如何实现bottomnavigationbar效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以通过BottomNavigationBar组件实现底部导航栏效果。以下是基本实现步骤：

  1. 创建状态管理：使用StatefulWidget管理当前选中的索引。
  2. 定义页面内容：为每个导航项准备对应的页面。
  3. 配置BottomNavigationBar：设置导航项和切换逻辑。

示例代码：

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 = [
    PageContent(title: "首页", color: Colors.blue),
    PageContent(title: "搜索", color: Colors.green),
    PageContent(title: "我的", color: Colors.orange),
  ];

  @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.search),
            label: '搜索',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: '我的',
          ),
        ],
      ),
    );
  }
}

// 示例页面组件
class PageContent extends StatelessWidget {
  final String title;
  final Color color;

  PageContent({required this.title, required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color.withOpacity(0.2),
      child: Center(
        child: Text(
          title,
          style: TextStyle(fontSize: 24, color: color),
        ),
      ),
    );
  }
}

关键属性说明：

  • currentIndex：当前选中项的索引
  • onTap：点击导航项时的回调函数
  • items：导航项列表，每个项包含图标和标签

自定义扩展：

  • 通过type属性可切换导航样式（固定/浮动）
  • 使用selectedItemColor和unselectedItemColor自定义颜色
  • 添加backgroundColor设置导航栏背景色

这种实现方式简单高效，能满足大部分底部导航需求。如需更复杂效果（如凸起按钮），可结合FloatingActionButton实现。

回到顶部