如何在 flutter 中剪裁标签栏容器的边缘？

Question

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

//已编辑

如何去掉背景中的阴影？

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),
);

如何在 flutter 中剪裁标签栏容器的边缘？

How do I clip the edges of my tab bar container in flutter?

user-interface

user-experience

tabbar

dart

flutter