IOS小元件（7）：小元件點選互動

popfisher發表於2021-06-07
iOS元件

引言

  前面我們似乎掌握了實現一個小元件所需要的一切技能，預設情況下桌面點選小元件，也正常跳轉到了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個小元件怎麼支援。

相關文章