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

对于底部导航栏：您可以将脚手架的 extendBody 属性设置为 true

Flutter extendBody property

对于应用栏：您可以将脚手架的 extendBodyBehindAppBar 属性设置为 true

Flutter extendBodyBehindAppBar property

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

Flutter: Custom Bottom Navigation Bar Cut Radius

flutter

cut

radius