[英]SwiftUI disappear back button with navigationLink
I have 3 views.我有 3 个视图。 One of these have NavigationView second have NavigationLink and last just a child with toolbar.
其中一个有 NavigationView,第二个有 NavigationLink,最后一个只有一个带有工具栏的子项。
So my problem when I added toolbar in last view backButton elegant disappear.所以当我在最后一个视图中添加工具栏时我的问题 backButton 优雅消失了。 How can I solve this?
我该如何解决这个问题?
Screen recording of my problem我的问题的屏幕记录
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
Text("Hello, world!")
.padding()
NavigationLink(destination: ListView()) {
Image(systemName: "trash")
.font(.largeTitle)
.foregroundColor(.red)
}
}.navigationBarHidden(true)
.navigationTitle("Image")
}
}
}
import SwiftUI
struct ListView: View {
@Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
var body: some View {
VStack {
List {
NavigationLink(destination: DetailView()) {
Text("Detail")
}
}
}.navigationBarTitle(Text("Data"), displayMode: .large)
.toolbar {
Button("Save") {
presentationMode.wrappedValue.dismiss()
}
}
}
}
import SwiftUI
struct DetailView: View {
@Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
var body: some View {
VStack {
Text("DetailView")
.padding()
}.navigationBarTitle(Text("Data"), displayMode: .large)
.toolbar {
Button("Save") {
presentationMode.wrappedValue.dismiss()
}
}
}
}
In the console, you'll notice this message:在控制台中,您会注意到以下消息:
2021-04-27 12:37:36.862733-0700 MyApp[12739:255441] [Assert] displayModeButtonItem is internally managed and not exposed for DoubleColumn style .
2021-04-27 12:37:36.862733-0700 MyApp[12739:255441] [Assert] displayModeButtonItem 是内部管理的,不会针对DoubleColumn 样式公开。 Returning an empty, disconnected UIBarButtonItem to fulfill the non-null contract.
返回一个空的、断开连接的 UIBarButtonItem 以履行非空合同。
The default style for NavigationView
is usually DefaultNavigationViewStyle
, which is really just DoubleColumnNavigationViewStyle
. NavigationView
的默认样式通常是DefaultNavigationViewStyle
, 实际上就是DoubleColumnNavigationViewStyle
。 Use StackNavigationViewStyle
instead, and it works as expected.改用
StackNavigationViewStyle
,它按预期工作。
Edit: You are right that StackNavigationViewStyle
will break iPad split view.编辑:你说得对,
StackNavigationViewStyle
会破坏 iPad 拆分视图。 But thankfully, DoubleColumnNavigationViewStyle
works fine in iPad and doesn't hide the back button.但幸运的是,
DoubleColumnNavigationViewStyle
在 iPad 中运行良好,并且不会隐藏后退按钮。 We can then just use a different NavigationStyle
depending on the device, as shown in this answer .然后,我们可以根据设备使用不同的
NavigationStyle
,如this answer所示。
struct ResponsiveNavigationStyle: ViewModifier {
@Environment(\.horizontalSizeClass) var horizontalSizeClass
@ViewBuilder
func body(content: Content) -> some View {
if horizontalSizeClass == .compact { /// iPhone
content.navigationViewStyle(StackNavigationViewStyle())
} else { /// iPad or larger iPhone in landscape
content.navigationViewStyle(DoubleColumnNavigationViewStyle())
}
}
}
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
Text("Hello, world!")
.padding()
NavigationLink(destination: ListView()) {
Image(systemName: "trash")
.font(.largeTitle)
.foregroundColor(.red)
}
}
.navigationBarHidden(true)
.navigationTitle("Image")
}
.modifier(ResponsiveNavigationStyle()) /// here!
}
}
Result:结果:
I don't know why, but it's what worked for me:我不知道为什么,但这对我有用:
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
Button { } label: { } // button to the right
}
ToolbarItem(placement: .navigationBarLeading) {
Text("") // empty text in left to prevent back button to disappear
}
}
I already tried to replace the empty text with EmptyView() but the button keeps disappearing.我已经尝试用EmptyView()替换空文本,但按钮一直消失。
FYI: I have this problem only on my device with iOS 14, but in another device with iOS 15 the back button never disappears.仅供参考:我只在我的带有 iOS 14 的设备上遇到这个问题,但在另一个带有 iOS 15 的设备上,后退按钮永远不会消失。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.