iOS 添加按钮到小部件扩展

问题描述

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

如何做到这一点？

解决方法

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

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

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

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

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

,

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

---

演示；使用 Link

1. 在您的小部件扩展程序中。

    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()
                
            }
        }
    }

2. 在您的应用中

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")!
            })
        }
    }
}