VStackに.onAppearを使ってもうまくはいかない。VStackの一部が開いた時点で発火するからな！答えは位置情報だ。わかったか？悩みに悩んだ一週間だった

だったらListでいいんじゃないの？って思うかもしれないけど、ListはScrollViewが中身入ってるっぽくて、無限スクロールと、sticky headerとの相性が悪かったのだ。

Twitterのマイページみたいなものを作りたかったから。なので、onAppearを使わないで、無限スクロール、つまり下の方に行ったときに発火して、続きが表示される『アレ』を頑張って実装したので、備忘録

最後にGeometryReaderをおいて、位置を比較して発火する

流れとしては、以下のとおり。

1.画面の縦の長さ（=画面の一番下のY座標みたいな感じ）を取る
2.アイテムリストの一番下にgeometryを入れて、座標をリアルタイムで取得する
3.geometryのY座標が、画面の高さより小さいときに、最後まで到達してると判断し、発火させる

///画面の高さ。この高さより、geometry部分が小さくなったら、発火させる
let displayHeight:CGFloat = UIScreen.main.bounds.height
 
VStack(spacing:0){
    
    ForEach(Dataset.Itemlist){item in
        CardView(PostCardData: item)
    }
    
    GeometryReader{proxy -> AnyView in
        return AnyView(
            EmptyView()
                .onChange(of: proxy.frame(in: .global).minY){newminY in //geometry部分の座標が変わったら更新したデータを吐き出す

                    if
                        newminY < displayHeight, ///GeometryReaderの領域の上の部分（newminY）が、画面の中（displayHeight）に入ってきた場合
                        (Date().timeIntervalSince1970 - APITimeData.LastTime) > 2　/// 現在時刻が、最終発火時刻より2秒以上経過してる場合
                    {

                        ///続きを読むを連打されないよう、最後に実行した日時を記録
                        APITimeData.SetTime()
                        
                        //次のデータを取得
                        Dataset.NextGet()
                    }
                }
        )
    }///end geometry
}

これでうまいこと解決できましたよ。

よかったよかった。本当によかったよ

コメント