IOS小組件（7）：小組件點擊交互

引言

  前面我們似乎掌握了實現一個小組件所需要的一切技能，默認情況下桌面點擊小組件，也正常跳轉到了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個小組件怎么支持。