ios - 如何创建全宽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)，用于您需要拉伸(stretch)以填充的任何内容。

在您的代码中:

• 网格中的每个按钮
• BrandExploreMore 中的中间 VStack(spacing: 12)

<小时/>

因此，在删除未知资源并清理代码并对其进行一些重构之后:

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

结果是: