SwiftUI:目标视图的导航栏没有背景并且在滚动时没有动画
SwiftUI: Navigation bar of destination view has no background and is not animated on scroll
我正在尝试使用滚动视图制作指向目标视图的导航视图,其中目标视图的导航标题将向内联显示模式设置动画或至少滚动到导航栏本身后面。
基本上我正在尝试复制标准音乐应用程序的行为,特别是当您从图书馆转到歌曲时。
你有源代码视图(库),它有自己的标题,在滚动时动画到内联显示模式。当您点击歌曲时,您还会获得包含新标题(歌曲)的列表,该列表也会在滚动时以内联显示模式动画。
所以我有带 NavigationBarTitle 的主 NavigationView。我移动到带有自己的 NavigationBarTitle 和一些长内容列表的 destinationView。滚动时,主导航视图的 NavigationBarTitle 更改为内联显示模式,但目标视图的 NavigationBar 行为非常奇怪:它基本上是一个没有背景和动画的叠加层。
如果您一起删除目标视图的 NavigationBarTitle,只会让事情变得更糟。它似乎添加了另一个透明的 NavigationBar,里面什么也没有。
也尝试过给导航栏添加背景,查看了文档,但没有找到解决方案。
不确定我是不是做错了什么,或者这只是 SwiftUI 的测试版错误或 Xcode。
import UIKit
struct ContentView: View {
var body: some View {
NavigationView{
List(0..<20) { item in
NavigationLink(destination: DetailedView()) {
Text("Next view")
}
}
.navigationBarTitle("Source View")
}
}
}
struct DetailedView: View {
var body: some View {
List(0...25) { number in
Text("This is \(number)'th row")
}
.navigationBarTitle(Text("Destination View"))
// comment out line above to see empty frame of navigation bar
}
}
这不是您问题的完整答案,而是一个临时解决方法:根据您的喜好,在 child 视图的列表中添加顶部或垂直填充。这就是我一直在做的,直到有更好的解决方案。
这至少会使内容在导航 header 下滚动,并在 header 后面呈现适当的背景。它没有使标题变小的漂亮动画。
struct DetailedView: View {
var body: some View {
List(0...25) { number in
Text("This is \(number)'th row")
}
.padding(.top)
.navigationBarTitle(Text("Destination View"))
}
}
我目前使用的是 beta 5,我认为这是 SwiftUI 的一个持续错误。
我在学习 SwiftUI Landmarks 教程时注意到了同样的问题,您可以轻松重现该问题:https://imgur.com/a/aYgUUH0
目前,为了避免在透明导航栏下看到所有内容滚动,我已将所有导航栏转换为显示为 inline
,因为 automatic
和 large
经验问题。
List {
// ...
}
.navigationBarTitle(Text("MyTitle"), displayMode: .inline)
这已在 iOS 13.1 public 版本中修复(App Store 版本为 Xcode 11)。
我正在尝试使用滚动视图制作指向目标视图的导航视图,其中目标视图的导航标题将向内联显示模式设置动画或至少滚动到导航栏本身后面。
基本上我正在尝试复制标准音乐应用程序的行为,特别是当您从图书馆转到歌曲时。
你有源代码视图(库),它有自己的标题,在滚动时动画到内联显示模式。当您点击歌曲时,您还会获得包含新标题(歌曲)的列表,该列表也会在滚动时以内联显示模式动画。
所以我有带 NavigationBarTitle 的主 NavigationView。我移动到带有自己的 NavigationBarTitle 和一些长内容列表的 destinationView。滚动时,主导航视图的 NavigationBarTitle 更改为内联显示模式,但目标视图的 NavigationBar 行为非常奇怪:它基本上是一个没有背景和动画的叠加层。
如果您一起删除目标视图的 NavigationBarTitle,只会让事情变得更糟。它似乎添加了另一个透明的 NavigationBar,里面什么也没有。
也尝试过给导航栏添加背景,查看了文档,但没有找到解决方案。
不确定我是不是做错了什么,或者这只是 SwiftUI 的测试版错误或 Xcode。
import UIKit
struct ContentView: View {
var body: some View {
NavigationView{
List(0..<20) { item in
NavigationLink(destination: DetailedView()) {
Text("Next view")
}
}
.navigationBarTitle("Source View")
}
}
}
struct DetailedView: View {
var body: some View {
List(0...25) { number in
Text("This is \(number)'th row")
}
.navigationBarTitle(Text("Destination View"))
// comment out line above to see empty frame of navigation bar
}
}
这不是您问题的完整答案,而是一个临时解决方法:根据您的喜好,在 child 视图的列表中添加顶部或垂直填充。这就是我一直在做的,直到有更好的解决方案。
这至少会使内容在导航 header 下滚动,并在 header 后面呈现适当的背景。它没有使标题变小的漂亮动画。
struct DetailedView: View {
var body: some View {
List(0...25) { number in
Text("This is \(number)'th row")
}
.padding(.top)
.navigationBarTitle(Text("Destination View"))
}
}
我目前使用的是 beta 5,我认为这是 SwiftUI 的一个持续错误。
我在学习 SwiftUI Landmarks 教程时注意到了同样的问题,您可以轻松重现该问题:https://imgur.com/a/aYgUUH0
目前,为了避免在透明导航栏下看到所有内容滚动,我已将所有导航栏转换为显示为 inline
,因为 automatic
和 large
经验问题。
List {
// ...
}
.navigationBarTitle(Text("MyTitle"), displayMode: .inline)
这已在 iOS 13.1 public 版本中修复(App Store 版本为 Xcode 11)。