Flutter中BottomNavigationBar+IndexedStack实现底部导航栏

原创

已于 2024-08-31 21:54:08 修改 · 666 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

于 2024-08-31 19:16:19 首次发布

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/per