iOS 17からSwiftUIに新しく導入された.inspectorモディファイアは、iPadOSの「インスペクターパネル」のように、特定のコンテンツを一時的に表示・非表示するための便利なツールだそう。
Contents 非表示
.inspectorの基本的な構文
swiftCopyEdit.inspector(isPresented: Binding<Bool>, @ViewBuilder content: () -> Content)isPresented:trueの場合、インスペクターを表示し、falseの場合は閉じる。content: インスペクター内に表示するビューを定義する。
サンプル実装
インスペクターでの色変更オプションを追加
import SwiftUI
struct HomeView: View {
@State private var showInspector = false
@State private var selectedColor: Color = .purple
var body: some View {
VStack {
Button(action: {
showInspector = true
}) {
Image(systemName: "gamecontroller")
.font(.system(size: 120))
.foregroundStyle(selectedColor, .black)
}
}
.inspector(isPresented: $showInspector) {
VStack {
Text("色を選択")
.font(.headline)
Divider()
HStack {
ForEach([Color.red, Color.green, Color.blue, Color.orange, Color.purple], id: \.self) { color in
Circle()
.fill(color)
.frame(width: 40, height: 40)
.onTapGesture {
selectedColor = color
showInspector = false
}
}
}
.padding()
Button("閉じる") {
showInspector = false
}
.padding()
}
.padding()
}
}
}
.inspectorと.popoverの違い
| 特徴 | .inspector | .popover |
|---|---|---|
| 表示形式 | 右側にスライド表示（iPad）、オーバーレイ表示（iPhone） | 浮き上がるポップアップ表示 |
| 用途 | 詳細設定や編集パネル | 簡単な補助情報やアクション |
| 複数のウィンドウ | 可能 | 可能 |
| 自動で閉じる | ユーザーが閉じるまで開いたまま | 他の部分をタップすると自動で閉じる |
