SwiftUI ScrollView缩放后如何保持内容底部对齐？

我在应用中通过以下代码实现了ScrollView内容的底部对齐：

ScrollView([.horizontal, .vertical], showsIndicators: true) {

    StorageDrawingView(storageVM: storageVM)
        .frame(maxWidth: .infinity, minHeight: geometrySize.height, alignment: .bottom)
        .scaleEffect(zoomFactor)
        .scrollTargetLayout()

} // End ScrollView

借助geometrySize和frame的alignment设置，原本可以正常工作。但添加iOS 17的MagnifyGesture()实现缩放后，内容会居中显示，无法保持底部对齐。试过iOS 17的.scrollPosition(id: $position)，但这个API适用于带ID的列表/项，不符合我的场景。

请问是否可以在缩放后手动滚动到底部？或者能否设置具体的(x,y)位置？

解决方案 #

方法1：利用ScrollViewReader手动定位滚动 #

iOS 17的ScrollView支持通过ScrollViewReader直接控制滚动位置，无需依赖带ID的列表项，步骤如下：

• 为内容视图添加唯一ID标记底部区域
• 用ScrollViewReader包裹ScrollView
• 缩放结束后调用scrollTo(_:anchor:)，指定锚点为.bottom

示例代码：

@State private var zoomFactor: CGFloat = 1.0
@State private var geometrySize: CGSize = .zero

ScrollViewReader { proxy in
    ScrollView([.horizontal, .vertical], showsIndicators: true) {
        StorageDrawingView(storageVM: storageVM)
            .frame(maxWidth: .infinity, minHeight: geometrySize.height, alignment: .bottom)
            .scaleEffect(zoomFactor)
            .scrollTargetLayout()
            .id("contentBottom") // 标记内容底部的唯一ID
    }
    .gesture(
        MagnifyGesture()
            .onChanged { value in
                zoomFactor = value.magnification
            }
            .onEnded { _ in
                // 缩放结束后滚动至内容底部，锚点设为.bottom
                proxy.scrollTo("contentBottom", anchor: .bottom)
            }
    )
}

方法2：封装UIScrollView手动控制contentOffset #

如果SwiftUI原生API不够灵活，可以通过UIViewRepresentable封装UIScrollView，直接控制滚动偏移量：

1. 自定义ScrollView封装，暴露contentOffset绑定
2. 缩放时计算内容实际高度，推导需要的Y偏移量（内容总高度×缩放系数 - ScrollView高度）
3. 缩放结束后设置contentOffset到目标位置

示例代码：

struct CustomScrollView<Content: View>: UIViewRepresentable {
    var axes: Axis.Set
    var showsIndicators: Bool
    @Binding var contentOffset: CGPoint
    @ViewBuilder var content: () -> Content
    
    func makeUIView(context: Context) -> UIScrollView {
        let scrollView = UIScrollView()
        scrollView.showsVerticalScrollIndicator = showsIndicators
        scrollView.showsHorizontalScrollIndicator = showsIndicators
        scrollView.delegate = context.coordinator
        
        let hostingView = UIHostingController(rootView: content())
        hostingView.view.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(hostingView.view)
        
        NSLayoutConstraint.activate([
            hostingView.view.topAnchor.constraint(equalTo: scrollView.topAnchor),
            hostingView.view.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            hostingView.view.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            hostingView.view.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            hostingView.view.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
            hostingView.view.heightAnchor.constraint(greaterThanOrEqualTo: scrollView.heightAnchor)
        ])
        
        return scrollView
    }
    
    func updateUIView(_ uiView: UIScrollView, context: Context) {
        uiView.contentOffset = contentOffset
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, UIScrollViewDelegate {
        var parent: CustomScrollView
        
        init(_ parent: CustomScrollView) {
            self.parent = parent
        }
        
        func scrollViewDidScroll(_ scrollView: UIScrollView) {
            parent.contentOffset = scrollView.contentOffset
        }
    }
}

// 使用示例
@State private var zoomFactor: CGFloat = 1.0
@State private var geometrySize: CGSize = .zero
@State private var scrollOffset: CGPoint = .zero

CustomScrollView(axes: [.horizontal, .vertical], showsIndicators: true, contentOffset: $scrollOffset) {
    StorageDrawingView(storageVM: storageVM)
        .frame(maxWidth: .infinity, minHeight: geometrySize.height, alignment: .bottom)
        .scaleEffect(zoomFactor)
}
.gesture(
    MagnifyGesture()
        .onChanged { value in
            zoomFactor = value.magnification
        }
        .onEnded { _ in
            // 计算目标Y偏移：内容缩放后的总高度 - ScrollView可视高度
            let targetY = (geometrySize.height * zoomFactor) - geometrySize.height
            scrollOffset = CGPoint(x: scrollOffset.x, y: targetY)
        }
)

内容的提问来源于stack exchange，提问作者alex.bour