Flutter学习笔记：掌握BottomNavigationBar，实现无缝导航切换

Android

2023-11-27 11:57:06

Flutter中的导航挑战

在Flutter开发中，使用Navigator进行页面导航时，你可能遇到一个常见问题：当在多个导航按钮之间来回切换时，应用程序会重新构建。这会导致控件重新构建，从而丢失浏览历史记录，带来不佳的用户体验。

BottomNavigationBar简介

BottomNavigationBar是一个Flutter小部件，它允许你轻松创建位于屏幕底部的导航栏。此导航栏包含一组选项卡，用户可以点击这些选项卡在不同页面之间切换。

利用StatefulWidget解决重新构建问题

为了解决重新构建问题，我们可以使用StatefulWidget。StatefulWidget允许小部件维护其状态，即使父小部件更新也不例外。

实现BottomNavigationBar

以下步骤将指导你如何实现一个BottomNavigationBar，它可以无缝地在多个页面之间导航：

创建一个新的Flutter项目。
在lib文件夹中创建一个名为main.dart的新文件。
在main.dart文件中，导入以下包：

import 'package:flutter/material.dart';

定义一个名为MyApp的StatefulWidget类：

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

在MyApp类中，定义一个名为_currentIndex的整型状态变量，它将跟踪当前选定的选项卡索引：

class _MyAppState extends State<MyApp> {
  int _currentIndex = 0;

在MyApp类的build方法中，创建一个BottomNavigationBar，并将其currentIndex设置为_currentIndex状态变量：

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Page ${_currentIndex + 1}'),
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: 'Settings',
            ),
          ],
          onTap: (index) {
            setState(() {
              _currentIndex = index;
            });
          },
        ),
      ),
    );
  }