How to make a left vertical tabView on SwiftUI TVOS? - swiftui

Question

Whenever a tabButton is highlighted, I wanna show the corresponding content on the RightMainView, I can use a #Published property on ViewModel to do that, but the problem is that the same RightMainView will be redraw while switching tabs.
The MainView will be a complicated UI and also has focus engine, so I definitely do not want the MainView redraw.
import SwiftUI
struct Model: Identifiable, Equatable {
let id = UUID()
let title: String
static func == (lhs: Model, rhs: Model) -> Bool {
return lhs.title == rhs.title
}
}
class ViewModel: ObservableObject {
let titles = [Model(title: "Home"), Model(title: "live"), Model(title: "setting"), Model(title: "network")]
#Published var selected: Model = Model(title: "Home")
}
struct ContentView: View {
#ObservedObject var viewModel = ViewModel()
var body: some View {
HStack(spacing: 0) {
leftTab
.focusSection()
rightMainView
}.edgesIgnoringSafeArea(.all)
}
private var leftTab: some View {
VStack {
ForEach(viewModel.titles, id: \.self.id) { title in
ZStack {
TabButton(viewModel: viewModel, title: title)
}.focusable()
}
}
.frame(maxWidth: 400, maxHeight: .infinity)
.background(.yellow)
}
private var rightMainView: some View {
VStack {
let _ = print("Redrawing the View")
Text(viewModel.selected.title)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(.red)
}
}
}
struct TabButton: View {
#Environment(\.isFocused) var isFocused
let viewModel: ViewModel
let title: Model
var body: some View {
Text(title.title)
.frame(width: 200)
.padding(30)
.background(isFocused ? .orange : .white)
.foregroundColor(isFocused ? .black : .gray)
.cornerRadius(20)
.onChange(of: isFocused) { newValue in
if newValue {
viewModel.selected = title
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Here are some other things I have tried:
I tried the native TabView, https://developer.apple.com/documentation/swiftui/tabview, the View does not redrew while switch tabs, but it only support horizontal, not left vertical model, is there a way I can use native TabView to implement my vertical tabView (with both text and images)
I tried the NavigationSplitView as well, https://developer.apple.com/documentation/swiftui/navigationsplitview, the behavior is not the same on TVOS with iPad tho. On TVOS only the TabButtons are showing, the MainView/details are not showing