iOS Add Button to Widget Extension

大兔子大兔子 提交于 2021-02-11 04:31:27

问题


I am currently designing a widget for my app and basically, the widget should consist of three buttons. So far, I didn't find any tutorial on how to add buttons to an iOS Widget Extension. I see that e.g. Google Maps uses buttons in their widgets.

How can this be done?


回答1:


If you want to have three buttons in your widget, then you will need to use the medium or large widget style. This will allow you to use Link controls for each button. The small widget style only allows you to set the widget URL.

The button will just be a view that has the link associated with it. When the user presses that view, your app will be started with the associated link. You will need to keep track of the button state in your app and flip the state each time the user clicks the view.

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

See the "Respond to User Interactions" section.

Here is some info on Links. https://developer.apple.com/documentation/SwiftUI/Link




回答2:


Widgets do not have animation or custom interactions, but we can deep link from our widget into our app. systemSmall widgets are one large tap area, while systemMedium and systemLarge can use the new SwiftUI link API to create tappable zones within the widget.


Demo ; using Link

  1. in your widget extension.
    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()
                
            }
        }
    }

  1. in your app
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")!
            })
        }
    }
}


来源:https://stackoverflow.com/questions/65556274/ios-add-button-to-widget-extension

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!