Flutter系列（四）底部导航+顶部导航+图文列表完整代码

一、背景

          目前市场上绝大部分App的布局结构基本统一：底部导航+顶部导航，底部导航页里嵌套顶部导航栏，顶部导航页里嵌套图文列表展示信息，可以使用于各种行业。这种风格简洁清晰，便于用户阅读。本文将实现这种布局结构，力求代码简洁化容易理解。

二、演示效果

三、组件设计

设计说明：

1.底部导航：TabBar 组件

官方文档：使用 tabs - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

2.顶部导航：BottomNavigationBar 组件

3.图文列表：ListView 组件

更多实用教程：实用教程 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

四、完整代码

代码工程结构：

 

1）启动页：main.dart

import 'package:flutter/material.dart';
import 'package:flutter_play/bottomNavigationBar.dart';

/*启动页*/