SwiftUI中如何实现带平滑弯角过渡的自定义底部TabBar

看起来你已经把自定义TabBar的基础形状搭得差不多了！要实现曲线和直边之间那种自然的平滑小弯角过渡，我们只需要调整路径的绘制逻辑，把原来生硬的直角连接改成带弧度的平缓过渡就行。

我帮你调整了Path代码，重点优化了曲线和底部直边的衔接处，让整体线条更流畅自然：

struct TabbarShape: View {
    
    //MARK: - VARIABLES -
    
    let width = UIScreen.main.bounds.width
    let height: CGFloat = 75
    let curvedRadius: CGFloat = 37
    let centerX = UIScreen.main.bounds.width / 2
    // 控制过渡弯角的平滑程度，可按需调整
    let transitionRadius: CGFloat = 8
    
    //MARK: - VIEWS -
    var body: some View {
        Path { path in
            let width = self.width
            let height = self.height
            let centerX = self.centerX
            let curveRadius = self.curvedRadius
            let transitionRadius = self.transitionRadius
            
            // 从左上角开始绘制路径
            path.move(to: CGPoint(x: 0, y: 0))
            
            // 画到右上角
            path.addLine(to: CGPoint(x: width, y: 0))
            
            // 画到右下角
            path.addLine(to: CGPoint(x: width, y: height))
            
            // 从右下角画到右侧过渡起始点
            path.addLine(to: CGPoint(x: centerX + curveRadius + 25, y: height))
            
            // 右侧平滑过渡弯角：用二次贝塞尔曲线实现自然衔接
            path.addQuadCurve(
                to: CGPoint(x: centerX + curveRadius + 10, y: height - transitionRadius),
                control: CGPoint(x: centerX + curveRadius + 20, y: height - transitionRadius/2)
            )
            
            // 主曲线挖空部分
            path.addCurve(
                to: CGPoint(x: centerX - curveRadius - 10, y: height - transitionRadius),
                control1: CGPoint(x: centerX + curveRadius, y: height - 60),
                control2: CGPoint(x: centerX - curveRadius, y: height - 60)
            )
            
            // 左侧平滑过渡弯角
            path.addQuadCurve(
                to: CGPoint(x: centerX - curveRadius - 25, y: height),
                control: CGPoint(x: centerX - curveRadius - 20, y: height - transitionRadius/2)
            )
            
            // 从左侧过渡点画到左下角
            path.addLine(to: CGPoint(x: 0, y: height))
            
            // 闭合路径回到起点
            path.addLine(to: CGPoint(x: 0, y: 0))
        }
        .fill(Color.black)
        // 增加阴影提升立体感，更贴近参考效果
        .shadow(color: .gray.opacity(0.3), radius: 10, x: 0, y: -2)
    }
}

关键修改点说明： #

• 新增transitionRadius变量，用来灵活控制过渡弯角的大小，数值越大弯角越明显
• 在主曲线与底部直边的衔接处，用addQuadCurve添加了小弧度过渡段，替代原先生硬的直角连接
• 对应调整了主曲线的端点位置，确保和过渡弯角自然衔接
• 增加了阴影效果，让TabBar更有层次感，贴近参考图的视觉表现

你想要的目标效果参考：
自定义TabBar目标效果

你可以根据自己的UI设计，灵活调整curveRadius、transitionRadius还有控制点的坐标，直到调出最满意的平滑度~

备注：内容来源于stack exchange，提问作者Telha Wasim