iOS将按钮添加到小部件扩展

Posted 2023-02-24

【中文标题】iOS将按钮添加到小部件扩展

【英文标题】：iOS Add Button to Widget Extension

【发布时间】：2021-01-04 00:12:29

【问题描述】：

我目前正在为我的应用程序设计一个小部件，基本上，小部件应该由三个按钮组成。到目前为止，我还没有找到任何关于如何向 ios Widget Extension 添加按钮的教程。我看到了，例如Google 地图在其小部件中使用按钮。

如何做到这一点？

【问题讨论】：

你能补充更多细节吗？您的预期结果是什么？

它们实际上不是 Google 地图小部件中的按钮。他们使用了 Link API。原因 小部件没有自定义交互。

【参考方案1】：

Widgets 没有动画或自定义交互，但我们可以从widget深层链接进入我们的应用程序。 systemSmall 小部件是一个大的点击区域，而systemMedium 和 systemLarge 可以使用新的 SwiftUI link API 在小部件内创建可点击区域。

---

演示;使用Link

在您的小部件扩展中。

    struct YourWidgetEntryView : View 
        var entry: Provider.Entry
        
        @Environment(\.widgetFamily) var family //<- here
        
        @ViewBuilder
        var body: some View 
            switch family 
            case .systemSmall:
                Text("Small") //.systemSmall widgets are one large tap area
            default:
                HStack
                    Link(destination: URL(string: "game:///link1")!, label: 
                        Text("Link1")
                    )
                    Spacer()
                    Link(destination: URL(string: "game:///link2")!, label: 
                        Text("Link2")
                    )
                    Spacer()
                    Link(destination: URL(string: "game:///link3")!, label: 
                        Text("Link3")
                    )
                
                .padding()
                
            
        
    

在您的应用中

struct ContentView: View 
    
    @State var linkOne: Bool = false
    @State var linkTwo: Bool = false
    @State var linkThree: Bool = false
    
    var body: some View 
        NavigationView 
            List 
                NavigationLink(
                    destination: Text("Link1-View"), isActive: $linkOne) 
                    Text("Link1")
                
                NavigationLink(
                    destination: Text("Link2-View"), isActive: $linkTwo) 
                    Text("Link2")
                
                NavigationLink(
                    destination: Text("Link3-View"), isActive: $linkThree) 
                    Text("Link3")
                
            

            .navigationBarTitle("Links")
            .onOpenURL(perform:  (url) in
                self.linkOne = url == URL(string: "game:///link1")!
                self.linkTwo = url == URL(string: "game:///link2")!
                self.linkThree = url == URL(string: "game:///link3")!
            )
        
    

【参考方案2】：

如果您想在您的小部件中拥有三个按钮，那么您将需要使用中等或大的小部件样式。这将允许您为每个按钮使用链接控件。小部件样式只允许您设置小部件 URL。

该按钮将只是一个具有与之关联的链接的视图。当用户按下该视图时，您的应用程序将使用关联的链接启动。您需要跟踪应用中的按钮状态，并在用户每次点击视图时翻转状态。

https://developer.apple.com/documentation/widgetkit/creating-a-widget-extension

请参阅“响应用户交互”部分。

这里是一些关于链接的信息。 https://developer.apple.com/documentation/SwiftUI/Link