SwiftUI Preview放大后无法移动画布，如何查看其他区域布局？

根因说明 #

当前预览代码未添加可滚动外层容器，SwiftUI 默认不会为超出画布尺寸的静态布局内容添加滚动交互，画布放大后无法通过普通拖拽/双指滑动查看超出视口的区域。

解决方法 #

• 方法一：临时包裹ScrollView（调试布局用）
  在预览的VStack外层临时套一层ScrollView，即可直接滚动查看全量内容，布局校验完成后删掉外层ScrollView即可，修改后代码如下：

struct ProductCart_Previews: PreviewProvider {
    static var previews: some View {
        ScrollView {
            VStack {
                ForEach(Range(1...5)) { value in
                    HStack(alignment: .top, spacing: .halfPadding) {
                        Text(String(repeating: "Save on the newest iPhone with the latest carrier deals. Directly from Apple.",
                                    count: value))
                        Spacer()
                    }
                }
            }.padding()
        }
    }
}

• 方法二：使用画布平移快捷键（无需修改代码）
  按住Option + Command组合键的同时，按住鼠标左键拖拽画布，即可平移放大后的预览视口。
• 方法三：调整预览显示模式
  点击预览画布底部的设备选择下拉菜单，选中Selectable模式后，放大画布即可直接拖拽预览内容调整视口位置。

参考截图 #

放大后异常截图 #

目标实现效果 #

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