The following code is stripped out from an app that compiles and works under MacOS 11. It shows a tab bar - clicking on an item will highlight it. Under the tab bar is a text edit field where one can edit the title of the selected tab.
There are 2 issues:
- The tab title shown in the title editor is allows out of phase from the selected tab
- Irrespective of which tab item is selected, when the title is edited it always updates the first tab
I'm not sure if I was very lucky that this code ever worked under Big Sur, or if there is an issue with Monterey. I'm definitely not holding this up as example code - I'm sure there are better ways to implement it, but seek opinions on whether it should work.
import SwiftUI
class Document: ObservableObject {
var tabs = [Tab(id: 0), Tab(id: 1)]
var viewSettings = ViewSettings()
}
class Tab: ObservableObject, Identifiable {
let id: Int
@Published var title: String
init(id: Int) {
self.id = id
self.title = "Tab \(id)"
}
}
class ViewSettings: ObservableObject {
@Published var activeTab: Int = 0
}
@main
struct Test: App {
@StateObject var document: Document = Document()
var body: some Scene {
WindowGroup {
ContentView()
.padding()
.environmentObject(document)
.environmentObject(document.viewSettings)
}
}
}
struct ContentView: View {
@EnvironmentObject var document: Document
@EnvironmentObject var viewSettings: ViewSettings
var body: some View {
TabBar(viewSettings: document.viewSettings)
TabEditView(activeTab: document.tabs[viewSettings.activeTab])
}
}
struct TabEditView: View {
@EnvironmentObject var viewSettings: ViewSettings
@ObservedObject var activeTab: Tab
@State var title: String = ""
init(activeTab: Tab) {
print("CONSOLE - Init TabEditView for tab \(activeTab.id)")
self.activeTab = activeTab
}
var body: some View {
HStack {
Text("Tab title:")
TextField("Tab title:", text: $title, onCommit: { activeTab.title = title })
.onAppear { title = activeTab.title }
.onChange(of: viewSettings.activeTab) { _ in
print("CONSOLE - Updating TextField from tab \(activeTab.id)")
title = activeTab.title
}
}
}
}
struct TabBar: View {
@EnvironmentObject var document: Document
@ObservedObject var viewSettings: ViewSettings
var body: some View {
HStack {
ForEach(document.tabs, content: TabItem.init)
}
}
}
struct TabItem: View {
@EnvironmentObject var viewSettings: ViewSettings
@ObservedObject var tab: Tab
init(_ tab : Tab) { self.tab = tab }
var body: some View {
Text(tab.title)
.padding(2)
.background(tab.id == viewSettings.activeTab ? .red : .clear)
.cornerRadius(4)
.onTapGesture {
viewSettings.activeTab = tab.id
}
}
}