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的方式。

IOS 小组件(7):小组件点击交互

小号组件常用点击交互方式 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生效

IOS 小组件(7):小组件点击交互

中号组件点击交互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都生效

IOS 小组件(7):小组件点击交互

中号组件点击交互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"))

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwgsjg.html