带有自定义 BottomNavBar 和 FAB 的扩展主体无法正常工作

Question

我已经搜索过类似的问题，但没有找到任何问题。我制作了一个带有停靠 FAB 的自定义底部导航栏。据我了解，为了使 FAB 的凹口透明，我需要添加extendBody = true;到脚手架中，我就是这样做的。结果是，在四个导航栏图标中，只有一个显示透明凹口。代码和图片如下。图像显示第二个和第三个导航栏图标。

     Scaffold(
          drawerEnableOpenDragGesture: true,
          extendBody: true,
          appBar: AppBar(
            title: Text('Some text'),
          drawer: AppDrawer(),
          bottomNavigationBar: BottomAppBar(
            color: Colors.blue,
            shape: CircularNotchedRectangle(),
            notchMargin: 2.0,
            child: Container(
              height: MediaQuery.of(context).size.width * 0.15,
              child: Row(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(
                    flex: 4,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        IconButton(icon: Icon(Icons.account_box), // extendBody not working!
                          onPressed: () {
                            setState(() {
                              _selectedPageIndex = 0;
                            });
                          },
                        ),
                        IconButton(icon: Icon(Icons.account_box), // extendBody working!
                          onPressed: () {
                            setState(() {
                              _selectedPageIndex = 1;
                            });
                          },
                        ),
                      ],
                    ),
                  ),
                  Expanded(flex: 2, child: SizedBox()),
                  Expanded(
                    flex: 4,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        IconButton(icon: Icon(Icons.email), // extendBody not working!
                          onPressed: () {
                            setState(() {
                              _selectedPageIndex = 2;
                            });
                          },
                        ),
                        IconButton(
                          icon: Icon(Icons.email), // extendBody not working!
                          onPressed: () {
                            setState(() {
                              _selectedPageIndex = 3;
                            });
                          },
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
          body: _pages[_selectedPageIndex]['page'],
          floatingActionButton: FloatingActionButton(
            mini: true,
            onPressed: () {
              if (_selectedPageIndex == 0)
                Navigator.of(context).pushReplacementNamed(
                    Screen1.routeName);
              if (_selectedPageIndex == 1)
                Navigator.of(context).pushReplacementNamed(
                    Screen2.routeName);
              if (_selectedPageIndex == 2)
                Navigator.of(context).pushReplacementNamed(
                    Screen3.routeName);
              if (_selectedPageIndex == 3)
                Navigator.of(context).pushReplacementNamed(
                    Screen4.routeName);
            },
            child: _pages[_selectedPageIndex]['icon'],
            backgroundColor: Theme.of(context).accentColor,
          ),
        )

我缺少什么？谢谢你！

Answer 1

我解决了。extendBody: true,是正确的，但是孩子不能被包裹起来SafeArea。