Flutter用BottomNavigationBar实现底部导航栏

最新推荐文章于 2024-04-11 05:52:53 发布

codekxx

最新推荐文章于 2024-04-11 05:52:53 发布

阅读量1.5k

点赞数 2

分类专栏： Flutter 文章标签： Flutter BottomNavigationBar

本文链接：https://blog.csdn.net/codekxx/article/details/86528077

版权

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

摘要由CSDN通过智能技术生成

老规格，先看图：

程序主结构如下：

在这里插入图片描述

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('这是首页'</