我的Flutter移动的应用有6个页面,分别是EmploymentListPage、ClaimsPage、NotificationsPage、SettingsPage、EmploymentDetailsPage和EmploymentClaimsPage。
EmploymentListPage、ClaimsPage、NotificationsPage和SettingsPage可以通过底部导航栏导航,但EmploymentDetailsPage可以通过EmploymentListPage导航,EmploymentClaimsPage可以通过EmploymentDetailsPage导航。
此时,底部导航栏已修复,可查看EmploymentListPage、ClaimsPage、NotificationsPage和SettingsPage。
但我想显示底部导航栏的其他两个网页也。所以我能做什么呢?
这是homepage.dart的代码,它有一个底部的导航栏。在这个代码文件中,我在Scaffold小部件的主体部分调用了EmployementListPage,ClaimsPage,NotificationsPage和SettingsPage。
import 'package:apex_salary_packaging/screens/claimsPage.dart';
import 'package:apex_salary_packaging/screens/employmentListPage.dart';
import 'package:apex_salary_packaging/screens/notificationPage.dart';
import 'package:apex_salary_packaging/screens/settingsPage.dart';
import 'package:apex_salary_packaging/services/pushNotificationService.dart';
import 'package:apex_salary_packaging/services/serviceLocator.dart';
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with WidgetsBindingObserver {
final PushNotificationService? pushNotificationService =
locator<PushNotificationService>();
int index = 0;
String errorMessage = "";
bool? showErrorMessage = false;
int pushNotificationCount = 0;
int selectedIndex = 0;
var pages = <Widget>[
EmploymentListPage(),
ClaimsPage(),
NotificationsPage(),
SettingsPage()
];
@override
void initState() {
super.initState();
onLoadUnAcknowledgedCount();
WidgetsBinding.instance!.addObserver(this);
pushNotificationService!.onCountChange.listen(onNotificationCountChange);
pushNotificationService!.onSelectedPageChange.listen(onPageChange);
pushNotificationService!.checkForInitialMessage();
}
@override
void didChangeAppLifecycleState(AppLifecycleState state) {
super.didChangeAppLifecycleState(state);
if (state == AppLifecycleState.resumed) {
onLoadUnAcknowledgedCount();
}
}
void dispose() {
WidgetsBinding.instance!.removeObserver(this);
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: pages.elementAt(selectedIndex),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: selectedIndex,
onTap: onItemTapped,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
activeIcon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(
Icons.add_circle_rounded,
),
activeIcon: Icon(Icons.add_circle_rounded),
label: 'Claims',
),
BottomNavigationBarItem(
label: 'Notifications',
icon: Stack(
children: <Widget>[
Icon(Icons.notifications),
Visibility(
visible: pushNotificationCount > 0,
child: Positioned(
right: 0,
child: Container(
padding: EdgeInsets.all(1),
decoration: BoxDecoration(
color: Colors.red[900],
borderRadius: BorderRadius.circular(6),
),
constraints: BoxConstraints(
minWidth: 12,
minHeight: 12,
),
child: Text(
pushNotificationCount.toString(),
style: TextStyle(
color: Colors.white,
fontSize: 10,
),
textAlign: TextAlign.center,
),
),
),
)
],
),
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
),
],
),
);
}
onItemTapped(index) {
setState(() {
this.selectedIndex = index;
});
}
onNotificationCountChange(dynamic eventData) {
this.onLoadUnAcknowledgedCount();
}
onPageChange(event) {
if (this.mounted) {
setState(() {
selectedIndex = event;
});
}
}
onLoadUnAcknowledgedCount() async {
if (this.mounted) {
int count = await pushNotificationService!.onLoadNotificationCount();
setState(() {
pushNotificationCount = count;
});
}
}
}
1条答案
按热度按时间oxosxuxt1#
你有多种选择。我建议其中一个使用PageView。
步骤1:在HomePage类中添加静态页面控制器
第2步:在_HomePageState类的Scaffold主体中添加PageView
第三步:更新页面更改逻辑,使用pagecontroller当你想更改页面时,你可以在应用程序的任何地方使用HomePage.pageController
第4步:重要你需要监听页面的变化并更新你的底部导航栏状态,也就是说如果你没有点击底部导航栏就改变了页面,它不会更新索引,但是页面会改变。所以在你使用底部导航栏的地方添加一个监听器。