設置自定義背景形狀

Question

我想要這樣的東西：

我的代碼在這里：

NavigationView {
        VStack{
            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()
        }
        .background(Color.green)
}

但它看起來像這樣：

如何在第一張圖像上應用背景並將內容放在左側？

有沒有我可以用來進行這種修改的工具？ 還是人們通常通過試錯和手工來完成？

謝謝

Answer 1

嘗試使用 ZStack。 您可以將背景設置為主要內容下方的視圖，並且可以使用edgesIgnoringSafeArea(.all)修飾符使該視圖擴展到邊緣。 您可以在該 ZStack 中嵌套一個 ZStack，並將綠色背景疊加在您為制作該背景圖案而創建的某個形狀上。

    ZStack(alignment: .leading) {
//        ZStack {
            Color.green
                .edgesIgnoringSafeArea(.all)
//            SomeWhiteShapeToMakeThatRoundedMask()
//                .foregroundColor(.white)
//            }

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

或者，您可以使用 GeometryReader 偏移圓形來獲取容器大小：

    ZStack(alignment: .leading) {

        Color.white
            .edgesIgnoringSafeArea(.all)

        GeometryReader { geometry in

            Circle()
                .foregroundColor(.green)
                .frame(width: geometry.size.width * 2)
                .offset(x: geometry.size.width * -0.2 , y: geometry.size.height * -0.8)

        }

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