dart 带有FAB按钮的底部Flutter导航栏无法正常工作

dnph8jn4 于 2023-03-05 发布在 Flutter

关注(0)|答案(2)|浏览(197)

所以一开始我有一个简单的bottomNavBar来改变页面。我想做的是在中间添加一个FAB栏。

原始底部导航栏 *

bottomNavigationBar: BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    currentIndex: 0,
    backgroundColor: Color(0xFF0066EE),
    selectedItemColor: Colors.white,
    unselectedItemColor: Colors.white,
    items: const [
      BottomNavigationBarItem(label: 'Home', icon: Icon(Icons.home)),
      BottomNavigationBarItem(label: 'Diary', icon: Icon(Icons.book)),
      BottomNavigationBarItem(
          label: 'Plans', icon: Icon(Icons.spoke_rounded)),
      BottomNavigationBarItem(label: 'More', icon: Icon(Icons.more)),
    ],
    onTap: (index) {
      if (index == 1) {
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (BuildContext context) {
              final foodItemsModel =
                  Provider.of<FoodItemsModel>(context, listen: false);
              return MealPlanPage(mealList: foodItemsModel.foodItems);
            },
          ),
        );
      } else if (index == 2) {
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (BuildContext context) {
              return PlanPage();
            },
          ),
        );
      }
    },
  ),

所需的底部导航栏 *

我尝试包含FAB栏，包括将现有的bottomNavBar Package 在bottomAppBar中，然后添加floatingActionButton，原因是我假设这是由BottomAppBar的高度大于bottomNavBar引起的。

floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: BottomAppBar(
    child: BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      currentIndex: 0,
      backgroundColor: Color(0xFF0066EE),
      selectedItemColor: Colors.white,
      unselectedItemColor: Colors.white,
      items: const [
        BottomNavigationBarItem(label: 'Home', icon: Icon(Icons.home)),
        BottomNavigationBarItem(label: 'Diary', icon: Icon(Icons.book)),
        BottomNavigationBarItem(
            label: 'Plans', icon: Icon(Icons.spoke_rounded)),
        BottomNavigationBarItem(label: 'More', icon: Icon(Icons.more)),
      ],
      onTap: (index) {
        if (index == 1) {
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (BuildContext context) {
                final foodItemsModel =
                    Provider.of<FoodItemsModel>(context, listen: false);
                return MealPlanPage(mealList: foodItemsModel.foodItems);
              },
            ),
          );
        } else if (index == 2) {
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (BuildContext context) {
                return PlanPage();
              },
            ),
          );
        }
      },
    ),
  ),

我尝试设置bottomAppBar的高度以匹配bottomNavBar的高度，但结果仍然是一团糟，FAB按钮放置不当。

floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: BottomAppBar(
    color: Color(0xFF0066EE),
    elevation: 0,
    shape: CircularNotchedRectangle(),
    child: SizedBox(
      height: kBottomNavigationBarHeight,
      child: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: 0,
        backgroundColor: Color(0xFF0066EE),
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.white,
        items: const [
          BottomNavigationBarItem(label: 'Home', icon: Icon(Icons.home)),
          BottomNavigationBarItem(label: 'Diary', icon: Icon(Icons.book)),
          BottomNavigationBarItem(
              label: 'Plans', icon: Icon(Icons.spoke_rounded)),
          BottomNavigationBarItem(label: 'More', icon: Icon(Icons.more)),
        ],
        onTap: (index) {
          if (index == 1) {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (BuildContext context) {
                  final foodItemsModel =
                      Provider.of<FoodItemsModel>(context, listen: false);
                  return MealPlanPage(mealList: foodItemsModel.foodItems);
                },
              ),
            );
          } else if (index == 2) {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (BuildContext context) {
                  return PlanPage();
                },
              ),
            );
          }
        },
      ),
    ),
  ),

dart

来源：https://stackoverflow.com/questions/75639668/flutter-bottomnavbar-with-fab-button-not-working-properly

2条答案

按热度按时间

agxfikkp1#

在android中没有问题。我认为你使用的是ios。当你有SafeArea时，如果你把bottom属性设置为false，就会发生这种情况。
或者，如果您没有SafeArea，请尝试将BottomAppBar的notchMargin属性设置为0。例如：

BottomAppBar(
    notchMargin: 0,
    color: Colors.black,
    child: BottomNavigationBar(
      backgroundColor: Colors.blue,
      type: BottomNavigationBarType.fixed,
      onTap: (v) {}, items: [
      BottomNavigationBarItem(icon: 
      Icon(Icons.baby_changing_station),label: ""),
      BottomNavigationBarItem(icon: Icon(Icons.ac_unit),label: ""),
    ]),
  ),`

赞(0）回复(0）举报 2023-03-05

pxiryf3j2#

检查您的主MaterialApp或Parent Widget，如果有任何margin或Padding集，因为否则您的代码应该工作.
工作代码：

return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bottom Navigation Bar Demo'),
        ),
        body: _pages[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          selectedFontSize: 14,
          unselectedFontSize: 14,
          currentIndex: _currentIndex,
          selectedItemColor: Colors.blue,
          unselectedItemColor: Colors.grey, 
          onTap: (int index) {
            setState(() {
              _currentIndex = index;
            });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              label: 'Search',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.headphones),
              label: 'Headphones',
            ),
          ],
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {},
        ),
      ),
    );

输出：

赞(0）回复(0）举报 2023-03-05

我来回答

dart 带有FAB按钮的底部Flutter导航栏无法正常工作

2条答案

相关问题

热门标签

最新问答