I'm updating my watch app to support the latest features and UI on watchOS 10.
I want to implement NavigationSplitView, where the user will select a route from a List and view it in a TabView, where you can scroll between routes with the Digital Crown.
That's how I implemented it, following the tutorial on the Apple Developer website:
@State var selected: FavoriteRoute? // conforms to identifiable
var body: some View {
NavigationSplitView {
List(selection: $selected) {
ForEach(favorites.routes) { route in
FavoriteListItemView(route: route)
.tag(route)
}
}
.listStyle(.carousel)
.navigationTitle("Better Rail")
} detail: {
TabView(selection: $selected) {
ForEach(favorites.routes) { route in
FavoriteRouteView(route: route)
.tag(Optional(route))
}
}
.tabViewStyle(.verticalPage)
.toolbar {
ToolbarItem(placement: .topBarTrailing) {
NavigationLink(destination: SearchView(), label: {
Image(systemName: "magnifyingglass")
})
}
}
}
}
Selecting a route in the first time works, but when going back to the List and selecting a different route, the state updates twice. First to the new state and there's an update immediately after to the previous state.
Here's what's happening on video: https://streamable.com/a3kgnu
What am I doing wrong?
FavoriteRouteandFavoriteRouteViewdeclarations.