Mjeld Technologies

SwiftUIで簡単にPull To Refreshできる部品をGitHubに公開してくれていて、下記URLからダウンロードすることも可能です。

https://github.com/siteline/SwiftUIRefresh

Cocoapodsから取得する場合Podfileファイルに下記を追加します。

pod "SwiftUIRefresh"

pod install updateしimport SwiftUIRefreshすると下記の候補が出てくるようになります。

.pullToRefresh(isShowing: Binding<Bool>, onRefresh: () -> Void)

Usageをまねて下記のコードを書きました。

import SwiftUI
import SwiftUIRefresh

struct NavigationRefresh: View {
    @State var isShowing: Bool = false
    var body: some View {
        NavigationView {
            List (["Ceres", "Toutatis", "Phaethon"], id: \.self) {s in
                Text(s)
            }.navigationBarTitle(Text("SwiftUIRefresh"))
        }.pullToRefresh(isShowing: self.$isShowing){
            DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                self.isShowing = false
            }
        }
    }
}

実行すると下のような挙動です。

【xcode CocoaPods エラー】 *.debug.xcconfig: unable to open

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
            })
        }
    }
}

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

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

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

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