咱們這次只做一個布局，其它的布局都是類似的，這是最終的效果。
還是用上次的項目接著進行了。

1.創(chuàng)建數(shù)據(jù)模型

//分享的數(shù)據(jù)
struct WidgetModel {
var id: Int
var name :String
var icon :String
var linkUri :String
}
//頭部數(shù)據(jù)
struct imageModel {
var id : Int
var image :UIImage
}```

// 模擬頭部數(shù)據(jù)
let imageModels = [
imageModel(id: 0, image: UIImage(named: "beautiful")!)
]
// 模擬分享數(shù)據(jù)
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){ //循環(huán)個數(shù)
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.保存所需要的數(shù)據(jù)

//用來保存所需要的數(shù)據(jù)
struct SimpleEntry: TimelineEntry {
let date: Date
let model: WidgetModel
let imgModel: imageModel
}

4.運行

跑起來看看效果吧，記得把需要的圖片導入，別導錯位置了。

iOS14 Widget從開發(fā)到上線 (一)
iOS14 Widget從開發(fā)到上線 (三)
iOS14 Widget從開發(fā)到上線 (四)

之后的內容會涉及到如下：
1.加載網(wǎng)絡圖片。
2.主動刷新組件數(shù)據(jù)。
3.與主app 共享數(shù)據(jù)。
4.oc-swift 混編 調用。
5.打包上架注意的問題。
可能還會有補充....持續(xù)更新！