导航视图格式问题
Navigation View Formatting Trouble
我是新手,使用 XCode 13.0 创建一个非常基本的应用程序,需要有一个设置视图。我想在点击标签时导航到“设置”视图。为此,使用带有 NavigationLink 的 NavigationView 似乎是明智的。
不幸的是,我遇到了一个格式问题,该问题导致设置标签(齿轮图标)所在的 HStack 变得一团糟,如下所示:
这就是我想要的,下面代码的结果:
HStack(spacing: 25) {
... other labels
Label ("", systemImage: "gear")
.foregroundColor(.gray)
.font(.title)
.onTapGesture(perform: {
// Set a state variable that triggers an extension
// that brings up the SettingsView
})
}
这是NavigationView封装齿轮图标标签时的效果。注意它周围的垂直和水平白色 space。
HStack(spacing: 25) {
... other labels
NavigationView {
NavigationLink(destination: SettingsView()) {
Label ("", systemImage: "gear")
.foregroundColor(.gray)
.font(.title)
}.navigationBarTitle(Text(""))
}
}
从字面上看,我已经(偶尔)在这个问题上花费了数周时间,查找了数十个答案并尝试了各种格式选项,但没有成功。我也试过将父堆栈和祖父堆栈封装到 NavigationView 中。无济于事。当然,这是微不足道的事情。有人能指出我正确的方向吗?
p.s。还有其他问题在于导航 link 作为子 window 打开;我打算稍后再解决。
编辑:对,所以我尝试使用 Yrb 的代码:
HStack(spacing: 25) {
... other labels
NavigationView {
NavigationLink(destination: Text("Linked View")) {
Image(systemName: "gear")
.foregroundColor(.gray)
.font(.title)
}
.fixedSize()
.background(Color.red)
}
]
遗憾的是,没有实质性的改变...
在诊断这类问题时,它有助于抛出一个带颜色的 .background()
。然后就可以看到问题了。在这种情况下,它是双重的,第一,您需要使用 .fixedSize
将视图缩小到必要的最小尺寸。那会给你留下图标加上一点 space。那是因为你使用了一个标签,因为它为你用作填充的 Text("")
留下了一个位置。因为你只想要图像,所以使用 Image(systemName:)
然后代码如下所示:
struct NavLinkNoSpace: View {
var body: some View {
NavigationView {
NavigationLink(destination: Text("Linked View")) {
Image(systemName: "gear")
.foregroundColor(.gray)
.font(.title)
}
.fixedSize()
// Setting this shows you what space you are using. Remove it when you are done
.background(Color.red)
}
}
}
还有一些事情。如果您从未设置过 NavigationTitle,则无需将其设置为“”。在你的例子中,没有标题,所以我简单地删除了它,没有任何效果。
更重要的是,一些评论解决了这个问题,您应该在视图层次结构中只有一个 NavigationView
。只要你在层次结构中,你就不需要包装像 NavigationLink
这样的东西来让它们工作。如果你在 child 视图中,你总是可以在预览提供程序中围绕你的视图调用抛出一个,以显示事物的样子,并测试 NavigationLinks
等,但不要只是把它们在你的主要代码中。会导致不良后果。
总结解决主要问题、格式化的方法:关键在于弄清楚什么将 封装在 NavigationView 中。我的错误是假设只有 NavigationLink 需要在 NavigationView 中。
有效的方法是将正文的所有内容放入 NavigationView,如下所示:
var body: some View {
NavigationView {
VStack(spacing: -10) {
Text(appName)
.font(.largeTitle)
.foregroundColor(.blue)
.padding(.bottom)
// ...
// includes a bunch of VStacks and HStacks
// ... and finally
NavigationLink(destination: SettingsView()) {
Image(systemName: "gear")
.foregroundColor(.gray)
.font(.title)
// ... more stuff
// ... and finally
}.padding(.top, -100) // NavigationView
} // body
我是新手,使用 XCode 13.0 创建一个非常基本的应用程序,需要有一个设置视图。我想在点击标签时导航到“设置”视图。为此,使用带有 NavigationLink 的 NavigationView 似乎是明智的。
不幸的是,我遇到了一个格式问题,该问题导致设置标签(齿轮图标)所在的 HStack 变得一团糟,如下所示:
这就是我想要的,下面代码的结果:
HStack(spacing: 25) {
... other labels
Label ("", systemImage: "gear")
.foregroundColor(.gray)
.font(.title)
.onTapGesture(perform: {
// Set a state variable that triggers an extension
// that brings up the SettingsView
})
}
这是NavigationView封装齿轮图标标签时的效果。注意它周围的垂直和水平白色 space。
HStack(spacing: 25) {
... other labels
NavigationView {
NavigationLink(destination: SettingsView()) {
Label ("", systemImage: "gear")
.foregroundColor(.gray)
.font(.title)
}.navigationBarTitle(Text(""))
}
}
从字面上看,我已经(偶尔)在这个问题上花费了数周时间,查找了数十个答案并尝试了各种格式选项,但没有成功。我也试过将父堆栈和祖父堆栈封装到 NavigationView 中。无济于事。当然,这是微不足道的事情。有人能指出我正确的方向吗?
p.s。还有其他问题在于导航 link 作为子 window 打开;我打算稍后再解决。
编辑:对,所以我尝试使用 Yrb 的代码:
HStack(spacing: 25) {
... other labels
NavigationView {
NavigationLink(destination: Text("Linked View")) {
Image(systemName: "gear")
.foregroundColor(.gray)
.font(.title)
}
.fixedSize()
.background(Color.red)
}
]
遗憾的是,没有实质性的改变...
在诊断这类问题时,它有助于抛出一个带颜色的 .background()
。然后就可以看到问题了。在这种情况下,它是双重的,第一,您需要使用 .fixedSize
将视图缩小到必要的最小尺寸。那会给你留下图标加上一点 space。那是因为你使用了一个标签,因为它为你用作填充的 Text("")
留下了一个位置。因为你只想要图像,所以使用 Image(systemName:)
然后代码如下所示:
struct NavLinkNoSpace: View {
var body: some View {
NavigationView {
NavigationLink(destination: Text("Linked View")) {
Image(systemName: "gear")
.foregroundColor(.gray)
.font(.title)
}
.fixedSize()
// Setting this shows you what space you are using. Remove it when you are done
.background(Color.red)
}
}
}
还有一些事情。如果您从未设置过 NavigationTitle,则无需将其设置为“”。在你的例子中,没有标题,所以我简单地删除了它,没有任何效果。
更重要的是,一些评论解决了这个问题,您应该在视图层次结构中只有一个 NavigationView
。只要你在层次结构中,你就不需要包装像 NavigationLink
这样的东西来让它们工作。如果你在 child 视图中,你总是可以在预览提供程序中围绕你的视图调用抛出一个,以显示事物的样子,并测试 NavigationLinks
等,但不要只是把它们在你的主要代码中。会导致不良后果。
总结解决主要问题、格式化的方法:关键在于弄清楚什么将 封装在 NavigationView 中。我的错误是假设只有 NavigationLink 需要在 NavigationView 中。
有效的方法是将正文的所有内容放入 NavigationView,如下所示:
var body: some View {
NavigationView {
VStack(spacing: -10) {
Text(appName)
.font(.largeTitle)
.foregroundColor(.blue)
.padding(.bottom)
// ...
// includes a bunch of VStacks and HStacks
// ... and finally
NavigationLink(destination: SettingsView()) {
Image(systemName: "gear")
.foregroundColor(.gray)
.font(.title)
// ... more stuff
// ... and finally
}.padding(.top, -100) // NavigationView
} // body