一、背景
目前市场上绝大部分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';
/*启动页*/