主页 / coding / 问题 / 79062535
Accepted
Brandon Erbschloe
Asked: 2024-10-07 23:20:13 +0800 CST

iOS 18 中水平 ScrollView 中嵌入 LazyHStack 的 SwiftUI 内容跳转问题

  • 772

LazyHStack当嵌入到 中时，会出现跳跃内容布局问题ScrollView。当子组件嵌入Button到 中时，显示时会出现奇怪的视图“跳跃”行为。这在子组件的首次显示和重新显示时都会发生。以下代码将在中VStack重现该问题。这在 Xcode 预览中无法重现。缓慢滚动会使问题更频繁地发生。iOS 18iPhone 16 Pro Simulator

import SwiftUI

struct ContentView: View {
    
    let elements = (0..<50).map(\.description)
    
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack {
                ForEach(elements, id: \.self) { element in
                    VStack {
                        Button(action: {}) {
                            Text("\(element)")
                                .foregroundStyle(Color.white)
                                .frame(width: 120, height: 80)
                                .background(Color.blue)
                                .cornerRadius(12)
                        }
                    }
                }.padding()
            }
        }
    }
}

预览

可以通过移除VStack、移除Button、使用 HStack 而不是 LazyHStack 或向.id(element)中添加 来修复此问题Button。这些修复不是我想要的，我希望更深入地了解这里发生的事情。

显而易见的解决方法是删除VStack，但我想向 VStack 添加其他内容。上面的演示代码只是表明 VStack 不需要其他子元素即可重现此问题。此外，我们需要使用 LazyHStack，因为元素列表可能会很长。也希望留在 SwiftUI 领域，而不是通过 UICollectionView 实现。

注意：使用单行的 LazyHGrid 不能解决此问题。

button

1 个回答

  1. Best Answer

    添加.geometryGroup()似乎VStack可以修复它：

    ScrollView(.horizontal) {
    LazyHStack {
        ForEach(elements, id: \.self) { element in
            VStack {
                Button(action: {}) {
                    // as before
                }
            }
            .geometryGroup() // 👈 HERE
        }
        .padding()
    }
}
    • 1

相关问题