Xcode 12.4 SwiftUI Playground 实时预览仅显示内容小框无完整手机界面问题

Xcode 12.4 的SwiftUI Playground默认使用内容自适应尺寸渲染实时预览，本身不会自动加载完整手机屏幕的模拟上下文；叠加你当前代码的两处问题：一是定义了colors数组但没有用来生成Picker选项，分段选择器本身宽度极窄；二是根视图没有配置撑满的尺寸约束，最终就会出现预览只包裹内部文本、选择器等内容的小框效果，不会呈现完整的手机界面。

• 补全Picker的渲染逻辑：遍历已定义的colors数组，为每个选项生成对应的文本视图，让分段选择器达到正常的展示宽度
• 给根VStack添加全空间撑满约束：通过.frame(maxWidth: .infinity, maxHeight: .infinity)修饰，让视图可以占满分配的预览空间，不再默认收缩包裹内部元素
• 主动配置Playground的预览环境：通过PlaygroundPage.current.setLiveView方法注入自定义的手机屏幕尺寸，替换Playground默认的自适应尺寸渲染模式

import SwiftUI
import PlaygroundSupport

struct DemoView: View {
    @State private var favoriteColor = "Red"
    private let colors = ["Red", "Green", "Blue"]
    
    var body: some View {
        VStack(spacing: 24) {
            Picker(selection: $favoriteColor, label: Text("颜色选择")) {
                // 补全遍历数据源生成选项的逻辑
                ForEach(colors, id: \.self) { color in
                    Text(color)
                }
            }
            .pickerStyle(SegmentedPickerStyle())
            
            Text("当前选中：\(favoriteColor)")
                .font(.title)
        }
        // 关键修饰：允许视图撑满分配的预览空间
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemBackground))
    }
}

// 配置Playground实时预览，指定模拟的iPhone屏幕尺寸
PlaygroundPage.current.setLiveView(
    DemoView()
        .frame(width: 390, height: 844) // 对应iPhone 12的屏幕尺寸，可按需调整
)

• 不要混淆Playground预览和Xcode项目内的Canvas预览逻辑：两者运行上下文完全不同，项目内预览会自动绑定设备尺寸，但Playground必须主动通过setLiveView配置模拟尺寸，否则就会触发内容自适应的收缩效果
• 如果修改后预览依然显示小框，检查是否遗漏了frame(maxWidth: .infinity, maxHeight: .infinity)修饰：仅在外层设置固定宽高时，内部的VStack默认依然会根据内容收缩，无法占满分配的空间
• 可以根据测试需求灵活调整setLiveView里传入的宽高参数，不需要写死固定值时也可以用UIScreen.main.bounds动态匹配屏幕尺寸

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