带有圆形底部边缘和项目的 SwiftUI 自定义导航栏

Question

我已经在Stackoverflow上搜索了一个解决方案，但没有找到解决方案。

标题中描述的期望目标是：

我们所看到的所需颜色也是渐变。

我也想知道，每当我想显示它时，是否也可以在导航栏的右侧显示图像（有时我想显示一个图像，有时我没有）

我知道我必须使用Uikit才能创建类似的东西，但我还没有找到一个解决方案，可以使导航栏的底部边缘变为圆形。

Answer 1

无需使用UIKIT，因为您可以使用Path Drawing使用Anative Swiftui来制作这样的视图，并保留注释以隐藏默认的导航视图标题，并查看和使用下面的代码，您也可以根据您的需求自定义

  struct ContentView: View {


   var body: some View {
    ZStack {
        
        CustomShapeNav().fill(
            LinearGradient(gradient: Gradient(colors: [.green, .blue]), 
        startPoint: .top, endPoint: .bottom)
            // use gradient color here
        ).shadow(color: Color(#colorLiteral(red: 0.4745098039, green: 
        0.4745098039, blue: 0.4745098039, alpha: 1)), radius: 
        15).ignoresSafeArea()
        Button {
            print("Button was tapped")
        } label: {
            Image(systemName: "chevron.backward")
                .padding()
                .foregroundColor(.black)
          }.position(x: 40, y: 40)
         }.frame(width: 700, height: 300, alignment: .center)
         }
         }


 //Define the custom navigation using path drawing and make struct confirming to Shape 
struct CustomShapeNav: Shape {
   func path(in rect: CGRect) -> Path {
    Path { path in
        path.move(to: CGPoint(x: 0, y: 0)) // start point from 0 x-axis & 0 y-axis
        path.addLine(to: CGPoint(x: rect.maxX , y: 0)) // draw line max x-axis & 0 y-axis
        path.addLine(to: CGPoint(x: rect.maxX, y: 50)) // draw line max x-axis & 50 y-axis
        path.addLine(to: CGPoint(x: 0, y: 50))  // draw line 0 x-axis & 50 y-axis
        path.move(to: CGPoint(x: 0, y: 50)) // make the start point 0,50 instead of 0,0
        path.addQuadCurve(to: CGPoint(x: 90, y: 90), control: CGPoint(x: 
        0, y: 85)) // add curve to point 90,90 and make the point of curve 0,85
        path.addLine(to: CGPoint(x: rect.maxX - 90, y: 90))  // draw line -90 x-axis & 90 y-axis
        path.addQuadCurve(to: CGPoint(x: rect.maxX, y: 50), control: CGPoint(x: rect.maxX, y: 85))
        // add curve to point max x-axis and 50 and make the point of curve max x-axis and 85
        
        }
        }
        }

视图导航栏将就像该视图