Trying to implement my own forward/back buttons for the new SwiftUI WebView and reading the documentation I’m totally lost.
What’s the recommended way of implementing forward/back behavior with this component?
Hi. Here's an example (borrowed from one of engineering's test apps) showing how you can implement back/forward buttons on a SwiftUI WebView:
/* first define the back/forward menu view */
private struct ToolbarBackForwardMenuView: View {
struct LabelConfiguration {
let text: String
let systemImage: String
let key: KeyEquivalent
}
let list: [WebPage.BackForwardList.Item]
let label: LabelConfiguration
let navigateToItem: (WebPage.BackForwardList.Item) -> Void
var body: some View {
Menu {
ForEach(list) { item in
Button(item.title ?? item.url.absoluteString) {
navigateToItem(item)
}
}
} label: {
Label(label.text, systemImage: label.systemImage)
.labelStyle(.iconOnly)
} primaryAction: {
navigateToItem(list.first!)
}
.menuIndicator(.hidden)
.disabled(list.isEmpty)
.keyboardShortcut(label.key)
}
}
/* then add a toolbar to your web view with back/forward buttons*/
WebView(viewModel.page)
....other stuff here ...
.toolbar {
ToolbarItemGroup(placement: Self.navigationToolbarItemPlacement) {
ToolbarBackForwardMenuView(
list: viewModel.page.backForwardList.backList.reversed(),
label: .init(text: "Backward", systemImage: "chevron.backward", key: "[")
) {
viewModel.page.load($0)
}
#if os(iOS)
Spacer()
#endif
ToolbarBackForwardMenuView(
list: viewModel.page.backForwardList.forwardList,
label: .init(text: "Forward", systemImage: "chevron.forward", key: "]")
) {
viewModel.page.load($0)
}
}
ToolbarItemGroup(placement: .principal) {
PrincipalToolbarGroup()
}
}