首页 > 解决方案 > 使用 GeometryReader 绘制形状

问题描述

我能够做到这一点: 在此处输入图像描述

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)
    }

但我需要这样的东西:

在此处输入图像描述

我怎样才能做到这一点?

谢谢

标签: swiftswiftui

解决方案


在 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)
        }
        }
     }

在此处输入图像描述


推荐阅读