时间戳

首页 > 解决方案 > 如何在颤动的底部导航栏中垂直和水平地在中心添加一个按钮？

flutter - 如何在颤动的底部导航栏中垂直和水平地在中心添加一个按钮？

问题描述

我尝试了很多不同的方法并在网上寻找解决方案，但找不到任何解决方案。有人可以帮我解决这个问题吗？我希望我的按钮位于底部导航栏的中间，如图 1 所示

按钮就在中间，这就是我想要的

这是一个浮动操作按钮，但是我不能把它放在我想要的地方

标签： flutterflutter-bottomnavigation

解决方案

我要做的是用BottomNavigationBarItem删除/替换FAB（浮动操作按钮）并将其放在BottomNavigationBar的中心并为其创建样式

这是一个例子：

    bottomNavigationBar: BottomNavigationBar(
    onTap: _selectTab,
    showSelectedLabels: false,
    showUnselectedLabels: false,
    backgroundColor: Theme.of(context).primaryColor,
    selectedItemColor: Theme.of(context).accentColor,
    unselectedItemColor: Colors.black,
    currentIndex: _selectedScreenIndex,
    //type: BottomNavigationBarType.shifting,
    items: [
      BottomNavigationBarItem(
        icon: Icon(
          Icons.category,
        ),
        label: 'Categories',
      ),
      BottomNavigationBarItem(
        icon: Container(
          decoration: BoxDecoration(
            color: Colors.yellow,
            shape: BoxShape.circle,
          ),
          child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: IconButton(
                onPressed: () {},
                icon: Icon(
                  Icons.add,
                ),
                iconSize: 40,
              )
              // Icon(
              //   Icons.add,
              // ),
              ),
        ),
        label: 'Add',
      ),
      BottomNavigationBarItem(
        icon: Icon(
          Icons.star,
        ),
        label: 'Favorites',
      ),
    ],
  ),

底部导航还有这个替代选项https://pub.dev/packages/convex_bottom_bar

推荐阅读