Flutter：自定义底部导航栏切割半径

Question

我想像设计中一样从自定义底部导航栏切割半径部分：

但代码的工作原理是这样的：

这是我的代码：

  // home_page.dart //
  bottomNavigationBar: CustomBottomNavigationBar(),

  // custom_bnb.dart //
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: _buildBoxDecoration,
      child: ClipRRect(
        borderRadius: AppBorderRadius.bottomBarRadius,
        child: Container(
          height: 80,
          decoration: _buildBoxDecoration,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              BottomBarItem(iconData: AppIcons.location, title: AppStrings.location),
              BottomBarItem(iconData: AppIcons.home, title: AppStrings.homePage),
              BottomBarItem(iconData: AppIcons.settings, title: AppStrings.settings),
            ],
          ),
        ),
      ),
    );
  }

BoxDecoration get _buildBoxDecoration =>
      BoxDecoration(color: Theme.of(context).cardColor, borderRadius: AppBorderRadius.bottomBarRadius, boxShadow: [AppBoxShadow.materialShadow]);

// app_border_radius.dart //
static BorderRadius get bottomBarRadius => BorderRadius.vertical(top: Radius.circular(50));

我尝试了所有容器中的 ClipBehavior 属性

我怎么解决这个问题？

谢谢。

Answer 1

对于 BottomNavigationBar ：您可以将 Scaffold 的extendBody属性设置为true

Flutter的extendBody属性

对于 AppBar：您可以将 Scaffold 的extendBodyBehindAppBar属性设置为true

Flutter的extendBodyBehindAppBar属性