Flutter - 将图像添加到 BottomNavigationBarItem答案

【问题标题】：Flutter - Add Image to BottomNavigationBarItemFlutter - 将图像添加到 BottomNavigationBarItem
【发布时间】：2021-10-06 06:11:53
【问题描述】：

我需要将 Image 小部件或 Text 小部件添加到 BottomNavigationBarItem 之一，如下图所示。

但似乎所有图标占位符的宽度都相同，我不知道如何使中心“图标”（立即预订）更宽。

我正在尝试实现一个持久化的 Scaffold bottomNavigationBar，在我阅读的所有文章中，几乎都使用了 BottomNavigationBar 和 BottomNavigationBarItem

我得到了这个：

我的代码是：

Scaffold(
        backgroundColor: Colors.white,
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
                currentIndex: _selectedIndex,
                showSelectedLabels: false,
                showUnselectedLabels: false,
                items: [
                  BottomNavigationBarItem(
                    icon: Icon(
                          Feather.home,
                          color: kGoodLightGray,
                        ),
              title: Container(height: 0,),
              activeIcon: Icon(
                          Feather.home,
                          color: kGoodPurple,
                        ),
                      ),
                  BottomNavigationBarItem(
                    icon: Icon(
                      Feather.search,
                      color: kGoodLightGray,
                    ),
                    title: Container(height: 0,),
                    activeIcon: Icon(
                      Feather.search,
                      color: kGoodPurple,
                    ),
                  ),
                    BottomNavigationBarItem(
              icon: Text('Book Now', style: TextStyle(fontSize: 28),),
              title: Container(height: 0,),
                      activeIcon: Icon(
                FontAwesome.calendar,
                        color: kGoodPurple,
                      ),
                    ),
                    BottomNavigationBarItem(
                      icon: Icon(
                        EvilIcons.calendar,
                        color: kGoodLightGray,
                        size: 36,
                      ),
              title: Container(height: 0,),
                      activeIcon: Icon(
                        EvilIcons.calendar,
                        color: kGoodPurple,
                        size: 36,
                      ),
                    ),
                  BottomNavigationBarItem(
                    icon: Icon(
                      EvilIcons.user,
                      color: kGoodLightGray,
                      size: 36,
                    ),
                    title: Container(height: 0,),
                    activeIcon: Icon(
                      EvilIcons.user,
                      color: kGoodPurple,
                      size: 36,
                    ),
                  ),
                  ],
                  onTap: (index) {
                    setState(() {
                      _selectedIndex = index;
                    });
                  },
        ),
        body: Stack(
          children: [
            _buildOffstageNavigator(0),
            _buildOffstageNavigator(1),
            _buildOffstageNavigator(2),
          ],
        ),
      ),

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

虽然BottomNavigationBar 在您需要标准行为时是一个很棒的小部件，但在您的情况下，我会选择可以让您获得更多控制权的东西。您可以添加带有Row 小部件的BottomAppBar，而不是强迫它按照您想要的方式运行。您可以轻松扩展它以显示反映活动/非活动状态的不同图标。试试下面的简单代码，随心所欲地调整：

      bottomNavigationBar: BottomAppBar(
          child: Container(
              padding: const EdgeInsets.symmetric(vertical: 10.0),
              color: Colors.lightGreen[100],
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  IconButton(
                    icon: const Icon(Icons.person),
                    onPressed: () {},
                  ),
                  IconButton(
                    icon: const Icon(Icons.person),
                    onPressed: () {},
                  ),
                  ElevatedButton(
                    child: const Text('Book now'),
                    onPressed: () {},
                  ),
                  IconButton(
                    icon: const Icon(Icons.person),
                    onPressed: () {},
                  ),
                  IconButton(
                    icon: const Icon(Icons.person),
                    onPressed: () {},
                  ),
                ],
              ))),

【讨论】：

嗨彼得，我喜欢你的想法，但我无法在屏幕之间导航，我会尝试更多并告诉你。
例如，您可以使用 IndexedStack 并将 index 设置为带有 setState() 的 onPressed 方法中的适当值。这样，您还可以在选中时为 IconButtons 添加不同的样式。
当然你也可以使用Navigator类，例如popAndPushNamed。