如何在具有默认安全区域的 iphone 中居中对齐底部导航栏项目？

Question

我发现在某些具有默认安全区域的 iphone 中，底部导航栏项目未正确居中对齐。例如：在此图片中，项目未正确居中对齐。如何正确对齐这些项目？

但是这里的项目是正确对齐的。

.

我的代码是：

Scaffold(
          body: _children[watch(tabviewProvider).currentBottomNavIndex],
          bottomNavigationBar: Container(
            height: watch(tabviewProvider).isBottomTabbarHide ? 0.0 : (SizeConfig.blockSizeVertical)*10, //94
            decoration: BoxDecoration(
              color: Colors.orange,//Todo:remove
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: Color(0xffE5E5E5),
                  blurRadius: 5,
                ),
              ],
            ),
            child: Align(
              alignment: Alignment.center,
              child: BottomNavigationBar(
                backgroundColor: Colors.grey, //Todo:remove
               // backgroundColor: Color(0xffF7F3ED),
                selectedFontSize: 0,
                showSelectedLabels: false,
                showUnselectedLabels: false,
                type: BottomNavigationBarType.fixed,
                key: bottomNavGlobalKey,
                onTap: onTabTapped,
                currentIndex: watch(tabviewProvider).currentBottomNavIndex,
                items: [
                  BottomNavigationBarItem(
                    activeIcon: BottmNavTabButton(
                      isActive: true,
                      imgPath: 'assets/icons/icon_timeline_pink.svg',
                      lableText: 'A',
                    ),
                    label: '',
                    icon: BottmNavTabButton(
                      isActive: false,
                      imgPath: 'assets/icons/icon_timeline_gray.svg',
                      lableText: 'A',
                    ),
                  ),
                  BottomNavigationBarItem(
                    activeIcon: BottmNavTabButton(
                      isActive: true,
                      imgPath: 'assets/icons/icon_knowledge_pink.svg',
                      lableText: 'B',
                    ),
                    label: '',
                    icon: BottmNavTabButton(
                      isActive: false,
                      imgPath: 'assets/icons/icon_knowledge_gray.svg',
                      lableText: 'B',
                    ),
                  ),

                  BottomNavigationBarItem(
                    activeIcon: BottmNavTabButton(
                      isActive: true,
                      imgPath: 'assets/icons/icon_offer_pink.svg',
                      lableText: 'C',
                    ),
                    label: '',
                    icon: BottmNavTabButton(
                      isActive: false,
                      imgPath: 'assets/icons/icon_offer_gray.svg',
                      lableText: 'C',
                    ),
                  )
                ],
              ),
            ),
          ),
        );

Answer 1

为了实现您想要的行为，我会将 SafeArea 底部属性设置为 false 并用 Padding() 包装您的每个图标

SafeArea(
  bottom: false,
  child: …,
)

Padding(
  top: value, 
  bottom: value, 
  child : BottmNavTabButton(…),
)