我想像设计中一样从自定义底部导航栏切割半径部分:
但代码的工作原理是这样的:
这是我的代码:
// 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 …