ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-06-07 12:36:27  阅读:195  来源: 互联网

标签:Color hexString 小组 IOS widgetURL URL 点击 Link 交互


引言

  前面我们似乎掌握了实现一个小组件所需要的一切技能,默认情况下桌面点击小组件,也正常跳转到了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个小组件怎么支持。

标签:Color,hexString,小组,IOS,widgetURL,URL,点击,Link,交互
来源: https://www.cnblogs.com/popfisher/p/14858349.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有