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

设置自定义背景形状

1 个答案: