SwiftUI中具有列表和Foreach的图像

时间:2020-03-05 09:00:11

标签: swift swiftui swiftui-list

想知道是否有人可以提供帮助,我是swiftUI的新手,并且在过去的几周里我一直在学习。我从网址加载图片并显示它们时遇到问题。成功弄清楚这一点后,我遇到了一个错误或者我做错了什么。如果我在foreach循环中列出图像并进行构建,则仅会出现一半图像,如果我仅使用列表,它们看起来都很好,这对我来说毫无意义。如果我再在图像上添加一个框架,然后将其设置为70 x 70,则它们全部显示。

class ImageLoader: ObservableObject {
    var didChange = PassthroughSubject<Data, Never>()
    var data = Data() {
        didSet {
            didChange.send(data)
        }
    }

    init(imageUrl:String) {
        guard let url = URL(string: imageUrl) else { return }
        let task = URLSession.shared.dataTask(with: url) { data, response, error in
            guard let data = data else { return }
            DispatchQueue.main.async {
                self.data = data
            }
        }
        task.resume()
    }
}


struct ImageViewWidget: View {
    @ObservedObject var imageLoader:ImageLoader
    @State var image:UIImage = UIImage()

    init(imageUrl:String) {
        imageLoader = ImageLoader(imageUrl:imageUrl)
    }

    var body: some View {
        
        Image(uiImage: image).resizable()
                .onReceive(imageLoader.didChange) { data in
                    self.image = UIImage(data: data) ?? UIImage()
        }
    }
}

上述代码段是从url获取我的图片的

    ForEach(
         networkManager.post,id:\.id){ post in
         AboutRowView(post:post)
    }

然后遍历返回的图像并在上面调用我的自定义行不起作用,下面的确显示了所有图像,但是我不明白为什么

    List(
         networkManager.post,id:\.id){ post in
         AboutRowView(post:post)
    }

关于行视图,这样您就可以看到被调用的内容

struct AboutRowView: View {
    let post : Posts
    var body: some View {
        VStack(alignment: .leading, spacing: 8){
            ImageViewWidget(imageUrl: post.featured_image)
            .scaledToFill()
            .frame(height:150)
            .clipped()
            Text(post.title.rendered).lineLimit(nil).padding(.leading,16)
                 HStack{
                      ImageViewWidget(imageUrl: post.featured_image).frame(width:70, height:70)
                     .clipped()
                     .clipShape(Circle())
                     VStack(alignment: .leading, spacing: 4){
                          Text("Test Name").font(.headline)
                          Text("Posted 8 Hours Ago").font(.subheadline)
                     }.padding(.leading, 8)

                 }.padding(.leading, 16).padding(.top, 16)

        }.padding(.leading, -18)

    }
}

0 个答案:

没有答案