Flutter如何实现底部导航栏

在Flutter中如何实现一个带图标的底部导航栏？我按照官方文档使用BottomNavigationBar组件，但是遇到两个问题：1) 点击导航项时页面切换有卡顿；2) 如何保持每个导航页面的状态不被重置？希望能看到一个完整的实现示例，包括页面切换动画和状态保持的最佳实践。

2 回复

使用Flutter实现底部导航栏，可通过BottomNavigationBar组件实现。步骤如下：

  1. 在Scaffold的bottomNavigationBar属性中添加BottomNavigationBar。
  2. 设置items定义导航项，包含图标和标签。
  3. 使用currentIndex和onTap切换页面。

示例代码：

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

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


在Flutter中，可以通过BottomNavigationBar组件实现底部导航栏，结合Scaffold的bottomNavigationBar属性使用。以下是基本实现步骤：

  1. 定义页面和导航项
    创建对应的页面组件，并定义底部导航栏的图标和标签。

  2. 状态管理
    使用StatefulWidget管理当前选中的导航索引。

  3. 构建导航栏
    在Scaffold中设置bottomNavigationBar和body，根据索引切换页面。

示例代码：

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

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

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('搜索页'));
  }
}

class Page3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('个人中心'));
  }
}

关键点：

  • 使用BottomNavigationBar的currentIndex和onTap控制导航状态。
  • 通过setState更新索引以实现页面切换。
  • 可自定义图标、颜色和动画效果（如type属性设置样式）。

如果需要更复杂的导航（如保持页面状态），可结合PageView或IndexedStack。

回到顶部