SwiftUI

ScrollView｜使用 defaultScrollAnchor 设置滚动初始位置

了解如何实现默认从底部开始显示 ScrollView 视图，并在内容发生改变时滚动到指定位置。

廖林

03 Jan 2025 • 5 min read

在之前的这篇文章中，我们讨论了如何自定义 ScrollView 滚动时的对齐行为：

这篇文章，我们将探讨如何实现从底部开始显示 ScrollView。

使用 ScrollViewReader 实现（ iOS 16 及以下）

在 iOS17 以前的版本中，一种常见的实现方式是使用 ScrollViewReader 搭配 scrollTo 滚动到底部：

struct ChatList: View {
    private var records: [Record]
    
    var body: some View {
        ScrollViewReader { proxy in
            ScrollView(.vertical) {
                VStack(spacing: 0) {
                    ForEach(records) { record in
                        RecordRowCardView(record: record)
                            .id("record-\(record.id)")
                    }
                }
                .padding(.horizontal)
            }
            .onAppear {
                if let lastRecord = records.last {
                    proxy.scrollTo(lastRecord.id, anchor: .bottom)
                }
            }
        }
    }
}

0:00

/0:01

在上述代码中，我们通过获取最后一条 records.last.id 来实现滚动到底部。

另一种更简单的方式，你可以在 ForEach 底部添加一个空的 Text 组件，并直接滚动到该组件的位置，可以实现一样的效果：

struct ChatList: View {
    private var records: [Record]
    
    var body: some View {
        ScrollViewReader { proxy in
            ScrollView(.vertical) {
                VStack(spacing: 0) {
                    ForEach(records) { record in
                        RecordRowCardView(record: record)
                            .id("record-\(record.id)")
                    }

                    // 空组件
                    Text("").id("bottomID")
                }
                .padding(.horizontal)
            }
            .onAppear {
                    proxy.scrollTo("bottomID", anchor: .bottom)
            }
        }
    }
}

💡

如果你使用 LazyVStack 进行懒加载，初始化滚动可能不生效，因为初始化时内容还未加载。你可以通过为滚动添加延迟，或添加一个记录数据加载的状态，并在数据加载完成后执行滚动。

使用 defaultScrollAnchor 修饰器（ iOS 17 及以上）

defaultScrollAnchor用于设置 ScrollView 或 List 组件的初始位置。

设置默认底部开始显示

通过设置 .defaultScrollAnchor(.bottom)，ScrollView 默认可从底部开始显示，这对于 LazyVStack 这类懒加载组件仍然有效：

struct ChatList: View {
    private var records: [Record]
    
    var body: some View {
        ScrollView(.vertical) {
            LazyVStack(spacing: 0) {
                ForEach(records) { record in
                    // 省略
                }
            }
            .padding(.horizontal)
        }
        .defaultScrollAnchor(.bottom)
    }
}