Flutter中BottomNavigationBar+IndexedStack实现底部导航栏
发布时间
阅读量：
阅读量
Flutter底部导航栏切换页面的实现，
主要步骤如下：
引入相关包和页面文件。
定义TabPage StatefulWidget和其状态管理类_TabPageState。
在_TabPageState中定义当前选中的底部导航栏索引变量currentIndex。
在build方法中构建页面UI，使用Scaffold作为根组件。
使用SafeArea确保内容不会超出屏幕安全区域。
使用IndexedStack保持页面状态，避免页面重建。
定义底部导航栏，并设置主题去除水波纹和点击高亮效果。
设置底部导航栏的选中标签和未选中标签样式。
定义底部导航栏项目列表。
tab_page.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart'; // 引入屏幕适配库
import 'package:wan_android_flutter/pages/home/home_page.dart'; // 引入首页页面
import 'package:wan_android_flutter/pages/hot_key/hot_key_page.dart'; // 引入热点页面
import 'package:wan_android_flutter/pages/knowledge/knowledge_page.dart'; // 引入体系页面
import 'package:wan_android_flutter/pages/personal/personal_page.dart'; // 引入个人中心页面
// 定义TabPage StatefulWidget，用于底部导航栏切换页面
class TabPage extends StatefulWidget {
const TabPage({super.key});
@override
State createState() {
return _TabPageState();
}
}
// _TabPageState类，用于管理TabPage的状态
class _TabPageState extends State<TabPage> {
int currentIndex = 0; // 当前选中的底部导航栏索引
@override
Widget build(BuildContext context) {
// 构建页面UI
return Scaffold(
body: SafeArea(
// SafeArea确保内容不会超出屏幕安全区域
child: IndexedStack(
// IndexedStack用于保持页面状态，避免页面重建
index: currentIndex,
children: [
HomePage(), // 首页
HotKeyPage(), // 热点
KnowledgePage(), // 体系
PersonalPage(), // 我的
],
),
),
bottomNavigationBar: Theme(
// 修改底部导航栏主题
data: Theme.of(context).copyWith(
splashColor: Colors.transparent, // 去除水波纹效果
highlightColor: Colors.transparent), // 去除点击高亮效果
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
// 固定底部导航栏
selectedLabelStyle: TextStyle(fontSize: 14.sp, color: Colors.black),
// 选中标签样式
unselectedLabelStyle:
TextStyle(fontSize: 12.sp, color: Colors.blueGrey),
// 未选中标签样式
currentIndex: currentIndex,
// 当前选中的索引
items: _barItemList(),
// 底部导航栏项目列表
onTap: (index) {
// 点击切换页面
currentIndex = index;
setState(() {}); // 更新页面
},
)),
);
}
// 构建底部导航栏项目列表
List<BottomNavigationBarItem> _barItemList() {
List<BottomNavigationBarItem> items = []; // 初始化项目列表
// 添加首页项目
items.add(BottomNavigationBarItem(
label: "置顶",
activeIcon: Image.asset("assets/images/icon_home_selected.png",
width: 32.r, height: 32.r), // 选中状态的图标
icon: Image.asset("assets/images/icon_home_grey.png",
width: 32.r, height: 32.r))); // 未选中状态的图标
// 添加热点项目
items.add(BottomNavigationBarItem(
label: "热点",
activeIcon: Image.asset("assets/images/icon_hot_key_selected.png",
width: 32.r, height: 32.r),
icon: Image.asset("assets/images/icon_hot_key_grey.png",
width: 32.r, height: 32.r)));
// 添加体系项目
items.add(BottomNavigationBarItem(
label: "体系",
activeIcon: Image.asset("assets/images/icon_knowledge_selected.png",
width: 32.r, height: 32.r),
icon: Image.asset("assets/images/icon_knowledge_grey.png",
width: 32.r, height: 32.r)));
// 添加我的项目
items.add(BottomNavigationBarItem(
label: "我的",
activeIcon: Image.asset("assets/images/icon_personal_selected.png",
width: 32.r, height: 32.r),
icon: Image.asset("assets/images/icon_personal_grey.png",
width: 32.r, height: 32.r)));
return items; // 返回项目列表
}
}
hot_key_page.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class HotKeyPage extends StatefulWidget {
@override
State createState() {
return _HotKeyPageState();
}
}
class _HotKeyPageState extends State<HotKeyPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Text("hotKey"),
),
),
);
}
}
全部评论 (0)
还没有任何评论哟~