SwiftUI 4中scrollTo()在VStack/LazyVStack生成异常UI求助

问题描述 #

当LazyVStack（或VStack、LazyVGrid）内元素总数较少，屏幕空间完全能容纳所有元素时，调用ScrollViewReader的scrollTo(_:anchor:)方法，传入最后一个元素ID并设置anchor: .top，预期效果是所有元素完整显示（最后一个元素顶部对齐滚动视图顶部，前面元素自然排布在上方），但实际仅最后一个元素显示在视图顶部，其余元素被滚出屏幕。

补充测试细节：

• 添加动画后可见，初始会显示全部元素，随后自动滚动将前两个元素移出视图
• 升级至iOS 16.4后问题仍存在，List组件无此异常

测试代码：

struct Item: Identifiable {
    var id: UUID = UUID()
    var value: String
}

struct TestView: View {
    var items: [Item]
    var scrollTo: UUID
    
    var body: some View {
        ScrollViewReader { proxy in
            ScrollView {
                LazyVStack {
                    ForEach(items) { item in
                        Text(item.value)
                    }
                }
                .onAppear {
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                        proxy.scrollTo(scrollTo, anchor: .top)
                    }
                }
            }
        }
    }
}

struct ContentView: View {
    var items: [Item] =  [Item(value: "a"), Item(value: "b"), Item(value: "c")]
    
    var body: some View {
        TestView(items: items, scrollTo: items.last!.id)
            .frame(maxWidth: .infinity)
    }
}

问题原因 #

这是SwiftUI中ScrollView与LazyVStack/VStack组合时的布局逻辑Bug：当设置anchor: .top滚动到目标元素时，ScrollView会强制将该元素顶部对齐到滚动视图顶部，完全忽略了「内容总高度小于容器高度」的情况——此时本该保持内容完整显示，却错误执行滚动操作将上方内容移出可视区域。

解决方案 #

方案1：判断内容高度，按需执行滚动 #

通过GeometryReader获取滚动容器高度和内容总高度，只有当内容高度超过容器高度时，才执行scrollTo(.top)；否则保持默认布局（完整显示所有元素）。

修改后的代码：

struct TestView: View {
    var items: [Item]
    var scrollTo: UUID
    
    var body: some View {
        ScrollViewReader { proxy in
            GeometryReader { containerGeo in
                ScrollView {
                    LazyVStack {
                        ForEach(items) { item in
                            Text(item.value)
                        }
                    }
                    .background(
                        GeometryReader { contentGeo in
                            Color.clear
                                .preference(key: ContentHeightKey.self, value: contentGeo.size.height)
                        }
                    )
                    .onPreferenceChange(ContentHeightKey.self) { contentHeight in
                        DispatchQueue.main.async {
                            // 仅内容超出容器时，才滚动到目标元素顶部
                            if contentHeight > containerGeo.size.height {
                                proxy.scrollTo(scrollTo, anchor: .top)
                            }
                        }
                    }
                }
            }
        }
    }
}

// 自定义PreferenceKey传递内容高度
struct ContentHeightKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

方案2：iOS 17+ 用scrollPosition自定义滚动逻辑 #

如果项目适配iOS 17及以上，可以使用scrollPosition替代scrollTo，手动计算滚动偏移量，避免系统错误的滚动行为：

struct TestView: View {
    var items: [Item]
    var scrollTo: UUID
    @State private var scrollOffset: CGFloat = 0
    
    var body: some View {
        ScrollViewReader { proxy in
            GeometryReader { containerGeo in
                ScrollView {
                    LazyVStack {
                        ForEach(items) { item in
                            Text(item.value)
                                .id(item.id)
                        }
                    }
                    .background(
                        GeometryReader { contentGeo in
                            Color.clear
                                .preference(key: ContentHeightKey.self, value: contentGeo.size.height)
                        }
                    )
                    .onPreferenceChange(ContentHeightKey.self) { contentHeight in
                        DispatchQueue.main.async {
                            if contentHeight > containerGeo.size.height {
                                // 计算目标元素到容器顶部的偏移量
                                if let frame = proxy.frame(in: .global, for: scrollTo) {
                                    let containerTop = containerGeo.frame(in: .global).minY
                                    scrollOffset = frame.minY - containerTop
                                }
                            } else {
                                scrollOffset = 0
                            }
                        }
                    }
                }
                .scrollPosition(y: $scrollOffset)
            }
        }
    }
}

方案3：临时兼容（iOS 16及以下） #

如果无法升级iOS版本，可在调用scrollTo前判断内容高度，若内容高度小于容器高度，则不执行scrollTo；或者临时改用anchor: .bottom（仅当需求允许时）。

验证说明 #

• 方案1在iOS 16.4和iOS 17上测试有效，能准确区分内容是否超出容器，避免无效滚动
• 方案2依赖iOS 17新API，适合新版本系统的项目

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