SwiftUI NavigationView navigationBarTitle LayoutConstraints 问题

Question

这可能与最近推出的新 (12.3) 版本的 XCode 相关，但我有一个非常简单的 SwiftUI 视图：

import SwiftUI

struct HomeView: View {
    var body: some View {
        NavigationView {
            Text("Text")
                .navigationBarTitle("My Title")
        }
    }
}

我在控制台中收到此警告：

2020-12-15 18:25:06.506062-0800 Shopmatic[46177:9585655] [LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x600003636d00 'BIB_Trailing_CB_Leading' H:[_UIModernBarButton:0x7faf15d0dc30]-(6)-[_UIModernBarButton:0x7faf15c17500'Your Lists']   (active)>",
    "<NSLayoutConstraint:0x600003636d50 'CB_Trailing_Trailing' _UIModernBarButton:0x7faf15c17500'Your Lists'.trailing <= _UIButtonBarButton:0x7faf15c16140.trailing   (active)>",
    "<NSLayoutConstraint:0x600003631e50 'UINav_static_button_horiz_position' _UIModernBarButton:0x7faf15d0dc30.leading == UILayoutGuide:0x600002c18ee0'UIViewLayoutMarginsGuide'.leading   (active)>",
    "<NSLayoutConstraint:0x600003631ea0 'UINavItemContentGuide-leading' H:[_UIButtonBarButton:0x7faf15c16140]-(0)-[UILayoutGuide:0x600002c18e00'UINavigationBarItemContentLayoutGuide']   (active)>",
    "<NSLayoutConstraint:0x600003617160 'UINavItemContentGuide-trailing' UILayoutGuide:0x600002c18e00'UINavigationBarItemContentLayoutGuide'.trailing == _UINavigationBarContentView:0x7faf15e10000.trailing   (active)>",
    "<NSLayoutConstraint:0x600003632580 'UIView-Encapsulated-Layout-Width' _UINavigationBarContentView:0x7faf15e10000.width == 0   (active)>",
    "<NSLayoutConstraint:0x600003617520 'UIView-leftMargin-guide-constraint' H:|-(0)-[UILayoutGuide:0x600002c18ee0'UIViewLayoutMarginsGuide'](LTR)   (active, names: '|':_UINavigationBarContentView:0x7faf15e10000 )>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x600003636d00 'BIB_Trailing_CB_Leading' H:[_UIModernBarButton:0x7faf15d0dc30]-(6)-[_UIModernBarButton:0x7faf15c17500'Your Lists']   (active)>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful.

这个简单的例子看起来不错，但是当我做一些更复杂的事情时：

import SwiftUI

struct ListDetailView: View {
    var list: List
    
    var body: some View {
        NavigationView {
            Text("Detail View")
            .navigationBarTitle("Detail View Title")
            .navigationBarTitleDisplayMode(.large)
            .navigationBarItems(
                trailing:
                    Button(action: {
                        print("Button Pressed")
                    }) {
                        Image(systemName: "ellipsis")
                }
            )
        }
    }
}

导航标题区域布局都搞砸了：

Answer 1

Xcode 13.0 测试版 1

除非您添加 StackNavigationViewStyle 修饰符，否则这仍然会导致约束错误。

但是，文档说明StackNavigationViewStyle：

不要直接使用该类型。相反，使用堆栈。

var body: some View {
    NavigationView {
        Text("Text")
            .navigationTitle("Title")
    }
    .navigationViewStyle(.stack)
}

Answer 2

NavigationBarTitle从iOS 14.3. 不过，如果你仍然想使用它，尝试添加 .navigationViewStyle(StackNavigationViewStyle())在navigationView 将修复警告。

       struct ContentView: View {
        var body: some View {
            NavigationView {
                VStack {
                    Text("Hello, world!")
                        .padding()
                    Spacer()
                }
                .navigationBarTitle("Hey there", displayMode: .inline)
            }
            .navigationViewStyle(StackNavigationViewStyle())
        }
    }

新方式：

.navigationBarTitleDisplayMode(.inline)
.toolbar(content: {
     ToolbarItem(placement: .principal, content: {
     Text("Title")
  })})    

Answer 3

它与 无关NavigationBarTitle。. navigationTitle不被弃用。似乎整个问题主要是新的 Xcode 12.4 更新，即使是简单的代码：

var body: some View {
        NavigationView{
            Text("Hopefully will work this time")
                .navigationTitle("Error with constains")
        }
    }

添加.navigationViewStyle(StackNavigationViewStyle())修复问题

var body: some View {
        NavigationView{
            Text("Yes it does!")
                .navigationTitle("Wow it works")
        }
    }.navigationViewStyle(StackNavigationViewStyle())

附注。我的第一个 stackoverflow 回复 xD

Answer 4

上面的答案都不太完整，所以我想补充一下，因为我研究了这个问题很长时间，这就是我得出的结论。我认为这会很有用：

导航视图的有趣之处之一是它如何在大型设备（通常是 iPhone 和大型 iPad）上执行分屏功能。

var body: some View {
        NavigationView {
            Text("Primary")
        }
    }

如果将 iPhone 11 ProMax 旋转到横向（Cmd + ->），您将看到文本视图消失。

SwiftUI 自动考虑横向导航视图并显示 DetailView 而不是主视图（“Primary”）。

您可以通过在 NavigationView 中提供两个视图来按照 SwiftUI 期望的方式解决问题，例如：

var body: some View {
        NavigationView {
            Text("Primary")
            Text("Secondary")
        }
    }

由于我的名气不大，所以只能发一张带有链接的照片（如果我的帖子有用，请评价）：

这就是为什么如果我们添加，会抛出错误“无法同时满足约束”. navigation Bar Title(Text ("Today's Flavors"), displayMode:. inline)

因此，解决方案如下：

1. 将第二个视图添加到导航视图

在这里，当您旋转屏幕时，将显示屏幕#2 - Text(“Secondary”)。

    var body: some View {
            NavigationView {
                Text("Primary")
                Text("Secondary")
            .navigationBarTitle(Text("Today's Flavors"), displayMode: .inline)
            }
    }

2. 修饰符.navigationViewStyle(StackNavigationViewStyle())

但是，如果您想显式指定旋转时始终显示第一个屏幕 (Text("Primary"))，则需要添加 ，.navigationViewStyle(StackNavigationViewStyle) modifier())它允许您始终切换到 Text ("Primary")，而不管屏幕。

