如何在颤动中剪辑标签栏容器的边缘？

Question

我的屏幕底部有一个容器，它有一个 BottomNavigationBar。我希望容器获得我的背景颜色。即使在添加 CLipRRect 之后，它也没有得到纠正。我还尝试使容器透明，但它显示了一个错误，我无法为容器分配颜色并给它一个 boxDecoration。我希望多余的白色部分合并到我的背景中。

//已编辑

如何去除背景中的阴影？

Widget _bottomNavigationBar(int selectedIndex) => ClipRect(
    child: Container(
        height: 80,
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(52.0)),
          boxShadow: <BoxShadow>[
            BoxShadow(
                color: Colors.grey.withOpacity(0.3),
                offset: const Offset(0.0, 0.0),
                blurRadius: 52.0),
          ],
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(52.0),
              topRight: Radius.circular(52.0)),
          child: BottomNavigationBar(
            selectedItemColor: Color(0xFFFE524B),
            unselectedItemColor: Color(0xFFFF8C3B),
            onTap: (int index) => setState(() => _selectedIndex = index),
            currentIndex: selectedIndex,
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                  icon: Icon(
                    Entypo.home,
                    size: 30,
                  ),
                  title: Text('')),
              BottomNavigationBarItem(
                  icon: Icon(
                    Entypo.game_controller,
                    size: 30,
                  ),
                  title: Text('[![enter image description here][1]][1]')),
              BottomNavigationBarItem(
                  icon: Icon(
                    Entypo.wallet,
                    size: 30,
                  ),
                  title: Text('')),
            ],
          ),
        )),
  );

Answer 1

这其实不是底部导航栏的问题。您需要将父 Scaffold 小部件的“extendBody”设置为“true”。这会将脚手架主体内容一直延伸到屏幕底部！

Scaffold(
  extendBody: true,
  bottomNavigationBar: _bottomNavigationBar(selectedIndex),
);