小编Muh*_*mer的帖子

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

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

设计

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

代码作品

这是我的代码:

  // 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));
Run Code Online (Sandbox Code Playgroud)

我尝试了所有容器中的 ClipBehavior …

cut radius flutter

3
推荐指数
1
解决办法
2332
查看次数

标签 统计

cut ×1

flutter ×1

radius ×1