SwiftUI开发中Picker控件无法在预览界面显示的原因

问题现象 #

跟随教程实现SwiftUI Picker选择器时，教程预览可正常展示Picker效果：

但在Xcode 13.3环境下编写的代码，预览界面无法显示Picker控件：

问题代码如下：

import SwiftUI

struct CheckoutView: View {
    @EnvironmentObject var order: Order
    @State private var paymentType = "Cash"

    let paymentTypes = ["Cash", "Credit Card", "iDine Points"]

    var body: some View {
        VStack {
            Section {
                Picker("How do you want to pay?", selection: $paymentType) {
                    ForEach(paymentTypes, id: \.self) {
                        Text($0)
                    }
                }
            }
        }
        .navigationTitle("Payment")
        .navigationBarTitleDisplayMode(.inline)
    }
}

struct CheckoutView_Previews: PreviewProvider {
    static var previews: some View {
        CheckoutView()
            .environmentObject(Order())
    }
}

问题根因 #

• 核心错误是Section的使用不符合规则：Section是仅能在List、Form容器内生效的组件，不能直接作为VStack的子视图。Xcode 13.3搭载的iOS 15 SDK修正了旧版本的容错逻辑，不在合法容器内的Section不会渲染内部内容，直接导致Picker不可见。教程代码基于旧版SDK编写，错误写法被系统容错处理，因此可以正常显示。
• 预览配置缺失：预览代码未将视图嵌入NavigationView，即使修复容器问题，导航相关的标题、栏样式修饰符也不会生效，无法和教程效果对齐。

修复方案 #

1. 将外层的VStack替换为Form（匹配教程常见的表单页面样式），保证Section在合法容器内
2. 预览层补充NavigationView包裹，让导航相关修饰符正常生效

修正后的代码：

import SwiftUI

struct CheckoutView: View {
    @EnvironmentObject var order: Order
    @State private var paymentType = "Cash"

    let paymentTypes = ["Cash", "Credit Card", "iDine Points"]

    var body: some View {
        // 替换VStack为Form，Section仅在Form/List中可正常渲染
        Form {
            Section {
                Picker("How do you want to pay?", selection: $paymentType) {
                    ForEach(paymentTypes, id: \.self) {
                        Text($0)
                    }
                }
            }
        }
        .navigationTitle("Payment")
        .navigationBarTitleDisplayMode(.inline)
    }
}

struct CheckoutView_Previews: PreviewProvider {
    static var previews: some View {
        // 补充NavigationView包裹，让导航配置生效
        NavigationView {
            CheckoutView()
                .environmentObject(Order())
        }
    }
}

补充：如果不需要表单的默认分组样式，也可以去掉Section直接把Picker放在VStack里，或者给Picker加pickerStyle(.menu)/pickerStyle(.wheel)等样式修饰符自定义展示效果。

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