颤动：如何向底部导航栏项目添加填充，使项目彼此远离

Question

好的，我有一个带有浮动操作按钮的底部导航栏，如下所示：

现在因为我有浮动操作按钮，所以我希望个人资料和主页图标离我的按钮远一些。如果我向图标添加填充，标签将不会随图标移动（很明显）。那么现在有人知道我该怎么做吗？更具体地说，这里是我希望底部栏看起来像的图像：

这是我的代码：

class MainNavigationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return WillPopScope(
      onWillPop: () {
       //TODO implement later
        
          
      },
      child: Consumer<MainNavigationNotifier>(
        builder: (_, notifier, __) => Scaffold(
          body: IndexedStack(index: notifier.tabIndex, children: [
            IndexedStack(
              index: notifier.pages[0].length - 1,
              children: notifier.pages[0],
            ),
            IndexedStack(
              index: notifier.pages[1].length - 1,
              children: notifier.pages[1],
            ),
           
          ]),
          floatingActionButtonLocation:
              FloatingActionButtonLocation.centerDocked,
          floatingActionButton: Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              padding: const EdgeInsets.only(bottom: 6.0),
              
              child:  FloatingActionButton(
                onPressed: () {},
               
                child: SvgPicture.asset(AppVectors.CREATE_ORDER),
              ),
            ),
          ),
          bottomNavigationBar: Container(
            decoration: BoxDecoration(
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: AppColors.LIGHT_GREY.withOpacity(0.4),
                  blurRadius: 4,
                ),
              ],
            ),
            child: BottomNavigationBar(
              type: BottomNavigationBarType.fixed,
              onTap: notifier.onTabTap(),
              elevation: 10,
              currentIndex: notifier.tabIndex,
              backgroundColor: Theme.of(context).bottomAppBarColor,

              selectedItemColor: Theme.of(context).primaryColor,
              unselectedItemColor: Theme.of(context).unselectedWidgetColor,
              unselectedFontSize: 14,
              items: [
                BottomNavigationBarItem(
                  icon: Padding(
                    padding: const EdgeInsets.only(bottom: 4.0),
                    child: SvgPicture.asset(
                      AppVectors.HOME,
                      height: 25,
                      color: Theme.of(context).unselectedWidgetColor,
                    ),
                  ),
                  label: AppStrings.HOME,
                  tooltip: "",
                  activeIcon: Padding(
                    padding: const EdgeInsets.only(bottom: 4.0),
                    child: SvgPicture.asset(
                      AppVectors.HOME,
                      height: 25,
                      color: Theme.of(context).primaryColor,
                    ),
                  ),
                ),

                  
                BottomNavigationBarItem(
                    activeIcon: Padding(
                      padding: const EdgeInsets.all(4.0),
                      child: SvgPicture.asset(
                        AppVectors.PROFILE,
                        height: 27,
                        width: 27,
                        color: Theme.of(context).primaryColor,
                      ),
                    ),
                    tooltip: "",
                    icon: Padding(
                      padding: const EdgeInsets.all(4.0),
                      child: SvgPicture.asset(
                        AppVectors.PROFILE,
                        height: 27,
                        width: 27,
                        color: Theme.of(context).unselectedWidgetColor,
                        //  color: Theme.of(context).focusColor,
                      ),
                    ),
                    label: AppStrings.PROFILE),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

这就是为什么我更喜欢自定义 BottomAppBar 作为底部导航栏的原因之一，它提供了更多的控制权。但是，您可以使用一个简单但不是很好的解决方案：在现有的两个之间添加第三个 BottomNavigationBarItem，带有空文本和不可见图标，如下所示：

BottomNavigationBarItem(
    label: "",
    icon: Visibility(visible: false, child: Icon(Icons.home))),

Answer 2

您可以对图标和活动图标使用 Column，并像这样向 Column.just 添加对齐

Align(
      alignment: Alignment.centerLeft,
      child: Padding(
      padding: const EdgeInsets.only(left: 8.0),
      child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      children: [Icon(Icons.people), Text('HOME')],
      ),
     ),
    ),

将showSelectedLabels: false, showUnselectedLabels: false,添加到底部导航栏以删除label.done 这是您可以看到的代码示例 this dartpad code

颤动：如何向底部导航栏项目添加填充，使项目彼此远离

flutter: how to add padding to bottom navigation bar items so the items stay farther away from each other

flutter

dart

floating-action-button

flutter-bottomnavigation