iOS 添加按钮到小部件扩展

Question

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

如何才能做到这一点？

Answer 1

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

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

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

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

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

Answer 2

Widgets没有 animation 或自定义交互，但我们可以从小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")!
            })
        }
    }
}