SwiftUI：ScrollView内视图尺寸变化时保持滚动位置

一、解决展开/折叠时滚动位置跳动的兼容方案（支持iOS17以下） #

你用ScrollViewReader的方向没错，问题出在时机把控上——必须等视图布局更新完成后再执行滚动，而不是状态切换时立刻调用scrollTo。以下是两种可行的实现方式：

方式1：延迟滚动+Sticky Header（贴合你的理想状态） #

利用List的Section Header默认粘性特性，让展开项的顶部固定在屏幕，同时通过延迟滚动确保布局稳定：

struct ExpandableItem: Identifiable {
    let id = UUID()
    let title: String
    let shortContent: String
    let longContent: String
    var isExpanded = false
}

struct ContentView: View {
    @State private var items = [
        ExpandableItem(title: "项目1", shortContent: "短内容1", longContent: "长内容1\n\n更多行的内容..."),
        ExpandableItem(title: "项目2", shortContent: "短内容2", longContent: "长内容2\n\n更多行的内容..."),
        // 可添加更多项目
    ]

    var body: some View {
        ScrollViewReader { proxy in
            List {
                ForEach($items) { $item in
                    Section(header: Text(item.title).font(.headline)) {
                        Text(item.isExpanded ? item.longContent : item.shortContent)
                            .font(.body)
                        Button(action: {
                            withAnimation {
                                item.isExpanded.toggle()
                            }
                            // 延迟执行，确保布局更新完成
                            DispatchQueue.main.asyncAfter(deadline: .now() + 0.05) {
                                proxy.scrollTo(item.id, anchor: .top)
                            }
                        }) {
                            Text(item.isExpanded ? "收起" : "展开")
                                .foregroundColor(.blue)
                        }
                    }
                    .id(item.id)
                }
            }
        }
    }
}

方式2：GeometryReader精准定位（无延迟误差） #

通过获取按钮的全局位置，在布局更新后计算滚动偏移，适合对精度要求高的场景：

// 自定义PreferenceKey传递位置信息
private struct ButtonPositionKey: PreferenceKey {
    static var defaultValue: [UUID: CGFloat] = [:]
    static func reduce(value: inout [UUID: CGFloat], nextValue: () -> [UUID: CGFloat]) {
        value.merge(nextValue()) { $1 }
    }
}

// 在ContentView的Button中添加位置监听
Button(action: {
    withAnimation {
        item.isExpanded.toggle()
    }
}) {
    Text(item.isExpanded ? "收起" : "展开")
        .foregroundColor(.blue)
        .background(
            GeometryReader { geo in
                Color.clear
                    .preference(key: ButtonPositionKey.self, value: [item.id: geo.frame(in: .global).minY])
            }
        )
}
.onPreferenceChange(ButtonPositionKey.self) { positions in
    guard item.isExpanded, let buttonY = positions[item.id] else { return }
    // 获取ScrollView的安全区域顶部偏移
    let safeAreaTop = UIApplication.shared.windows.first?.safeAreaInsets.top ?? 0
    // 计算需要滚动的偏移量
    let targetOffset = buttonY - safeAreaTop
    // 转换为ScrollView的本地坐标并滚动
    proxy.scrollTo(item.id, anchor: .top)
}

二、iOS上内联展开样式的合理性 #

内联展开本身符合iOS设计规范，但存在适用边界：

• ✅ 适合内容较短的场景（如短标题、小段落引用），操作直观且不破坏列表连贯性
• ❌ 不适合超长内容（如几十条评论、大段文本），会导致列表布局突变，用户需要滚动大量距离才能回到原位置，体验较差

三、展示更多内容的iOS最佳实践 #

针对不同场景，推荐以下方案：

1. 长标题/短文本展开 #

• 用自动截断+内联展开：搭配上面的滚动修复方案，确保体验流畅
• 固定标题在顶部：利用List Section的粘性Header，让用户始终能看到当前项的标题

2. 评论/大量列表内容 #

• 分页加载：点击「查看更多评论」后，在当前列表下方追加加载新内容（如小红书、微博的评论区逻辑），避免布局突变
• 跳转详情页：若评论内容复杂（带图片、互动），点击「查看全部」跳转到独立评论页面，彻底隔离原列表的滚动逻辑

3. 引用/大段内容 #

• 折叠面板+内部滚动：展开后限制内容最大高度，内部嵌套小型ScrollView，避免占用过多屏幕空间
• 模态弹窗：点击引用内容后弹出全屏/半屏模态窗口展示完整内容，完全不影响原页面的滚动位置

4. 通用原则 #

• 优先保持列表连贯性，避免突然改变整体布局
• 操作反馈清晰：展开/折叠必须有明确的动画和状态提示（如按钮文字切换）
• 内容量不确定时，优先选择分页或跳转，而非内联展开

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