加载网络图
在 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)
}
}
比较适合做背景图的展示