固定的底部导航栏为特定的网页-Flutter

ewm0tg9j  于 2023-03-31  发布在  Flutter
关注(0)|答案(1)|浏览(177)

我的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;
      });
    }
  }
}
oxosxuxt

oxosxuxt1#

你有多种选择。我建议其中一个使用PageView。
步骤1:在HomePage类中添加静态页面控制器

class HomePage extends StatefulWidget {

 static final pageController = PageController(); // add this

  @override
  _HomePageState createState() => _HomePageState();
}

第2步:在_HomePageState类的Scaffold主体中添加PageView

body: PageView(
          physics: const NeverScrollableScrollPhysics(),
          controller: HomePage.pageController,
          children: pages,
        ),

第三步:更新页面更改逻辑,使用pagecontroller当你想更改页面时,你可以在应用程序的任何地方使用HomePage.pageController

HomePage.pageController.jumpToPage(index);

第4步:重要你需要监听页面的变化并更新你的底部导航栏状态,也就是说如果你没有点击底部导航栏就改变了页面,它不会更新索引,但是页面会改变。所以在你使用底部导航栏的地方添加一个监听器。

@override
  void initState() {
    super.initState();

    HomePage.pageController.addListener(() {
      final page = HomePage.pageController.page;

      // to reduce the number of rebuild
      if (!(page != null && page > 0 && page < 1)) setState(() {});
    });
  }

相关问题