ios 获得HStack和VStack的完美对齐和内容测量

2o7dmzc5 于 2023-06-07 发布在 iOS

关注(0)|答案(1)|浏览(197)

我试图插入3个矩形在我的scrollView精确2水平和1垂直.我需要所有三个矩形尊重相同的宽度。水平上一切工作正常，并适应所有设备，而不是单一的矩形垂直我找不到正确的方法来获得相同的宽度结果作为水平的

这是我用的密码。你能帮助我理解这是正确的方式来获得我想要的结果还是我必须完全改变的方式吗？

var body: some View {

        ScrollView(.vertical) {
            VStack(spacing: 32) {
                Spacer()
                                
                VStack {
                    HStack {
                        ForEach(1...2, id: \.self) { cards in
                            ZStack(alignment: .center) {
                                RoundedRectangle(cornerRadius: 10)
                                    .stroke(lineWidth: 0.5)
                                VStack(alignment: .center, spacing: 16) {
                                    Image(systemName: "megaphone")
                                    Text("Text")
                                    Text("Text")
                                        .multilineTextAlignment(.center)
                                    Image(systemName: "circle")
                                }
                                .padding()
                            }
                        }
                    }

                    ZStack(alignment: .center) {
                        RoundedRectangle(cornerRadius: 10)
                            .stroke(lineWidth: 0.5)
                        VStack(alignment: .center, spacing: 16) {
                            Image(systemName: "megaphone")
                            Text("Text")
                            Text("Text")
                                .multilineTextAlignment(.center)
                            Image(systemName: "circle")
                        }
                        .padding()
                    }
                }
            }
        }
    }

ios

来源：https://stackoverflow.com/questions/76371914/get-perfect-alignment-and-content-measurements-of-hstack-and-vstack

1条答案

按热度按时间

fhg3lkii1#

可以使用PreferenceKey从其他视图中提取值。实现PreferenceKey方法如下：

struct WidthPreferenceKey: PreferenceKey {
    typealias Value = CGFloat
    static var defaultValue: CGFloat = .zero
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {}
}

struct widthGetter: View {
    var body: some View {
        GeometryReader { geometry in
            Color.clear.preference(key: WidthPreferenceKey.self,
                                   value: geometry.size.width)
        }
    }
}

存储宽度大小的变量声明：

@State private var widthSize: CGFloat = 0

然后，按如下方式修改代码：

var body: some View {

            ScrollView(.vertical) {
                    VStack(spacing: 32) {
                        Spacer()
                                        
                        VStack {
                            HStack {
                                ForEach(1...2, id: \.self) { cards in
                                    ZStack(alignment: .center) {
                                        RoundedRectangle(cornerRadius: 10)
                                            .stroke(lineWidth: 0.5)
                                        VStack(alignment: .center, spacing: 16) {
                                            Image(systemName: "megaphone")
                                            Text("Text")
                                            Text("Text")
                                                .multilineTextAlignment(.center)
                                            Image(systemName: "circle")
                                        }
                                        .padding()
                                    }
                                    .background(widthGetter()) // Add here
                                }
                            }

                            ZStack(alignment: .center) {
                                RoundedRectangle(cornerRadius: 10)
                                    .stroke(lineWidth: 0.5)
                                VStack(alignment: .center, spacing: 16) {
                                    Image(systemName: "megaphone")
                                    Text("Text")
                                    Text("Text")
                                        .multilineTextAlignment(.center)
                                    Image(systemName: "circle")
                                }
                                .padding()
                            }
                            .frame(width: widthSize) // Add here
                        }
                    }
            }
            .onPreferenceChange(WidthPreferenceKey.self, perform: { widthSize = $0 }) // Add here
        }

您可以在此链接中研究有关PreferenceKey的更多详细信息：https://www.youtube.com/watch?v=OnbBc00lqWU&list=PLwvDm4Vfkdphc1LLLjCaEd87BEg07M97y&index=11&ab_channel=SwiftfulThinking