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

我认为Image中的Grid可能会引起您的问题。您可以使用GeomteryReader来设置图像的最大宽度。由于没有您正在使用的图像，因此将其替换为RoundedRectangle。

在下面的代码中，您可以看到我正在设置RoundedRectangle的框架，并为其指定一个maxWidth。我也在计算和设置RoundedRectangle上的动态高度。

我们需要设置包含VStack的{{1}}的框架。由于我们知道Grid中行的高度，因此我们可以计算两行的高度并将包含的Grid设置为该高度。

下面的代码给出以下输出：

VStack

可以对上述辅助函数进行调整，以使它们接受您计划使用的实际填充，或提供所需的图像高度和宽度。最终，没有硬编码的高度，因此这对于任何屏幕尺寸都应具有响应性。

Answer 2

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

结果：

如何创建全角VStack？

2 个答案: