引言

??前面我們似乎掌握了實現一個小組件所需要的一切技能，默認情況下桌面點擊小組件，也正常跳轉到了App中。接下來我們一起來看看，小組件是怎么做到點擊跳轉到App的。

點擊交互方式

點擊Widget窗口喚起APP進行交互指定跳轉支持兩種方式：

widgetURL：點擊區域是Widget的所有區域，適合元素、邏輯簡單的小部件
Link：通過Link修飾，允許讓界面上不同元素產生點擊響應

Widget支持三種顯示方式，分別是systemSmall、 systemMedium、systemLarge，其中：

systemSmall只能用widgetURL修飾符實現URL傳遞接收
systemMedium、systemLarge可以用Link或者widgetUrl處理

widgetURL和Link使用特點

widgetURL一個布局中只有一個生效
Link一個布局中可以有多個
Link可以嵌套widgetURL, widgetURL可以簽到Link
Link可以嵌套Link

點擊交互代碼測試

如果是使用SwifitUI的工程，監聽小組件點擊代碼如下

@main
struct Training1App: App {
  var body: some Scene {
    WindowGroup {
      ContentView().onOpenURL(perform: { url in
        print("點擊了小組件 absoluteString:(url.absoluteString)")
        print("點擊了小組件 relativeString:(url.relativeString)")
      })
    }
  }
}

小號組件點擊交互

VStack {
  Spacer()
  Link(destination: URL(string: "small/link")!) {
    Text("普通文本")
      .font(.system(size: 15))  // 字體
      .foregroundColor(Color(hexString: "#FF0000"))
  }
  Spacer()
  Text(entry.date, style: .timer)
    .multilineTextAlignment(.center)
    .background(Color(hexString: "#FFFF00"))
    .widgetURL(URL(string: "small/widgeturl_text")!)
  Spacer()
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color(hexString: "#00FFFF"))
.widgetURL(URL(string: "small/wigeturl_root"))

結果如下:不管點哪個View都只出現了一個，而且根布局的失效了，Link就不起作用，所以小號組件只能使用widgetURL的方式。

小號組件常用點擊交互方式

VStack {
  Spacer()
  Text("普通文本")
    .font(.system(size: 15))  // 字體
    .foregroundColor(Color(hexString: "#FF0000"))
  Spacer()
  Text(entry.date, style: .timer)
    .multilineTextAlignment(.center)
    .background(Color(hexString: "#FFFF00"))
  Spacer()
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color(hexString: "#00FFFF"))
.widgetURL(URL(string: "small/wigeturl_root"))

結果：widgetURL生效

中號組件點擊交互1

VStack {
  Link(destination: URL(string: "medium/link_text1")!) {
    Text("普通文本")
      .font(.system(size: 15))  // 字體
      .foregroundColor(Color(hexString: "#FF0000"))
  }
  Link(destination: URL(string: "medium/link_text2")!) {
    Text(entry.date, style: .timer)
      .multilineTextAlignment(.center)
      .background(Color(hexString: "#FFFF00"))
  }
  Text("普通文本2")
    .font(.system(size: 15))  // 字體
    .foregroundColor(Color(hexString: "#FF0000"))
    .widgetURL(URL(string: "medium/widgeturl_text"))
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color(hexString: "#00FFFF"))
.widgetURL(URL(string: "medium/widgeturl_root"))

分別點擊三個子View和根布局（空白處）結果：widgetURL只有一個生效，Link都生效

中號組件點擊交互2

VStack {
  Link(destination: URL(string: "medium/link_text1")!) {
    Text("普通文本")
      .font(.system(size: 15))  // 字體
      .foregroundColor(Color(hexString: "#FF0000"))
  }
  Link(destination: URL(string: "medium/link_text2")!) {
    Text(entry.date, style: .timer)
      .multilineTextAlignment(.center)
      .background(Color(hexString: "#FFFF00"))
  }
  Text("普通文本2")
    .font(.system(size: 15))  // 字體
    .foregroundColor(Color(hexString: "#FF0000"))
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color(hexString: "#00FFFF"))
.widgetURL(URL(string: "medium/widgeturl_root"))

分別點擊三個子View和根布局（空白處）結果：多個Link生效，widgerURL嵌套Link生效

中號組件點擊交互3

Link(destination: URL(string: "medium/widgeturl_root")!) {
  VStack {
    Link(destination: URL(string: "medium/link_text1")!) {
      Text("普通文本")
        .font(.system(size: 15))  // 字體
        .foregroundColor(Color(hexString: "#FF0000"))
    }
    Link(destination: URL(string: "medium/link_text2")!) {
      Text(entry.date, style: .timer)
        .multilineTextAlignment(.center)
        .background(Color(hexString: "#FFFF00"))
    }
    Text("普通文本2")
      .font(.system(size: 15))  // 字體
      .foregroundColor(Color(hexString: "#FF0000"))
  }
  .frame(maxWidth: .infinity, maxHeight: .infinity)
  .background(Color(hexString: "#00FFFF"))
}

運行結果：Link嵌套Link生效

結語

??本文介紹了小組件點擊交互的兩種方式，widgetURL和Link，通過測試代碼了解了具體的使用和組合情況。至此，小組件整個流程上的技術點都講解完了。后續還有2個部分：App與小組件數據共享，N個小組件怎么支持。

總結

以上是生活随笔為你收集整理的IOS小组件（7）：小组件点击交互的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。