IOS小组件（7）：小组件点击交互

最新推荐文章于 2024-01-02 17:27:53 发布

popfisher

最新推荐文章于 2024-01-02 17:27:53 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/qq774232122/article/details/117660396

版权

IOS小组件同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

IOS Widget

10 篇文章 0 订阅

订阅专栏

本文详细介绍了iOS小组件的点击交互方式，包括widgetURL和Link的使用方法，并通过代码示例展示了它们在小、中号组件中的不同交互效果。测试结果显示，小号组件仅支持widgetURL，而中号组件则可以灵活使用Link和widgetURL进行多点交互。此外，文章还探讨了这两种方式的组合和限制，为开发者提供了实践指导。

摘要由CSDN通过智能技术生成

文章目录

引言

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