ios - SwiftUI 中的平面导航最佳实践
问题描述
所以我正在阅读Apple UI 指南中的导航。在 SwiftUI 中,对于分层导航,我们使用NavigationLink
-View。平面导航例如是苹果音乐中每首歌曲的视图。
我的问题:
我有一个解决方案,但我想知道最佳实践解决方案是什么。
此外,我必须自己添加动画,而
NavigationLink
我是“免费”获得的。为什么过渡不起作用?跳过歌曲时,我试图获得与苹果音乐类似的动画。
import SwiftUI
struct Song:Identifiable{
var id = UUID()
var name:String
var cover = Color(red: Double.random(in: 0...1), green: Double.random(in: 0...1), blue: Double.random(in: 0...1))
}
struct ContentView: View {
var songs:[Song] = []
init(){
for i in 0...1000{
self.songs.append(Song(name: "Song \(i)"))
}
}
@State var index = 0
var body: some View {
VStack{
DetailView(song:songs[index])
.transition(.asymmetric(insertion: .move(edge: .leading), removal: .move(edge: .trailing)))
SongNavigation(index:$index, totalSongs: songs.count)
}.padding()
}
}
struct DetailView: View{
var song:Song
var body: some View{
VStack{
Text(song.name)
}.frame(minWidth:0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity).background(song.cover)
}
}
struct SongNavigation:View{
@Binding var index:Int
var totalSongs:Int
var body: some View{
HStack{
Button("previous"){
withAnimation(){
if self.index > 0{
self.index -= 1
}
}
}
Spacer()
Button("next"){
withAnimation(){
if self.index != self.totalSongs-1 {
self.index += 1
}
}
}
}
}
}
解决方案
推荐阅读
- python - 无法使用 Dash 和 Python 在 html 页面上绘制来自上传的 csv 的数据
- android - react-native - createBottomTabNavigator 初始渲染高度问题
- django-rest-framework - 如何在 django rest 框架中设置 arangodb
- amazon-web-services - EFS 卷绑定在 ECS 任务定义的每个“terraform apply”上自动分离/重新附加
- android - 尝试使用 vs 代码在真实设备上运行我的颤振应用程序
- android - Android - 合并使用前后摄像头拍摄的视频
- windows - 在 Windows bat 文件中获取 git 命令的输出
- windows - heroku 在 Windows 上打开“/.well-known/openid-configuration”错误
- javascript - 在下一个 js 中使用时正确输入 javascript
- powershell - Powershell - 参数的使用