iOS14 widget：加载网络图以及撑满屏幕

加载网络图

在 getTimeline 方法中，小组件可以用 Image(uiImage: _) 加载网络图：

// url 是网络图片地址
if let url = url, let imageData = try? Data(contentsOf: URL(string: url)!),
        let uiImage = UIImage(data: imageData) {
            return Image(uiImage: uiImage)
}

加载完成后放到主线程里面执行回调函数：

DispatchQueue.main.async {
      completion(timeline)
}

设置图片尺寸

在 swiftUI 中可以通过指定 frame 属性修改图片大小，如下：

Image("xxxx")
    .resizable()
    .frame(width: 300, height: 400)

这样会把图片限制在固定大区域，然后视觉上 可能会有被挤压的感觉

这个问题可以通过添加 aspectRatio() 方法进行成比例的缩放来解决：

// .fill 会充满整个区域 图片会有一部分超出区域 超出部分不显示
// .fit 整个图片会全部显示在指定的宽高区域 区域会有空白的部分
Image("xxxx")
    .resizable()
    .aspectRatio(.fill)
    .frame(width: 300, height: 400)

撑满屏幕

上面的方法适合在固定尺寸大小的区域来图片展示。

如果想让图片在横/纵轴或两个轴上铺满屏幕，需要借助 GeometryReader

通过 GeometryReader 可以查询到父容器大小、position、是否有安全区域等

下面的代码使得图片在两个轴上同时等比缩放 来铺满整个屏幕：

ZStack {
    GeometryReader { geo in
        Image("XXX")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: geo.size.width, height: geo.size.height)
    }
}

比较适合做背景图的展示

参考链接：resizing-images-to-fit-the-screen