SwiftUI中条件渲染的Spacer叠加层不显示问题排查

一、iPhone SE（iOS 15.7.7）横屏时「Column 3」不显示但留间距的问题 #

问题原因 #

iOS 15老版本中，Spacer()结合条件渲染时，其overlay的文本存在布局bug——Spacer占据了空间，但覆盖的Text没有被正确渲染出来，这就是你看到有间距但内容不显示的原因。

修复方案 #

放弃用Spacer的overlay实现文本定位，直接在HStack中通过Spacer分配空间，把文本作为HStack的直接子视图，逻辑更清晰还能避开系统bug：

struct ItemView: View {
    @Environment(\.verticalSizeClass) var verticalSizeClass: UserInterfaceSizeClass?
    
    var body: some View {
        let isLandscape = verticalSizeClass == .compact
        
        HStack {
            // 左对齐Column1
            Text("Column 1")
            Spacer()
            // 居中Column2
            Text("Column 2")
            Spacer()
            // 横屏时显示右对齐Column3
            if isLandscape {
                Text("Column 3")
            }
        }
        .padding(.horizontal) // 可选：避免文本贴边
    }
}

二、iPadOS 16.5.1横竖屏切换后列表下划线异常的问题 #

问题原因 #

系统默认List样式在横竖屏切换时，无法根据单元格布局变化正确更新分隔线的位置和长度，导致下划线错乱。

修复方案 #

方案1：指定统一List样式

给List强制设置.plain样式，避免系统样式随横竖屏切换混乱：

struct SwiftUIView: View {
    var body: some View {
        List {
            ItemView()
            ItemView()
            ItemView()
        }
        .listStyle(.plain)
    }
}

方案2：自定义分隔线（可选，更灵活）

如果系统样式仍有问题，可以去掉默认分隔线，手动添加自定义分隔线：

struct SwiftUIView: View {
    var body: some View {
        VStack(spacing: 0) {
            ItemView()
            Divider()
            ItemView()
            Divider()
            ItemView()
        }
        .padding()
    }
}

完整修复代码 #

struct SwiftUIView: View {
    var body: some View {
        List {
            ItemView()
            ItemView()
            ItemView()
        }
        .listStyle(.plain)
    }
}

struct ItemView: View {
    @Environment(\.verticalSizeClass) var verticalSizeClass: UserInterfaceSizeClass?
    
    var body: some View {
        let isLandscape = verticalSizeClass == .compact
        
        HStack {
            Text("Column 1")
            Spacer()
            Text("Column 2")
            Spacer()
            if isLandscape {
                Text("Column 3")
            }
        }
        .padding(.horizontal)
    }
}

struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIView()
            .previewDevice(PreviewDevice(rawValue: "iPhone SE (2nd generation)"))
            .previewInterfaceOrientation(.landscapeLeft)
        SwiftUIView()
            .previewDevice(PreviewDevice(rawValue: "iPad Pro (11-inch) (4th generation)"))
            .previewInterfaceOrientation(.landscapeLeft)
    }
}

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