首页 > 解决方案 > SwiftUI 中的平面导航最佳实践

问题描述

所以我正在阅读Apple UI 指南中的导航。在 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
                    }
                }
            }
        }
    }
}

预习

标签: iosswiftui

解决方案


推荐阅读