Inspectors (SwiftUI)

The inspector view modifier presents a detail panel that adapts to its environment: a trailing column when horizontal space is regular (iPad landscape, Mac), a sheet when it is compact (iPhone). The API mirrors sheet, driven by an isPresented binding.

Basic Use

struct ItemDetailsView: View {
  let item: String
  @State private var inspectorShown = false

  var body: some View {
    VStack {
      Text(verbatim: item)
      Button {
        inspectorShown = true
      } label: {
        Label("Inspector", systemImage: "info.circle.fill")
      }
    }
    .navigationTitle("Details")
    .inspector(isPresented: $inspectorShown) {
      Form {
        LabeledContent("size", value: item.count.formatted())
      }
      .navigationTitle("Inspector")
    }
  }
}

Sizing the Column

inspectorColumnWidth(min:ideal:max:) bounds the trailing column. It only applies in a regular environment; the compact sheet ignores it.

.inspectorColumnWidth(min: 100, ideal: 150, max: 200)

Tuning the Compact Sheet

When the inspector renders as a sheet, the sheet presentation modifiers apply. Add detents and background interaction so the inspector behaves like a proper bottom sheet on iPhone.

.inspector(isPresented: $inspectorShown) {
  Form {
    LabeledContent("size", value: item.count.formatted())
  }
  .inspectorColumnWidth(min: 100, ideal: 150, max: 200)
  .presentationDetents([.medium, .large])
  .presentationBackgroundInteraction(.enabled)
}

Both sets of modifiers coexist: each platform reads the ones that apply to it.

Keyboard Shortcuts

Add InspectorCommands() to the scene's commands and the system provides show and hide inspector shortcuts wherever a view uses the inspector modifier.

WindowGroup {
  ContentView()
}
.commands {
  InspectorCommands()
}