Как я могу создать VStack полной ширины?

Question

У меня есть тело с VStack, еще один VStack внутри, в котором я хотел бы начать 20 пунктов, точно так же, как мой текст «Узнать больше», но по какой-то причине он имеет такой отступ, и я не могу понять, почему. Хотелось бы помочь здесь.

    struct BrandExploreMore: View {

    let brand: Brand

    var body: some View {
        VStack {
            HStack {
                Text("Explore More")
                    .font(.headline)
                    .foregroundColor(BrandColors.titleGray.color)
                    .padding(.leading, 20)
                Spacer()
            }

            VStack(spacing: 12) {
                Grid(leftTitle: "Desert", rightTitle: "Kids")
                Grid(leftTitle: "Stripes", rightTitle: "Pastels")
            }
             //.padding(.horizontal, 20)
//            .padding(EdgeInsets(top: 0, leading: -40, bottom: 0, trailing: 0))
            .padding(.bottom, 20)
            .background(SwiftUI.Color.red)
        }.background(SwiftUI.Color.orange) // end VStack
    }

}

struct BrandExploreMore_Previews: PreviewProvider {
    static var previews: some View {
        BrandExploreMore(brand: .kateZaremba)
    }
}

// MARK: - Grid

struct Grid: View {

    let leftTitle: String
    let rightTitle: String

    @State private var showLeft = false
    @State private var showRight = false

    var body: some View {
        HStack(spacing: 12) {
//            Spacer()
            Button(action: { self.showLeft = true }) {
                ZStack {
                    Image(leftTitle)
                    Text(leftTitle)
                        .foregroundColor(BrandColors.titleGray.color)
                        .font(.subheadline)
                }
            }.sheet(isPresented: self.$showLeft) {
                Text(self.leftTitle)
            }

            Button(action: { self.showRight = true }) {
                ZStack {
                    Image(rightTitle)
                    Text(rightTitle)
                        .foregroundColor(BrandColors.titleGray.color)
                        .font(.subheadline)
                }
            }.sheet(isPresented: self.$showRight) {
                Text(self.rightTitle)
            }
//            Spacer()
        }
    }

}

Answer 1

Модификатор, который вам нужен - .frame(maxWidth: .infinity) для всего, что вам нужно растянуть для заполнения.

В вашем коде:

• Каждый Button в Grid
• Средняя VStack(spacing: 12) в BrandExploreMore

---

Итак, после удаления неизвестных ресурсов, очистки кода и выполнения некоторого рефакторинга к нему:

struct BrandExploreMore: View {

    var body: some View {
        VStack(alignment: .leading) {
            Group {
            Text("Explore More")

            VStack(spacing: 12) {
                Grid(leftTitle: "Desert", rightTitle: "Kids")
                Grid(leftTitle: "Stripes", rightTitle: "Pastels")
            }
            .frame(maxWidth: .infinity)

            .padding(.bottom, 20)
            .background(SwiftUI.Color.red)
            }.padding(.horizontal, 12)
        }
            .background(SwiftUI.Color.orange) // end VStack
    }

}

struct BrandExploreMore_Previews: PreviewProvider {
    static var previews: some View {
        BrandExploreMore()
    }
}

// MARK: - Grid

struct Grid: View {

    let leftTitle: String
    let rightTitle: String

    @State private var showLeft = false
    @State private var showRight = false

    var body: some View {
        HStack(spacing: 12) {
            Button(action: { self.showLeft = true }) {
                ZStack {
                    Rectangle()
                        .foregroundColor(.yellow)
                        .frame(maxHeight: 100)
                        .cornerRadius(16)
                    Text(leftTitle)
                        .foregroundColor(.blue)
                        .font(.subheadline)
                }
            }.sheet(isPresented: self.$showLeft) {
                Text(self.leftTitle)
            }
            .frame(maxWidth: .infinity)

            Button(action: { self.showRight = true }) {
                ZStack {
                    Rectangle()
                        .foregroundColor(.yellow)
                        .frame(maxHeight: 100)
                        .cornerRadius(16)
                    Text(rightTitle)
                        .foregroundColor(.black)
                        .font(.subheadline)
                }
            }.sheet(isPresented: self.$showRight) {
                Text(self.rightTitle)
            }
            .frame(maxWidth: .infinity)
        }
    }
}

В результате этого:

Answer 2

Я думаю, что Image внутри вашего Grid может быть причиной ваших проблем. Вы можете использовать GeomteryReader для установки максимальной ширины изображения. Поскольку у меня нет изображения, которое вы используете, я заменил его на RoundedRectangle.

В коде ниже вы можете видеть, что я устанавливаю кадр RoundedRectangle и присваиваю ему maxWidth. Я также рассчитываю и устанавливаю динамическую высоту на RoundedRectangle.

Нам нужно установить кадр VStack, содержащий Grid. Так как мы знаем высоту строки в Grid, мы можем вычислить высоту двух строк и установить содержащую VStack на эту высоту.

Приведенный ниже код дает следующий вывод:

struct ContentView: View {

    var body: some View {
            GeometryReader { gr in
            VStack {
                HStack {
                    Text("Explore More")
                        .font(.headline)
                        .foregroundColor(.black)
                        .padding(.leading, 20)
                    Spacer()
                }

                VStack(spacing: 0) {
                    Grid(leftTitle: "Desert", rightTitle: "Kids")
                    Grid(leftTitle: "Stripes", rightTitle: "Pastels")
                }.frame(maxWidth: .infinity, maxHeight: gridHeight(gr, count: 2))
                .background(Color.red)
            }.background(Color.orange)
            }
    }

}

// MARK: - Grid

struct Grid: View {

    let leftTitle: String
    let rightTitle: String

    @State private var showLeft = false
    @State private var showRight = false

    var body: some View {

        GeometryReader { gr in

            return HStack(spacing: 12) {

                Button(action: { self.showLeft = true }) {
                    ZStack {
                        RoundedRectangle(cornerRadius: 20)
                            .frame(maxWidth: width(gr), maxHeight: height(gr))
                        Text(self.leftTitle)
                            .foregroundColor(.black)
                            .font(.subheadline)
                    }
                }

                Button(action: { self.showRight = true }) {
                    ZStack {
                        RoundedRectangle(cornerRadius: 20)
                            .frame(maxWidth: width(gr), maxHeight: height(gr))
                        Text(self.rightTitle)
                            .foregroundColor(.black)
                            .font(.subheadline)
                    }
                }

            }.frame(width: gr.size.width, height: height(gr) + 24, alignment: .center)

        }
    }


}

let horizontalPadding: CGFloat = 20 + 20 + 12 // 20 for each side and 12 in the middle

func gridHeight(_ gr: GeometryProxy, count: Int) -> CGFloat {
    return CGFloat(count) * (height(gr) + 24)
}

func height(_ gr: GeometryProxy) -> CGFloat {
    return (gr.size.width - horizontalPadding) / 3
}

func width(_ gr: GeometryProxy) -> CGFloat {
    return (gr.size.width - horizontalPadding) / 2
}

Указанные выше вспомогательные функции можно настроить так, чтобы они принималифактическое заполнение, которое вы планируете использовать, или для придания желаемой высоты и ширины изображения. В конечном счете, нет жестко заданных высот, поэтому это должно учитываться при любом размере экрана.