Flutter中如何使用BottomNavigationBarItem实现底部导航

在Flutter中使用BottomNavigationBarItem实现底部导航时，应该如何正确设置图标和标签？我尝试了以下代码，但导航栏显示异常，图标和文字重叠在一起。请问如何解决这个问题，并且实现点击切换不同页面的功能？此外，如何自定义选中和未选中状态的颜色和样式？

2 回复

在Flutter中，使用BottomNavigationBar和BottomNavigationBarItem实现底部导航：

  1. 在Scaffold的bottomNavigationBar属性中添加BottomNavigationBar。
  2. 在items中定义多个BottomNavigationBarItem，每个包含icon和label。
  3. 使用currentIndex和onTap切换页面。

示例：

bottomNavigationBar: BottomNavigationBar(
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
    BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
  ],
)

更多关于Flutter中如何使用BottomNavigationBarItem实现底部导航的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，使用BottomNavigationBarItem配合BottomNavigationBar实现底部导航的步骤如下：

  1. 创建BottomNavigationBarItem：每个底部导航项包含图标和标签。
  2. 定义页面内容：为每个导航项关联一个页面（如Scaffold）。
  3. 使用BottomNavigationBar：将导航项列表添加到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, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

关键点：

  • 使用currentIndex跟踪当前选中项。
  • onTap回调更新索引，触发页面切换。
  • 通过setState刷新界面。
  • 可自定义图标、标签颜色和样式（如selectedItemColor）。

运行后，点击底部导航项即可切换对应页面。

回到顶部