swift - 设置自定义背景形状

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

但它看起来像这样：

如何在第一张图像上应用背景并将内容放在左侧？

有没有我可以用来进行这种修改的工具？还是人们通常通过试错和手工来完成？

谢谢

标签： swiftswiftui

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