SwiftUI中的平面导航最佳实践

时间:2019-12-10 09:25:45

标签: ios swiftui

所以我正在阅读Apple UI guidlines中的导航。在SwiftUI中,对于分层导航,我们使用NavigationLink-View。例如,平面导航是苹果音乐中每首歌曲的视图。

我的问题:

  1. 我有一个解决方案,但我想知道什么是最佳实践解决方案。

  2. 此外,我必须自己添加动画,而使用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
                    }
                }
            }
        }
    }
}

preview

0 个答案:

没有答案