IOS小组件(7):小组件点击交互
程序员文章站
2022-06-26 14:05:58
引言 前面我们似乎掌握了实现一个小组件所需要的一切技能,默认情况下桌面点击小组件,也正常跳转到了App中。接下来我们一起来看看,小组件是怎么做到点击跳转到App的。 点击交互方式 点击Widget窗口唤起APP进行交互指定跳转支持两种方式: widgetURL:点击区域是Widget的所有区域,适合 ......
引言
前面我们似乎掌握了实现一个小组件所需要的一切技能,默认情况下桌面点击小组件,也正常跳转到了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个小组件怎么支持。