var body: some View {
        NavigationView {
            Text("Primary")
            Text("Secondary")
        .navigationBarTitle(Text("Today's Flavors"), displayMode: .inline)
        }
        .navigationViewStyle(StackNavigationViewStyle())

另外，您可以在此处阅读有关 NavigationView 的更多信息

Answer 5

iOS 14.3 已弃用 NavigationBarTitle https://developer.apple.com/documentation/swiftui/view/navigationbartitle(_:displaymode:)-8buvp

您可以使用NavigationTitle和.navigationViewStyle(StackNavigationViewStyle())

import SwiftUI

struct HomeView: View {
    var body: some View {
        NavigationView {
            Text("Text")
                .navigationBarTitle("Hey there", displayMode: .inline)
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

Answer 6

struct QuizView: View {
    var body: some View {

        NavigationView{
            Text("Hello, world!")
             .navigationBarTitle("Ripa", displayMode: .inline)
        }
        .navigationViewStyle(StackNavigationViewStyle()) /// add this line

    }
}

Answer 7

使用这种方法时我没有收到约束通知：

import SwiftUI

struct ConstraintIssue: View {
    var body: some View {
        NavigationView {
            Text("Detail View")
                .toolbar(content: {
                    ToolbarItem(placement: .principal, content: {
                        Text("Detail View Title")
                    })
                    ToolbarItem(placement: .navigationBarTrailing, content: {
                      Button(action: {
                        print("Button Pressed")
                      }) {
                        Image(systemName: "ellipsis")
                      })
                   }
                }
            )
        }
    }
}