前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >swiftUI之加载网络图片

swiftUI之加载网络图片

作者头像
大话swift
发布2019-10-16 19:26:01
2.6K0
发布2019-10-16 19:26:01
举报
文章被收录于专栏:大话swift大话swift

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

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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-10-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 大话swift 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档