如何在Dart Flutter中实现容器内凹曲线的底部导航栏？

下面给你三种实用的实现方案，都是前端常用方法，按需选择：

方案1：CSS Clip-path 自定义路径 #

直接用clip-path属性定义带内凹的路径，代码简洁，适合简单弧形内凹的场景。

示例代码（实现底部中间内凹的导航栏）：

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #ffffff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  /* 自定义内凹路径：底部中间向内凹出弧形 */
  clip-path: path('M0,0 L100%,0 L100%,60 C50%,60 50%,40 50%,40 L0,60 Z');
}

你可以调整path里的坐标值：50%是内凹的横向中心位置，60是导航栏高度，40是内凹的深度，数值越大内凹越明显。

方案2：SVG 背景实现 #

用SVG绘制带内凹的形状作为导航栏背景，兼容性更好，能实现更复杂的曲线效果。

示例代码：

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  /* 内嵌SVG作为背景，repeat-x确保铺满宽度 */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M0,0 L100,0 L100,60 Q50,40 0,60 Z' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x;
  background-size: 100% 100%;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

SVG里的Q50,40是二次贝塞尔曲线的控制点，修改50,40这组坐标就能调整内凹的弧度和深度，fill值要和导航栏的背景色一致。

方案3：伪元素叠加法 #

通过叠加元素模拟内凹效果，最直观易懂，适合只需要简单半圆内凹的场景。

示例代码：

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #ffffff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* 确保伪元素超出部分被裁剪 */
}

.bottom-nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* 居中 */
  width: 80px; /* 内凹的宽度 */
  height: 40px; /* 内凹的深度 */
  background: #f5f5f5; /* 这里要设置为页面的主体背景色 */
  border-radius: 50% 50% 0 0; /* 做成上半圆 */
}

原理是用和页面背景色一致的上半圆伪元素覆盖在导航栏底部中间，视觉上就形成了内凹的效果，调整width和height就能改变内凹的大小。

内容的提问来源于stack exchange，提问作者Azmat Ullah