咱们这次只做一个布局，其它的布局都是类似的，这是最终的效果。
还是用上次的项目接着进行了。
1.创建数据模型
//分享的数据
struct WidgetModel {
var id: Int
var name :String
var icon :String
var linkUri :String
}
//头部数据
struct imageModel {
var id : Int
var image :UIImage
}```
// 模拟头部数据
let imageModels = [
imageModel(id: 0, image: UIImage(named: "beautiful")!)
]
// 模拟分享数据
let WidgetModels = [
WidgetModel(id: 0, name: "朋友圈", icon: "1", linkUri: "1"),
WidgetModel(id: 1, name: "微博", icon: "2", linkUri: "2"),
WidgetModel(id: 2, name: "收藏", icon: "3", linkUri: "3"),
WidgetModel(id: 3, name: "按微信", icon: "4", linkUri: "4")
]
2.搭建展示页面
// beautiful 该图片的比例 1.6:1
struct SWidgetEntryView : View {
var entry: Provider.Entry
var body: some View {
VStack (alignment:.center){
GeometryReader {//获取父视图的大小
proxy in
Image("beautiful") //头部图片
.resizable()
.aspectRatio(contentMode:.fit)
.frame(width: proxy.size.width, height: proxy.size.width/1.6)
}
HStack (alignment:.center, spacing:25){
ForEach(0 ..< WidgetModels.count){ //循环个数
index in
let mode = WidgetModels[index]
Link(destination: URL(string: mode.linkUri)!){ //点击事件
VStack{
Image(mode.icon as String) //icon 展示图
.resizable()
.frame(width: 60, height: 60, alignment: .center)
Text(mode.name as String) //文字展示
.frame(width: .infinity, height: 20, alignment: .center)
.foregroundColor(.black)
.font(.system(size: 15))
}
}
}
}
Spacer(minLength: 40)
}
}
}
页面比较简单就没抽取代码，大家可以抽一下，看着会比较舒坦，注释都有看一下就会明白。
3.保存所需要的数据
//用来保存所需要的数据
struct SimpleEntry: TimelineEntry {
let date: Date
let model: WidgetModel
let imgModel: imageModel
}
4.运行
跑起来看看效果吧，记得把需要的图片导入，别导错位置了。
iOS14 Widget从开发到上线 (一)
iOS14 Widget从开发到上线 (三)
iOS14 Widget从开发到上线 (四)
之后的内容会涉及到如下：
1.加载网络图片。
2.主动刷新组件数据。
3.与主app 共享数据。
4.oc-swift 混编 调用。
5.打包上架注意的问题。
可能还会有补充....持续更新！
