Flutter（一）：用BottomNavigationBar实现底部导航栏架构

置顶

假装会写代码

于 2018-07-23 19:10:39 发布

阅读量2.6w

点赞数 4

分类专栏： Flutter 文章标签： Flutter 底部导航栏

本文链接：https://blog.csdn.net/qq_16247851/article/details/81172628

版权

本文介绍了如何使用Flutter的BottomNavigationBar组件创建底部导航栏，主要包括五个文件的结构，MainPage作为主要界面，HomePage、FindPage、MinePage分别对应首页、发现和我的页面。在实现过程中，资源需在images文件夹内并声明于pubspec.yaml，通过Scaffold、BottomNavigationBar和onTap方法切换界面。

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

效果图（左ios右Android）：

主要涉及到5个文件，main.dart是程序入口，MainPage.dart是主要界面（相当于Android中的MainActivity），HomePge.dart、FindPage.dart、MinePage.dart分别是首页、发现、我的。

首先看Main.dart代码：

import 'package:flutter/material.dart';
import 'package:flutter_app/MainPage.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),//启动MainPage
    );
  }
}

MainPage.dart代码：