iOS 添加按钮到小部件扩展

Question

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

如何才能做到这一点？

Answer 1

Widgets 没有动画或自定义交互，但我们可以从我们的应用程序深层链接。小部件是一个大的点击区域，同时可以使用新的 SwiftUI在小部件内创建可点击区域。widgetsystemSmallsystemMediumsystemLargelink 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")!
            })
        }
    }
}

Answer 2

如果您想在小部件中包含三个按钮，则需要使用中型或大型小部件样式。这将允许您对每个按钮使用链接控件。小部件样式仅允许您设置小部件 URL。

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

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

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

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