在Flutter中使用BottomNavigationBar和IndexedStack可以实现一个功能完整的底部导航栏

原创

已于 2025-04-09 10:09:28 修改 · 785 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#python

于 2025-04-09 10:09:19 首次发布

在Flutter中，使用BottomNavigationBar和IndexedStack可以实现一个功能完整的底部导航栏。BottomNavigationBar用于显示底部的导航按钮，而IndexedStack则用于管理页面的切换，确保每个页面的状态得以保留（即页面不会因为切换而重新构建）。

以下是实现的完整代码示例及详细解释：

代码实现

import 'package:flutter/material.dart';

void main() {
   
   
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
   
   
  const MyApp({
   
   Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
   
   
    return MaterialApp(
      title: 'BottomNavigationBar + IndexedStack',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const BottomNavigationExample(),
    );
  }
}

class BottomNavigationExample extends StatefulWidget {
   
   
  const BottomNavigationExample({
   
   Key? key}) : super(key: key);

  @override
  _BottomNavigationExampleState createState()