2.2 代码

项目入口：main.dart

import 'package:flutter/material.dart';
import 'tabsPage/index.dart';void main() => runApp(const MyApp());class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(// title: 'Flutter Demo',theme: ThemeData(// This is the theme of your application.primarySwatch: Colors.orange,),home: const Tabs());}
}

底部导航控制：tabsPage/index.dart

import 'package:flutter/material.dart';
import 'Page1.dart';
import 'Page2.dart';
import 'Page3.dart';
import 'Page4.dart';class Tabs extends StatefulWidget {const Tabs({Key? key}) : super(key: key);@override_TabsState createState() => _TabsState();
}class _TabsState extends State<Tabs> {int _selectedIndex = 0; // 用作被选中的 Tab 的索引号final List _tabPages = [const Page1(),const Page2(),const Page3(),const Page4()]; // 列举所有 Tab 控制切换将用到的页面@overrideWidget build(BuildContext context) {return Scaffold(body: _tabPages[_selectedIndex],bottomNavigationBar: BottomNavigationBar(selectedFontSize: 12.0, // 被选中时的字体大小unselectedFontSize: 14.0, // 未被选中时的字体大小showSelectedLabels: true, // 被选中时是否显示LabelshowUnselectedLabels: true, // 未被选中时是否显示LabelenableFeedback: true, //点击会产生咔嗒声，长按会产生短暂的振动selectedItemColor: Colors.orange, // 设置被选中时的图标颜色unselectedItemColor: Colors.grey, // 设置未被选中时的图标颜色items: const <BottomNavigationBarItem>[BottomNavigationBarItem(icon: Icon(Icons.home,size: 24.0,),label: '工作室',backgroundColor: Colors.white,),BottomNavigationBarItem(icon: Icon(Icons.event_note, size: 24.0),label: '数据',backgroundColor: Colors.white,),BottomNavigationBarItem(icon: Icon(Icons.account_box_outlined, size: 24.0),label: '通讯录',backgroundColor: Colors.white,),BottomNavigationBarItem(icon: Icon(Icons.person, size: 24.0),label: '我的',backgroundColor: Colors.white,),],// 设置当前（即被选中时）页面currentIndex: _selectedIndex,// 当点击其中一个[items]被触发onTap: (int index) {setState(() {/** item 被点中时更改当前索引。* 其中，currentIndex 字段设置的值时响应式的* 新版dart不用this.*/_selectedIndex = index;});},),);}
}

底部导航得具体页面：
page1

import 'package:flutter/material.dart';enum WhyFarther { harder, smarter, selfStarter, tradingCharter }class Page1 extends StatefulWidget {const Page1({Key? key}) : super(key: key);@override_Page1State createState() => _Page1State();
}class _Page1State extends State<Page1> {set _selection(WhyFarther _selection) {}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("JcStdio"), actions: <Widget>[IconButton(icon: const Icon(Icons.search),onPressed: () {},),PopupMenuButton<WhyFarther>(onSelected: (WhyFarther result) {setState(() {_selection = result;});},icon: const Icon(Icons.add_circle_outline,size: 24.0,),itemBuilder: (BuildContext context) => <PopupMenuEntry<WhyFarther>>[PopupMenuItem<WhyFarther>(value: WhyFarther.selfStarter,child: Row(children: const [Icon(Icons.qr_code_scanner_outlined,size: 24.0,),Text('扫一扫')],)),PopupMenuItem<WhyFarther>(value: WhyFarther.tradingCharter,child: Row(children: const [Icon(Icons.person_add,size: 24.0,),Text('添加朋友')],)),],)]),body: const Text('这里是 jcstdio： jclee95的个人工作室，欢迎你的到来！'),);}
}

page2

import 'package:flutter/material.dart';class Page2 extends StatefulWidget {const Page2({Key? key}) : super(key: key);@override_Page2State createState() => _Page2State();
}class _Page2State extends State<Page2> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("数据")),body: const Text('欢迎浏览数据中心页...'),);}
}

page3

import 'package:flutter/material.dart';
import '/datas/listData.dart';
// import '/datas/usercard.dart';class Page3 extends StatefulWidget {const Page3({Key? key}) : super(key: key);@override_Page3State createState() => _Page3State();
}class _Page3State extends State<Page3> {List<Widget> _listData() {var tempList = listData.map((value) {return ListTile(leading: Image.network(value["imageurl"]),title: Text(value["title"]),subtitle: Text(value["author"]));});return tempList.toList();}// UserCard@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("通讯录"),),body: ListView(children: _listData(),));}
}

page4

import 'package:flutter/material.dart';class Page4 extends StatefulWidget {const Page4({Key? key}) : super(key: key);@override_Page3State createState() => _Page3State();
}class _Page3State extends State<Page4> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("我的"),),body: const Text('欢迎来到个人中心！'));}
}![请添加图片描述](https://img-blog.csdnimg.cn/719015957bcf4228bd9e87902cc7546d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAamNMZWU5NQ==,size_20,color_FFFFFF,t_70,g_se,x_16)