使用GeometryReader绘制形状

时间:2020-04-15 00:12:41

标签: swift swiftui

我能够做到这一点: enter image description here

GeometryReader { geometry in
        Capsule()
            .foregroundColor(.yellow)
            .frame(width: geometry.size.width * 1.7)
            .offset(x: geometry.size.width * -0.1 , y: geometry.size.height * -0.9)
    }

但是我需要这样的东西:

enter image description here

我该如何实现?

谢谢

1 个答案:

答案 0 :(得分:3)

在SwiftUI停止让视图变大之前,视图似乎有一个最大宽度;胶囊/圆形形状似乎碰到了这一点,这使您无法增加绿色形状的大小。

您可以尝试自定义路径:

   struct ArcShape : Shape {
    let geometry: GeometryProxy
    func path(in rect: CGRect) -> Path {
        var p = Path()
        let center = CGPoint(x: 200, y: 100)
        p.addArc(center: center, radius:  geometry.size.width * 3, startAngle: .degrees(35), endAngle: .degrees(140), clockwise: false)
        return p
        }
    }
    struct ExampleView: View {
        var body: some View {
            NavigationView {
                GeometryReader { geometry in
        ZStack(alignment: .leading) {
            Color.white
                .edgesIgnoringSafeArea(.all)
                ArcShape(geometry: geometry)
                    .offset(x:  geometry.size.width * -0.3, y:  geometry.size.height * -1.45)
                    .foregroundColor(.green)
            VStack(alignment: .leading) {
                Section{
                    Text("Bold ").font(.system(size: 18, weight: .bold))
                        +
                        Text("light").font(.system(size: 18, weight: .light))
                }
                Section{
                    Text("Monday 27 Apr").font(.system(size: 27, weight: .light))
                }
                Spacer()
            }.padding(.horizontal)
            }
        }
        .navigationBarTitle("", displayMode: .inline)
                .navigationBarHidden(true)
        }
        }
     }

enter image description here