SwiftUI：如何让水平ScrollView中所有元素匹配最大元素高度

要让分页ScrollView里的所有CustomView高度统一为最大元素的高度，可以通过PreferenceKey收集视图高度的方式实现，具体步骤如下：

1. 定义高度收集的PreferenceKey #

这个Key用来自动收集并保留所有CustomView的最大高度：

struct ViewHeightKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = max(value, nextValue())
    }
}

2. 修改CustomView，添加高度测量 #

在CustomView的背景中嵌入GeometryReader，测量自身高度并通过PreferenceKey传递给父视图：

struct CustomView: View {
    let item: CustomItem
    
    var body: some View {
        // 保留你原有的CustomView布局逻辑
        VStack(spacing: 16) {
            if item.shouldShowThirdSection {
                Text("区域1")
                Text("区域2")
                Text("区域3")
            } else {
                Text("区域1")
                Text("区域2")
            }
        }
        .background(
            GeometryReader { proxy in
                Color.clear
                    .preference(key: ViewHeightKey.self, value: proxy.size.height)
            }
        )
    }
}

3. 在父视图中应用最大高度 #

在DotIndicatorCollectionView中收集所有视图的最大高度，然后给每个CustomView设置最小高度：

struct DotIndicatorCollectionView: View {
    var items: [CustomItem]
    @State private var index = 0
    @State private var maxViewHeight: CGFloat = 0
    
    var body: some View {
        PagingView(index: $index.animation(), maxIndex: items.count - 1) {
            ForEach(items, id: \.self) { item in
                CustomView(item: item)
                    .padding(.horizontal, 20)
                    .frame(minHeight: maxViewHeight) // 强制视图高度不小于最大值
            }
        }
        .onPreferenceChange(ViewHeightKey.self) { newHeight in
            maxViewHeight = newHeight // 更新最大高度
        }
    }
}

原理说明 #

1. 首次渲染时，每个CustomView通过GeometryReader测量自身高度，通过PreferenceKey将高度传递给父视图；
2. PreferenceKey自动比较所有传递的高度，保留最大值；
3. 父视图更新maxViewHeight状态，触发所有CustomView重新渲染，此时每个视图会被强制拉伸到最大高度；
4. 若数据源变化，流程自动重复，始终保持所有视图高度统一。

内容的提问来源于stack exchange，提问作者Arina Demidova