Flutter 如何创建这种具有曲线背景的底部导航栏？

我已经尝试了一些包和堆栈与图像，但它不适合我。任何帮助都会很好

---

带有曲线的背景图像不起作用。

这对您有用吗

您应该能够使用自定义槽口形状来完成此操作：

类CustomNotchdShape扩展了NotchdShape{ const-customnotchdshape； @凌驾 路径getOuterPathRect主机，Rect来宾{ 最终x=math.minhost.width/20，host.height/3； 最终guestMargin=guest==null？0:1.0； 如果guest==null | |！host.overlapsguest{ guest=Rect.fromCenter 中心：Offsethost.width/2，host.top，宽度为0，高度为0； } num degToRadnum deg=>deg*math.pi/180.0； 返回路径 ..moveTohost.left，host.bottom …方贝塞尔托 host.left+x，host.bottom，host.left+x，host.bottom-x …lineTohost.left+x，host.top+x …quadraticBezierTohost.left+x，host.top，host.left+2*x，host.top …lineToguest.left，host.top …阿尔托 fromCenter矩形 中心：宾客中心， 宽度：guest.width+2*guestMargin， 高度：guest.width+2*guestMargin， degToRad180， degToRad-180， 错误的 …lineTohost.right-2*x，host.top …方贝塞尔托 host.right-x，host.top，host.right-x，host.top+x …lineTohost.right-x，host.bottom-x …quadraticBezierTohost.right-x，host.bottom，host.right，host.bottom 关 } } 然后，使用此自定义缺口形状作为底部AppBar的形状：

类MyBottomNavigationBar扩展了HookWidget{ @凌驾 小部件构建上下文上下文{ 最终_currentIndex=useState1； void navigateToint index=>\u currentIndex.value=index； bool activeint index=>\u currentIndex.value==index； 返回底部AppBar 颜色：Theme.ofcontext.primaryColor， 形状：定制凹口形状， 子：容器 身高：50， 孩子：填充 填充：常量边集。对称水平：20.0， 孩子：填充 填充：常量EdgeInsets.Symmetricholizontal:12.0， 孩子：排 mainAxisAlignment:mainAxisAlignment.spaceBetween， 儿童：[ 图标按钮 onPressed:=>navigateTo0， 图标：IconIcons.home\u， 颜色：active0？颜色。白色：颜色。黑色， , 图标按钮 按下时：=>navigateTo1， 图标：IconIcons.horizontal\u split\u轮廓， 颜色：active1？颜色。白色：颜色。黑色， , 衬料 填充：EdgeInsets.onlytop:24.0， 子：文本“新任务”， , 图标按钮 按下时：=>navigateTo2， 图标：IconIcons.access\u time\u概述， 颜色：active2？颜色。白色：颜色。黑色， , 图标按钮 按下时：=>navigateTo3， 图标：IconIcons.settings\u概述， 颜色：active3？颜色。白色：颜色。黑色， , ], , , , , ; } } 完整源代码 为便于复制粘贴

导入'dart:math'作为数学； 进口“包装：颤振/材料.省道”； 进口“包装：颤振钩/颤振钩.省道”； 真空总管{ runApp 材料聚丙烯 debugShowCheckedModeBanner:false， 主题：主题数据 脚手架背景颜色：颜色0xFFD3CCCA， primaryColor:Color0xff86736c， accentColor:Color0xff76504e， , 标题：“颤振演示”， 家：脚手架 正文：MyContent， bottomNavigationBar:MyBottomNavigationBar， 浮动操作按钮：浮动操作按钮 米尼：是的， onPressed:=>打印“添加新任务…”， 子项：IconIcons.add， , 浮动操作按钮位置： FloatingActionButtonLocation.miniCenterDocked， , , ; } 类MyContent扩展了无状态小部件{ @凌驾 小部件构建上下文上下文{ returncenterchild:Text“这对您有用吗？”； } } 类MyBottomNavigationBar扩展了HookWidget{ @凌驾 小部件构建上下文上下文{ 最终_currentIndex=useState1； void navigateToint index=>\u currentIndex.value=index； bool activeint index=>\u currentIndex.value==index； 返回底部AppBar 颜色：Theme.ofcontext.primaryColor， 形状：定制凹口形状， 子：容器 身高：50， 孩子：填充 填充：常量边集。对称水平：20.0， 孩子：填充 填充：常量EdgeInsets.Symmetricholizontal:12.0， 孩子：排 男主角 t:MainAxisAlignment.spaceBetween， 儿童：[ 图标按钮 onPressed:=>navigateTo0， 图标：IconIcons.home\u， 颜色：active0？颜色。白色：颜色。黑色， , 图标按钮 按下时：=>navigateTo1， 图标：IconIcons.horizontal\u split\u轮廓， 颜色：active1？颜色。白色：颜色。黑色， , 衬料 填充：EdgeInsets.onlytop:24.0， 子：文本“新任务”， , 图标按钮 按下时：=>navigateTo2， 图标：IconIcons.access\u time\u概述， 颜色：active2？颜色。白色：颜色。黑色， , 图标按钮 按下时：=>navigateTo3， 图标：IconIcons.settings\u概述， 颜色：active3？颜色。白色：颜色。黑色， , ], , , , , ; } } 类CustomNotchdShape扩展了NotchdShape{ const-customnotchdshape； @凌驾 路径getOuterPathRect主机，Rect来宾{ 最终x=math.minhost.width/20，host.height/3； 最终guestMargin=guest==null？0:1.0； 如果guest==null | |！host.overlapsguest{ guest=Rect.fromCenter 中心：Offsethost.width/2，host.top，宽度为0，高度为0； } num degToRadnum deg=>deg*math.pi/180.0； 返回路径 ..moveTohost.left，host.bottom …方贝塞尔托 host.left+x，host.bottom，host.left+x，host.bottom-x …lineTohost.left+x，host.top+x …quadraticBezierTohost.left+x，host.top，host.left+2*x，host.top …lineToguest.left，host.top …阿尔托 fromCenter矩形 中心：宾客中心， 宽度：guest.width+2*guestMargin， 高度：guest.width+2*guestMargin， degToRad180， degToRad-180， 错误的 …lineTohost.right-2*x，host.top …方贝塞尔托 host.right-x，host.top，host.right-x，host.top+x …lineTohost.right-x，host.bottom-x …quadraticBezierTohost.right-x，host.bottom，host.right，host.bottom 关 } }

---

这回答了你的问题吗@阿姆斯特朗试过了。根据我的功能，没有用。有什么区别吗？@armstrong无法做出左右两侧的曲线。。。