Flutter用BottomNavigationBar实现底部导航栏

最新推荐文章于 2025-09-24 13:15:52 发布

原创

最新推荐文章于 2025-09-24 13:15:52 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #BottomNavigationBar

这篇博客介绍了如何在Flutter中利用BottomNavigationBar组件来实现底部导航栏功能。步骤包括在main.dart文件中配置代码，创建四个不同的页面（home_page, constant_page, find_page, my_page），以及构建动态组件BottomNavigationWidget。" 122967797,7385329,"ROS launch文件详解：arg, group, param和ns标签

老规格，先看图：

程序主结构如下：

在这里插入图片描述

1.在程序主入口文件main.dart添加如下代码

import 'package:flutter/material.dart';
import 'bottom_navigation.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
   
   
  @override
  Widget build(BuildContext context) {
   
   
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      home: BottomNavigationWidget(),
    );
  }
}

2.创建4个界面，home_page.dart、constant_page.dart、find_page.dart、my_page.dart

home_page.dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
   
   
  @override
  Widget build(BuildContext context) {
   
   
    return Scaffold(
      appBar: AppBar(title: Text('HomePage'),),
      body: Center(
        child: Text('这是首页'