SwiftUI NavigationView NavigationLink View切替

Pocket

NavigationView内に NavigationLinkを実装しdestination内にViewを実装することが可能です。実行後、NavigationLinkをタップするとdestinationへ遷移します。この場合、NavigationViewがないとNavigationLinkは正常な動作をしないようです。

struct Navi1: View{
    @State var active1: Bool = false
    var body: some View{
        NavigationView{
            NavigationLink(destination: Text("Destination1"), isActive: self.$active1){
                Text("NavigationLink1")
            }
        }
    }
}

上記のコードはすごくシンプルな例です。NavigationLink1をタップするとText(“Destination1”)が表示されます。

このNavigationLinkと同じ動作をButtonにさせたい場合は下記のようなコードを書きます。

struct NavigationPane: View {
    let messageDefault = "Destination tag=101"
    @State var iClick: Int?
    @State var sDestination: String = ""
    var body: some View {
        NavigationView{
            VStack{
                NavigationLink(destination:
                    VStack{
                        Text(self.sDestination).onDisappear(perform: {
                            self.sDestination = self.messageDefault
                        })
                        Spacer()
                    }, tag: 101, selection: self.$iClick){
                    Text("NavigationLink1")
                }
                .padding(.bottom)
                NavigationLink(destination:
                    VStack{
                        Text("NavigationLink tag=102")
                        Spacer()
                }, tag: 102, selection: self.$iClick){
                    Text("NavigationLink2")
                }.padding(.bottom)
                Button("Button1",action: {
                    self.sDestination = "Push the Button1 to the destination tag=101"
                    self.iClick = 101
                })
                Spacer()
            }.onAppear(perform: {
                self.sDestination = self.messageDefault
            })
        }
    }
}

上記コードが実行された場合は下のようなイメージです。

NavigationLink1NavigationLink2Button1が表示されています。NavigationLinkは通常通りタップするとdestinationが表示されます。

Buttonをタップするとtag: 101側のNavigationLink destinationが表示されます。その場合、Textには「“Push the Button1 to the destination tag=101”」と表示させています。

NavigationLinkのselection値の変数を変更することで他のNavigationLink destinationが反応してくれるようです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA