flutter 当我在底部栏中添加另一个项目时,图标和文本变为白色

mm9b1k5b  于 2022-11-25  发布在  Flutter
关注(0)|答案(2)|浏览(115)

我正在使用flutter模板的底部栏persistent bottombar,但是当我开始在底部栏中添加项目时,图标和文本变成了白色。
正如你在这里看到的,我添加了一个新的tab4相比,原来的代码。如果你试图把它带回到只有三个标签的颜色会回去。

class HomePage extends StatelessWidget {
        final _tab1navigatorKey = GlobalKey<NavigatorState>();
        final _tab2navigatorKey = GlobalKey<NavigatorState>();
        final _tab3navigatorKey = GlobalKey<NavigatorState>();
        final _tab4navigatorKey = GlobalKey<NavigatorState>();

        HomePage({Key? key}) : super(key: key);

        @override
        Widget build(BuildContext context) {
          return PersistentBottomBarScaffold(
            items: [
              PersistentTabItem(
                tab: const TabPage1(),
                icon: Icons.home,
                title: 'Home',
                navigatorkey: _tab1navigatorKey,
              ),
              PersistentTabItem(
                tab: const TabPage2(),
                icon: Icons.search,
                title: 'Search',
                navigatorkey: _tab2navigatorKey,
              ),
              PersistentTabItem(
                tab: const TabPage3(),
                icon: Icons.person,
                title: 'Profile',
                navigatorkey: _tab3navigatorKey,
              ),
              PersistentTabItem(
                tab: const TabPage4(),
                icon: Icons.person,
                title: 'Profile',
                navigatorkey: _tab4navigatorKey,
              ),
            ],
          );
        }
      }

      class TabPage1 extends StatelessWidget {
        const TabPage1({Key? key}) : super(key: key);

        @override
        Widget build(BuildContext context) {
          return Scaffold(
            appBar: AppBar(title: const Text('Tab 1')),
          );
        }
      }

      class TabPage2 extends StatelessWidget {
        const TabPage2({Key? key}) : super(key: key);

        @override
        Widget build(BuildContext context) {
          return Scaffold();
        }
      }

      class TabPage3 extends StatelessWidget {
        const TabPage3({Key? key}) : super(key: key);

        @override
        Widget build(BuildContext context) {
          return Scaffold();
        }
      }

      class TabPage4 extends StatelessWidget {
        const TabPage4({Key? key}) : super(key: key);

        @override
        Widget build(BuildContext context) {
          return Scaffold();
        }
      }

      class PersistentBottomBarScaffold extends StatefulWidget {
        /// pass the required items for the tabs and BottomNavigationBar
        final List<PersistentTabItem> items;

        const PersistentBottomBarScaffold({Key? key, required this.items})
            : super(key: key);

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

      class _PersistentBottomBarScaffoldState
          extends State<PersistentBottomBarScaffold> {
        int _selectedTab = 0;

        @override
        Widget build(BuildContext context) {
          return WillPopScope(
            onWillPop: () async {
              /// Check if curent tab can be popped
              if (widget.items[_selectedTab].navigatorkey?.currentState?.canPop() ??
                  false) {
                widget.items[_selectedTab].navigatorkey?.currentState?.pop();
                return false;
              } else {
                // if current tab can't be popped then use the root navigator
                return true;
              }
            },
            child: Scaffold(
              /// Using indexedStack to maintain the order of the tabs and the state of the
              /// previously opened tab
              body: IndexedStack(
                index: _selectedTab,
                children: widget.items
                    .map((page) => Navigator(
                          /// Each tab is wrapped in a Navigator so that naigation in
                          /// one tab can be independent of the other tabs
                          key: page.navigatorkey,
                          onGenerateInitialRoutes: (navigator, initialRoute) {
                            return [
                              MaterialPageRoute(builder: (context) => page.tab)
                            ];
                          },
                        ))
                    .toList(),
              ),

              /// Define the persistent bottom bar
              bottomNavigationBar: BottomNavigationBar(
                currentIndex: _selectedTab,
                onTap: (index) {
                  setState(() {
                    _selectedTab = index;
                  });
                },
                items: widget.items
                    .map((item) => BottomNavigationBarItem(
                        icon: Icon(item.icon), label: item.title))
                    .toList(),
              ),
            ),
          );
        }
      }

      /// Model class that holds the tab info for the [PersistentBottomBarScaffold]
      class PersistentTabItem {
        final Widget tab;
        final GlobalKey<NavigatorState>? navigatorkey;
        final String title;
        final IconData icon;

        PersistentTabItem(
            {required this.tab,
            this.navigatorkey,
            required this.title,
            required this.icon});
      }
fcwjkofz

fcwjkofz1#

您能提供一段代码吗?查看持久的底部栏sample code,我的第一个假设是您可能需要为selectedItemColorunselectedItemColor参数分配颜色:

bottomNavigationBar: BottomNavigationBar(
          currentIndex: _selectedIndex,
          selectedItemColor: const Color(0xff6200ee),
          unselectedItemColor: const Color(0xff757575),
          type: _bottomNavType,
          onTap: (index) {
            setState(() {
              _selectedIndex = index;
            });
          },
          items: _navBarItems),
    );
ru9i0ody

ru9i0ody2#

这就是你所需要的一切,这就解决了问题!
底部导航栏:底部导航栏(
类型:底部导航栏类型。已修复,
项目://...,

相关问题