ios - 如何创建全角VStack？

我有一个带有VStack的主体，另一个是我想在其中开始20点的VStack，就像我的“探索更多”文本一样，但是由于某种原因，它像这样缩进，我不知道为什么。希望在这里有所帮助。

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

}

最佳答案

您需要的修饰符是.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)
        }
    }
}

结果是：

关于ios - 如何创建全角VStack？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58649912/