欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-12 20:51:38
引言 前面我们似乎掌握了实现一个小组件所需要的一切技能,默认情况下桌面点击小组件,也正常跳转到了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的方式。
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"))

分别点击三个子view和根布局(空白处)结果:多个link生效,widgerurl嵌套link生效
IOS小组件(7):小组件点击交互

中号组件点击交互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生效
IOS小组件(7):小组件点击交互

结语

  本文介绍了小组件点击交互的两种方式,widgeturl和link,通过测试代码了解了具体的使用和组合情况。至此,小组件整个流程上的技术点都讲解完了。后续还有2个部分:app与小组件数据共享,n个小组件怎么支持。

上一篇: axios导出 exer

下一篇: 前端SEO