swiftUI之加载网络图片

Hello, SwiftUI

SwiftUI之List Group NavigationView ForEach

之前的文章中我们简单的聊了swiftUI 的一点入门知识然后一直放值了这么旧，最近随着Xcode 11的正式推出，也代表这swiftUI正式的进入生产阶段。但是，依然限制很大---只能使用在iOS13/macOS10.15/iPadOS以及以后的版本。不过作为开人员，我们还是需要未雨绸缪提前的完成swiftUI的技能获取

我们先看一个官方给的例子

代码如下

代码语言：javascript复制

struct LandmarkRow: View {    var landmark: Landmark
    var body: some View {        HStack {            landmark.image                .resizable()                .frame(width: 50, height: 50)            Text(verbatim: landmark.name)            Spacer()
            if landmark.isFavorite {                Image(systemName: "star.fill")                    .imageScale(.medium)                    .foregroundColor(.yellow)            }        }    }}
struct LandmarkRow_Previews: PreviewProvider {    static var previews: some View {        Group {            LandmarkRow(landmark: landmarkData[0])            LandmarkRow(landmark: landmarkData[1])        }        .previewLayout(.fixed(width: 300, height: 70))    }}

这是一个简单的图文cell，然而我们看到此时加载的图片数据是bundle到项目中的固定数据，那么怎么加载网络数据呢？

在说加载网络数据之前我们xian来看看Image在swiftUI中的定义

从官方文档中我们看到Image是个struct而并不是一个UIVIew，同时能在swiftUI的struct申明中根本无法夹杂网络判断等操作，那么怎么做呢？

UIViewRepresentable来啦

代码语言：javascript复制

public protocol UIViewRepresentable : View where Self.Body == Never {
    /// The type of `UIView` to be presented.    associatedtype UIViewType : UIView
    /// Creates a `UIView` instance to be presented.    func makeUIView(context: Self.Context) -> Self.UIViewType
    /// Updates the presented `UIView` (and coordinator) to the latest    /// configuration.    func updateUIView(_ uiView: Self.UIViewType, context: Self.Context)
    /// Cleans up the presented `UIView` (and coordinator) in    /// anticipation of their removal.    static func dismantleUIView(_ uiView: Self.UIViewType, coordinator: Self.Coordinator)
    /// A type to coordinate with the `UIView`.    associatedtype Coordinator = Void
    /// Creates a `Coordinator` instance to coordinate with the    /// `UIView`.    ///    /// `Coordinator` can be accessed via `Context`.    func makeCoordinator() -> Self.Coordinator
    typealias Context = UIViewRepresentableContext<Self>}

从定义中我们可以给我们提供了一个关联类型代表我们需要管理的UIView，这也是我们目前接触到的第一个可以直接封装操作UIKit的地方。从给出的方法我们可以看出，这个协议主要做两件事情

① 通过func makeUIView(context: Self.Context) -> Self.UIViewType创建一个需要管理的UIView

②func updateUIView(_ uiView: Self.UIViewType, context: Self.Context)对创建出的UIVIew进行操作更新，比如我们需要的绑定网络图片数据

下面我们看看怎么操作吧

代码语言：javascript复制

struct ContentView_Previews: PreviewProvider {    static var previews: some View {        ScrollView(Axis.Set.horizontal, showsIndicators: false) {            HStack(alignment: VerticalAlignment.top, spacing: 5) {                ForEach(["1","2","3"],id: .utf8CString){ i in                       ContentView(url: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2546307854.jpg")                }            }        }                                          }}

当然了有些数据为了方便我们是写死的，但是总体来说网络图片的数据是活用的，大家在学习的过程中找到不带如何加载网络数据的时候可以做个参考

swift ios

0 人点赞