Inspektoren in SwiftUI


In meinen ersten Monaten mit macOS (damals noch Mac OS X) waren Inspektoren eines der beeindruckendsten Konzepte des Betriebssystems. In vielen Anwendungen gab es in den Fenstern einen gesonderten Bereich, der zusätzliche Informationen oder Werkzeuge zum ausgewählten Element anbot. Beispielsweise verschiedene Stile in einer Textverarbeitung. Dieser Bereich konnte, je nach Bedarf, auf und zugeklappt werden. So etwas kannte ich von Windows nicht.
Im Laufe der Jahre sind diese Inspektoren in Vergessenheit geraten. Einen gesonderten Bereich in einem Fenster zu definieren ist keine Herausforderung mehr. Diesen dann auf und zu klappen zu gestalten nur ein wenig mehr Aufwand. In macOS 14 und iOS 17 halten Inspektoren jedoch in SwiftUI ihren Einzug. Zu meiner Freude heißen sie Inspektoren und sind mit nur geringem Aufwand zu implementieren. Sie funktionieren mit jedem Fenster.
Im folgenden Beispiel wird dem View durch die Definition von inspector(isPresented) ein Inspector-Bereich hinzugefügt. Benötigt wird zusätzlich eine Variable vom Typ bool, des Wert definiert, ob der Bereich aktuell angezeigt werden soll oder nicht. Ändert sich der Variablenwert, wird der Inspektor ein oder ausgeblendet. Dies geschieht automatisch mit einer Animation. Durch die Angabe von inspectorColumnWidth kann die minimale und maximale Größe des Bereiches festgelegt werden. Zusätzlich ermöglicht es dieser Modifier, die Größe des Inspektors durch ziehen mit der Maus zu verändern. Der Modifier interactiveDismissDisabled verhindert, dass der Inspektor, durch ziehen mit der Maus, komplett ausgeblendet wird.

struct ContentView: View {
    
    @State private var isShowingInspector : Bool = false
    
    var body: some View {
        VStack {
            Text("Hello, world!")
            Button(action: { isShowingInspector.toggle() }  , label: {
                Text("Inspector")
            })
        }
        .padding()
        .inspector(isPresented: $isShowingInspector ) {
                Text("Inspector")
                    .inspectorColumnWidth(min: 150, ideal: 150, max: 300)
                    .interactiveDismissDisabled()
        }
    }
}
Stacks Image 305

Geschrieben am: 12.11.2023
Technologien: SwiftUI, Inspector