Flutter底部导航栏和顶部Tab切换完整代码

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。

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

推荐学习：

flutter中文网

flutter开发

启动页：main.dart

import 'package:flutter/material.dart';
import 'package:flutter_play/bottomNavigationBar.dart';/*启动页*/
void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(theme: ThemeData(), //主题home: const MyHomePage(),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({super.key});@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int _bottomNavigationIndex = 0;  //底部导航的索引@overrideWidget build(BuildContext context) {return Scaffold(body: pages[_bottomNavigationIndex], //页面切换bottomNavigationBar: _bottomNavigationBar()  //底部导航);}//底部导航-样式BottomNavigationBar _bottomNavigationBar(){return BottomNavigationBar(items: items(), //底部导航-图标和文字的定义，封装到函数里currentIndex: _bottomNavigationIndex,onTap: (flag) {setState(() {_bottomNavigationIndex = flag;  //使用底部导航索引});}, //onTap 点击切换页面fixedColor: Colors.blue,  //样式：图标选中时的颜色：蓝色type: BottomNavigationBarType.fixed, //样式：选中图标后的样式是固定的);}}

底部导航页：bottomNavigationBar.dart

import 'package:flutter/material.dart';
import 'package:flutter_play/index.dart';
import 'package:flutter_play/find.dart';
import 'package:flutter_play/shop.dart';
import 'package:flutter_play/home.dart';//底部导航页-切换页面
final pages = [IndexPage(), //首页FindPage(), //发现页ShopPage(), //商城页HomePage()  //个人主页
];//底部导航-图标和文字定义
List<BottomNavigationBarItem> items(){return [const BottomNavigationBarItem(icon: Icon(Icons.home),label: '首页',),const BottomNavigationBarItem(icon: Icon(Icons.find_in_page),label: '发现',),const BottomNavigationBarItem(icon: Icon(Icons.shop),label: '商城',),const BottomNavigationBarItem(icon: Icon(Icons.local_activity),label: '我的',),];
}

顶部导航栏：index.dart (首页)  嵌套顶部导航布局

import 'package:flutter/material.dart';
import 'package:flutter_play/recommend.dart';/*首页
* 嵌入：顶部导航栏 TabBar
* 导航栏嵌入：图文列表 ListView
* */
class IndexPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: DefaultTabController(length: 3,child: Scaffold(appBar: AppBar(bottom: const TabBar(tabs: [Tab(text: '推荐'),Tab(text: '资讯'),Tab(text: '科技'),],),),body: TabBarView(children: [RecommendPage(),  // 推荐页（内部嵌套ListView）const Icon(Icons.directions_transit),const Icon(Icons.directions_bike),],),),),);}
}

图文列表页:  recommend.dart  (推荐页)

import 'package:flutter/material.dart';/*推荐页*/
class RecommendPage extends StatelessWidget {final List<String> items = List<String>.generate(50, (i) => '标题 $i');@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(body: ListView.builder(itemCount: items.length,// prototypeItem 计算预加载需要的空间，内容和下面的ListTile相同prototypeItem: ListTile(title: Text(items.first),subtitle: Text(items.first),trailing: Image.asset('images/mobile.jpg',fit: BoxFit.fill,width: 128,height: 64),),itemBuilder: (context, index) {// ListTile 实际展示的列表内容return ListTile(title: Text(items[index]),  //大标题subtitle: Text(items[index]),  //小标题trailing: Image.asset('images/mobile.jpg',fit: BoxFit.fill,width: 64,height: 64),);},),),);}}