SwiftUI 拆分视图大标题在 iPad 上不起作用答案

【问题标题】：SwiftUI split view large title not working on iPadSwiftUI 拆分视图大标题在 iPad 上不起作用
【发布时间】：2020-01-27 04:13:50
【问题描述】：

我正在尝试使用 SwiftUI 在 iOS 上构建一个非常简单的布局，其中包含侧边栏和详细视图。但似乎不可能在 iPad 上的详细视图中设置大标题。它实际上应该看起来像 Apple 的提醒应用程序。

我想要什么（详细视图中的蓝色文本提醒）：

但是，在我自己的应用程序中，它不起作用。我在 Apple 中找到了这个关于构建列表和导航的示例：https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation

但它在那里也不起作用。即使我像这样在LandmarkDetail.swift 中设置标题：

VStack {
    MapView(coordinate: landmark.locationCoordinate)
        .frame(height: 300)

    CircleImage(image: landmark.image)
        .offset(x: 0, y: -130)
        .padding(.bottom, -130)

    VStack(alignment: .leading) {
        Text(landmark.name)
            .font(.title)

        HStack(alignment: .top) {
            Text(landmark.park)
                .font(.subheadline)
            Spacer()
            Text(landmark.state)
                .font(.subheadline)
        }
    }
    .padding()

    Spacer()
}
.navigationBarTitle(Text(verbatim: landmark.name), displayMode: .large)

我在 iPhone 上对其进行了测试，并且可以正常工作。我还详细添加了另一个NavigationView，但这只会让整个事情变得更糟。我的标题很大，但标题出现在另一个导航栏下方，因此距离顶部有很大的空白。

【问题讨论】：

标签： ios swift swiftui

【解决方案1】：

我确实尝试了一种类似的方法来在拆分视图中保持两边的大标题，但失败了。所以要做到这一点，我想你可以尝试在右边添加一个自定义视图。您可以在 HStack 中添加 NavigationView 并可以安排如下视图

这里是代码

    var body: some View {
        HStack{
        NavigationView {
        List(landmarkData) { landmark in
            NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
                LandmarkRow(landmark: landmark)
            }.isDetailLink(false)
        }
        .navigationBarTitle(Text("Landmarks"), displayMode: .large)
        }
        NavigationView {
            List(landmarkData) { landmark in
                NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
                    LandmarkRow(landmark: landmark)
                }.isDetailLink(false)
            }
            .navigationBarTitle(Text("Landmarks"), displayMode: .large)
        }
        NavigationView {
            LandmarkDetail(landmark: landmarkData[0])
            .navigationBarTitle(Text("Landmarks"), displayMode: .large)
        }
    }
}

注意：目前iPad不支持大标题。

【讨论】：

感谢您的帮助。但是 navigationLink 不是这样工作的吗？当我单击一个项目时，我会在主视图（列表）中看到该视图。不过还是谢谢。
@Brudus 是的，对，直到 Apple 修复错误之前，我们可以创建自定义视图并将其添加到右侧的剩余区域，然后我们可以处理从左侧选择单元格以打开详细信息。

【解决方案2】：

在 Xcode 11.1 中，这个问题似乎得到了解决。我就这个问题与苹果联系过。他们说我应该报告现在不再需要的错误。

我使用了以下代码：

NavigationView {
    VStack {
        MapView(coordinate: landmark.locationCoordinate)
            .frame(height: 300)

        CircleImage(image: landmark.image)
            .offset(x: 0, y: -130)
            .padding(.bottom, -130)

        VStack(alignment: .leading) {
            Text(landmark.name)
                .font(.title)

            HStack(alignment: .top) {
                Text(landmark.park)
                    .font(.subheadline)
                Spacer()
                Text(landmark.state)
                    .font(.subheadline)
            }
        }
        .padding()

        Spacer()
    }
    .navigationBarTitle(Text(verbatim: landmark.name), displayMode: .large)
}
.navigationBarTitle("")
.navigationBarHidden(true)
.navigationViewStyle(StackNavigationViewStyle())

在详细信息屏幕周围添加NavigationView 本身非常重要。否则，大标题将不起作用。就这样，你最终会得到两个导航栏和一个非常大的顶部边距。

但是当您在导航视图本身上使用.navigationBarHidden(true) 和（非常重要！！！）.navigationBarTitle("") 时，它似乎隐藏了第一个导航栏，并且您最终会得到一个在细节中具有大标题的布局查看没有任何额外的边距或奇怪的行为。

其他信息：了解这些规则的适用范围有所不同，这一点非常重要。当您调用NavigationView 的inside 导航栏修饰符时，它将应用此导航视图的导航栏的规则。但是，当您直接在导航视图上调用它时（就像我对上面的隐藏和空标题所做的那样），这些修饰符将针对下一个外部导航栏。

编辑： 看起来像 Xcode 11.2 / 最新的 iPadOS 版本，您需要将 .navigationViewStyle(StackNavigationViewStyle()) 添加到内部导航视图。我已经在上面的代码中添加了。

【讨论】：