5

SwiftUI で新しい AsyncImage を使用して、タイトル付きの画像の長いリストを表示しようとしています。AsyncImage の周りに VStack を配置して画像をスクロールすると、上下にスクロールするたびに画像がリロードされることに気付きました。VStack がない場合、リロードが表示されず、画像がキャッシュされたままのように見えます。

各画像の下にテキストを追加できるように、VStack がスクロール時に画像をリロードしないようにする方法はありますか?

これが実際の例です。VStack の有無にかかわらずスクロールしてみてください。

import SwiftUI

struct TestView: View {

    let url = URL(string: "https://picsum.photos/200/300")

    let columns: [GridItem] = [.init(.fixed(110)),.init(.fixed(110)),.init(.fixed(110))]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns) {
                ForEach(0..<20) { _ in
                    // VStack here causes to images to reload on scrolling
                    VStack {
                        AsyncImage(url: url) { image in
                            image
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                        } placeholder: {
                            Image(systemName: "photo")
                                .imageScale(.large)
                                .frame(width: 110, height: 110)
                        }
                    }
                }
            }
        }
    }
}
4

1 に答える 1

7

これが奇妙なバグであることに完全に同意します。それが起こっている理由は、LazyVGridビューをレイアウトする方法に関係しており、VStackここで使用すると、表示するビューが複数あるという印象を与えると思います。これは Apple 側の仕事ではありませんが、これが私が解決した方法VStacksですAsyncImage。元のエラーが何であるかは完全にはわかりませんが、これで修正されることはわかっています。

struct MyTestView: View {
    let url = URL(string: "https://picsum.photos/200/300")
    let columns: [GridItem] = [.init(.fixed(110)),.init(.fixed(110)),.init(.fixed(110))]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns) {
                ForEach(0..<20) { i in
                    AsyncImage(url: url) { image in
                        VStack {
                            image
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                            
                            Text("label \(i)")
                        }
                    } placeholder: {
                        VStack {
                            Image(systemName: "photo")
                                .imageScale(.large)
                                .frame(width: 110, height: 110)
                            
                            Text("image broken")
                        }
                    }
                }
            }
        }
    }
}
于 2021-10-02T17:48:46.297 に答える