visionOS开发的SwiftUI App适配iOS/iPadOS布局异常求助

我开发的visionOS应用已上架App Store，现在要发布到iOS App Store，但在iOS/iPadOS设备上运行时List布局出现异常，期望列表能像常规应用一样完美适配屏幕。

相关代码 #

列表视图代码

List(pictures) { picture in
    NavigationLink(destination: AstronomyPictureDetailView(picture: picture)) {
        AstronomyPictureAsyncImage(picture: picture)
    }
}
.listStyle(.plain)

窗口组代码

WindowGroup {
    AstronomyPicturesView()
        .environment(AppDI.shared.astronomyPicturesDependencies())
        .environment(AppDI.shared.audioPlayerDependencies())
}

不同系统运行效果 #

运行系统	效果展示
iPadOS
iOS
visionOS

修复步骤 #

1. 检查AstronomyPictureAsyncImage的布局约束
   布局异常核心原因通常在自定义异步图片视图。visionOS与iOS/iPadOS的空间布局逻辑存在差异，需给图片视图设置明确的尺寸约束：

// 在AstronomyPictureAsyncImage内部添加适配逻辑
AsyncImage(url: URL(string: picture.url)) { phase in
    switch phase {
    case .success(let image):
        image.resizable()
            .aspectRatio(contentMode: .fill)
            .frame(height: 200)
            .clipped()
    default:
        ProgressView()
    }
}

2. 调整List的系统适配设置
   给List添加导航栏和安全区域适配，确保列表占满屏幕：

NavigationStack { // iOS 16+使用NavigationStack，旧版本替换为NavigationView
    List(pictures) { picture in
        NavigationLink(destination: AstronomyPictureDetailView(picture: picture)) {
            AstronomyPictureAsyncImage(picture: picture)
        }
    }
    .listStyle(.plain)
    .navigationBarTitle("天文图片")
    .navigationBarTitleDisplayMode(.inline)
    .edgesIgnoringSafeArea(.bottom)
}

3. 系统差异化布局处理
   如果需要针对不同系统做布局区分，使用条件编译：

List(pictures) { picture in
    NavigationLink(destination: AstronomyPictureDetailView(picture: picture)) {
        if #available(iOS 17.0, visionOS 1.0, *) {
            AstronomyPictureAsyncImage(picture: picture)
                .frame(height: 220)
        } else {
            AstronomyPictureAsyncImage(picture: picture)
                .frame(height: 200)
        }
    }
}

4. 清理窗口组额外限制
   确保WindowGroup没有自定义尺寸限制，保持默认适配逻辑：

WindowGroup {
    AstronomyPicturesView()
        .environment(AppDI.shared.astronomyPicturesDependencies())
        .environment(AppDI.shared.audioPlayerDependencies())
}

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