Is page-based navigation possible in a SwiftUI app on WatchOS?

Question

I see page-based navigation is supported for WatchOS, but is there a way to access this functionality with SwiftUI?

I posted a detailed description how to implement this as an answer to another question here: https://stackoverflow.com/a/62392066/1687087 — a learner has no name, Jun 15 '20 at 16:05

score 8 · Accepted Answer · answered Dec 23 '20 at 11:32

8

If you are using the new SwiftUI App Lifecycle and can't access Storyboards (or just need a solution for App Delegate Cycle without using Storyboards), you can use the new Page View style in SwiftUI 2:

WindowGroup {
   TabView {
     Page1View()
     Page2View()
   }
   .tabViewStyle(PageTabViewStyle())
}

answered Dec 23 '20 at 11:32

Sharath Sriram

160
2
5

1

Yes TabView does it, new for WatchOS 7. This allowed me to finally delete the storyboard entirely. Thanks! – Brett Dec 27 '20 at 14:33
Are you allowed more than 10 pages? – alamodey Mar 21 '21 at 03:45
@alamodey seems like there's a limitation of 10 items. I am unable to add more. But for the main page based navigation, you wouldn't want more than 10 tabs would you? :) – Sharath Sriram Mar 22 '21 at 08:16
@SharathSriram I used this UI element to create a series of tips to use my Watch app so I had a bit more than 10 but trimmed it down to 10 now. – alamodey Mar 22 '21 at 10:38

Gereon · Answer 2 · 2020-01-13T19:54:17.467

Yes, this is possible. First, define hosting controllers for each of your pages like so

class Page1HostingController: WKHostingController<Page1View> {
    override var body: Page1View {
        self.setTitle("page1")
        return Page1View()
    }
}

class Page2HostingController: WKHostingController<Page2View> {
    override var body: Page2View {
        self.setTitle("page2")
        return Page2View()
    }
}

where Page1View and Page2View are your SwiftUI implementations.

Then, add new view controllers to your Interface.storyboard, set their implementation classes to your new controller classes and connect them via a "next page" segue.

That worked, thanks! I thought SwiftUI was supposed to do away with the story boards though. — Brett, Jan 16 '20 at 03:15

score -1 · Answer 3 · answered Jun 09 '20 at 10:07

There is NavigationLink button which triggers a navigation presentation when pressed.

var body: some View {
    VStack() {
        NavigationLink(destination: Text("Destination view"), label: {
        Text("Title of the NavigationLink button")
      })
    }
  }

Is page-based navigation possible in a SwiftUI app on WatchOS?

3 Answers3