Установить пользовательскую форму фона

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