SwiftUI [BUG] NavigationView和List仅在iPad模拟器上不显示

Question

iPad模拟器上出现空白页面

前往苹果开发者网站下载下面的教程项目:

https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation

在任何iPad模拟器上运行此项目，您只会得到一个空白页面，但是此代码在Mac / iPhone模拟器和我的真实iPhone设备上工作正常。

这绝对是一个bug，我已向苹果报告了此问题，我在此发布只是想让像我这样遇到此问题的人，请不要浪费时间重置模拟器、检查代码、重启笔记本电脑、等待苹果修复此问题。

屏幕截图

苹果SwiftUI教程项目的示例代码:

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
                    LandmarkRow(landmark: landmark)
                }
            }
            .navigationBarTitle(Text("Landmarks"))
        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        ForEach(["iPhone SE", "iPhone XS Max"], id: \.self) { deviceName in
            LandmarkList()
                .previewDevice(PreviewDevice(rawValue: deviceName))
                .previewDisplayName(deviceName)
        }
    }
}

- Sky

Answer 1

根据@ Procrastin8的答案，我在这里展示示例代码，您只需要添加一行代码.navigationViewStyle(StackNavigationViewStyle()

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
                    LandmarkRow(landmark: landmark)
                }
            }
            .navigationBarTitle(Text("Landmarks"))
        }.navigationViewStyle(StackNavigationViewStyle())
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        ForEach(["iPhone SE", "iPhone XS Max"], id: \.self) { deviceName in
            LandmarkList()
                .previewDevice(PreviewDevice(rawValue: deviceName))
                .previewDisplayName(deviceName)
        }
    }
}

屏幕截图

- Sky

Answer 2

实际上它运行得非常好。默认情况下，在iPad上，NavigationView的navigationStyle意味着您将看到一个已折叠的主视图和一个详细视图。尝试旋转设备或模拟器，然后您将看到主列表。选择一个项目会将其推送到详细视图上。或者，从左边缘向右滑动，您的列表将出现。

不喜欢这种行为？您可以将导航视图的navigationStyle设置为StackNavigationViewStyle()。它只会在任何给定时间显示单个视图。

我目前找不到一个选项来始终显示主视图，因为我的应用程序当前正在使用UISplitViewController进行配置。这可能是一个临时的情况。

- Procrastin8

---

嗨@Procrastin8，是的，旋转设备会看到视图，但对我来说仍然不太好，它的表现有点奇怪。添加StackNavigationViewStyle()是一个解决方案，但整个视图不再是纵向的，不符合我的设计要求。但你的答案展示了一些东西，谢谢。 - Sky

嗨@Procrastin8，你有其他风格可以尝试吗？在Mac和iPad这样的大屏幕上使用StackNavigationViewStyle()会使UI看起来不太好。我喜欢原始的风格。 - Sky

目前自定义功能严重缺乏。如果您真的需要这种行为（对我来说是合理的！），则需要将 UISplitViewController 包装为 UIViewControllerRepresentable 并手动完成。希望苹果很快解决这些不足之处。 - Procrastin8

Answer 3

当我第一次在iPad上看到我的应用程序时，我也感到不舒服。但是后来我意识到，不将整个屏幕都浪费在List上是有道理的，因此默认情况下会在详细视图中显示第一个项目：

var body: some View {
            NavigationView {
                // Main view (by default shows on iPhone but not on iPad)
                VStack{
                    List {
                        ForEach(viewModel.arPictures,  id: \.date) { potd in
                            NavigationLink(destination: POTDDetailView(potd: potd)) {
                                Text(potd.title ?? "")
                            }
                        }
                    }
                    }.navigationBarTitle(Text("Last 8 days pictures"), displayMode: .inline)
                
                // Detail view (by default shows on iPad but not on iPhone)
                if (!viewModel.arPictures.isEmpty){
                        POTDDetailView(potd: viewModel.arPictures[0])
                }
                
            }
    }

- MrAn3