SwiftUI中容器内嵌套Section丢失格式的布局问题

核心问题原因 #

你把Section嵌套到了HStack内部，导致Section脱离了Form/List的上下文环境——iOS 16里，Section必须作为Form或List的直接子视图才能保留原生的标题和样式，一旦放到其他布局容器里，样式就会失效。

修正方案 #

把Section放回Form/List内部，在Section里用HStack实现图片与属性的并排布局，外层用Form/List包裹整个内容，这样既能保留Section的原生样式，又能实现你要的排版效果。

修正后的示例代码 #

import SwiftUI

struct DetailView: View {
    let item: Item
    
    var body: some View {
        NavigationSplitViewDetail {
            Form {
                Section("基本信息") {
                    // 图片与属性并排的HStack
                    HStack(alignment: .top, spacing: 16) {
                        Image(systemName: "photo")
                            .resizable()
                            .scaledToFit()
                            .frame(width: 80, height: 80)
                            .cornerRadius(8)
                        
                        VStack(alignment: .leading, spacing: 8) {
                            Text("名称：\(item.name)")
                                .font(.headline)
                            Text("ID：\(item.id.uuidString.prefix(8))")
                                .font(.subheadline)
                                .foregroundColor(.secondary)
                        }
                    }
                    
                    // 其他单独展示的属性
                    Text("描述：\(item.description)")
                        .padding(.top, 8)
                }
                
                // 可以添加更多Section
                Section("其他信息") {
                    Text("创建时间：\(item.createDate.formatted(date: .long, time: .shortened))")
                }
            }
            .navigationTitle(item.name)
        }
    }
}

// 数据模型示例
struct Item: Identifiable {
    let id = UUID()
    let name: String
    let description: String
    let createDate = Date()
}

额外提示 #

1. 如果你不需要Form的表单圆角样式，换成List也能达到同样的Section样式效果
2. 可以通过Section(header:)自定义标题样式，比如：

Section(header: Text("基本信息").font(.title2).bold()) {
    // 内容
}

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