[SwiftUI] WindowGroup まとめ

⌛️ 3 min.

SwiftUI で新しいウィンドウを開く方法の１つである WindowGroup をまとめてみます。

Sponsor Link

環境＆対象

以下の環境で動作確認を行なっています。

macOS14.5
Xcode 15.4
iOS 17.5
Swift 5.9

WindowGroup

WindowGroup は、SwiftUI でウィンドウを表示するための Scene の１つです。

参考
WindowGroupApple Developer Documentation

WindowGroup は、ウィンドウを開くために使用する Scene ですが、意外と多くの使用方法があります。

指定可能な要素について順番に見ていきます。

Title

WindowGroup 生成時にタイトルを指定することができます。

タイトルには、Text, LocalizedStringKey, StringProtocol のいずれかを指定することができます。

＃ macOS では省略するとアプリ名が表示されます。

import SwiftUI

@main
struct WindowGroupsApp: App {
    var body: some Scene {
        WindowGroup("MyWindowTitle", content: {
            ContentView()
        })
    }
}

WindowID

WindowGroup 使用時に、ID を設定しておくことができます。

SwiftUI では、Environment の openWindow を使用するとコード中から Window を開くことができます。
その際に、どの Window を開くかの指定にこの ID を使用することができます。

MEMO

常に ID を指定しないといけないということではありません。ID なしに WindowGroup を使用することもできます。

先に説明したタイトルと合わせて指定することもできます。

以下では、”MyWindowID” という ID を指定して WindowGroup を使用しています。
ContentView 内の Button から、openWindow を使用して、ID 指定でウィンドウを開いています。

import SwiftUI

@main
struct WindowGroupsApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        WindowGroup("MyWindowTitle", id: "MyWindowID", content: {
            Text("MyWindow!!")
        })
    }
}

struct ContentView: View {
    @Environment(\.openWindow) private var openWindow
    var body: some View {
        VStack {
            Button(action: {
                openWindow(id: "MyWindowID")
            }, label: { Text("open MyWindow") })
        }
        .padding()
    }
}

なお、ContentView が表示されている Window には、タイトルを指定していないので、アプリ名である “WindowGroups” という表示になっています。

Data

少なくない Window は、データを受け取りそのデータを表示することを目的とします。

そのような時向けに、渡したいデータを指定するだけで Window を開くことができます。
データの型を指定するということになります。

Apple は、Data-driven window group と呼んでいます。

＃タイトル、ID を合わせて指定することもできます。

気をつけるべき点として、渡されてくるデータは、Binding<データ型?> という型になっている点です。

import SwiftUI

@main
struct WindowGroupsApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        WindowGroup("MyWindowTitle", id: "MyWindowID", content: {
            Text("MyWindow!!")
        })
        WindowGroup("MyWindowTitle", id: "MyStringWindowID", for: String.self, content: { $string in
            let text = string ?? "No-String"
            Text("MyStringWindow for \(text)")
        })
    }
}

struct ContentView: View {
    @Environment(\.openWindow) private var openWindow
    var body: some View {
        VStack {
            GroupBox("id", content: {
                Button(action: {
                    openWindow(id: "MyWindowID")
                }, label: { Text("open MyWindow") })

            })
            GroupBox("for", content: {
                Button(action: {
                    openWindow(value: "Hello")
                }, label: { Text("String Hello") })
                Button(action: {
                    openWindow(value: "こんにちわ")
                }, label: { Text("String こんにちわ") })
            })
        }
        .padding()
    }
}

また、動画をよく見ると、ID とデータ内容が同じ Window がすでに開かれている場合には、その Window を TopMost に持ってくるという動作に変わります。

Default値

データを渡す時には、Binding<データ型?> という型で渡されると説明しました。

このデータに対して、デフォルト値を指定することができます。その時には、渡されるデータ型は、Binding<データ型> (Optional でない) となります。

MEMO

ID とデータ型を合わせて指定することで、汎用的な型(たとえば String)を受け取る Window も使い分けることができます。
ID を具体的に指定することで、データを渡しながら特定の Window で開くことを指定できるということです。

同じ String 型のデータを使用していますが、id を指定することで、処理対象の WindowGroup を指定しています。

import SwiftUI

@main
struct WindowGroupsApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        WindowGroup("MyWindowTitle1", id: "MyWindowID", content: {
            Text("MyWindow!!")
        })
        WindowGroup("MyWindowTitle2", id: "MyStringWindowID", for: String.self, content: { $string in
            let text = string ?? "No-String"
            Text("MyStringWindow for \(text)")
        })
        WindowGroup("MyWindowTitle3", id: "MyDefaultStringWindowID", for: String.self, content: { $string in
            Text("MyStringWindow for \(string)")
        }, defaultValue: {
            "defaultString"
        })

    }
}

struct ContentView: View {
    @Environment(\.openWindow) private var openWindow
    var body: some View {
        VStack {
            GroupBox("id", content: {
                Button(action: {
                    openWindow(id: "MyWindowID")
                }, label: { Text("open MyWindow") })

            })
            GroupBox("for", content: {
                Button(action: {
                    openWindow(value: "Hello")
                }, label: { Text("String Hello") })
                Button(action: {
                    openWindow(value: "こんにちわ")
                }, label: { Text("String こんにちわ") })
            })
            GroupBox("default", content: {
                Button(action: {
                    openWindow(id: "MyDefaultStringWindowID", value: "こんにちわ")
                }, label: { Text("String こんにちわ") })
            })
        }
        .padding()
    }
}

Default 値については個人的にはあまり使用用途が思い浮かばなかったのですが、ドキュメントには、”File” – “New Window” で開かれた時などで表示用のデータがないときに呼び出されるとあります。

まとめ

WindowGroup をまとめてみました

WindowGroup まとめ

Title, ID, データ型, デフォルト値を指定できる
ID, データ型で開く Window が選択される

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

SwiftUI おすすめ本

SwiftUI を理解するには、以下の本がおすすめです。

SwiftUI ViewMatery

SwiftUI で開発していくときに、ViewやLayoutのための適切なmodifierを探すのが大変です。
英語での説明になってしまいますが、以下の”SwiftUI Views Mastery Bundle”という本がビジュアル的に確認して探せるので、便利です。

英語ではありますが、１ページにコードと画面が並んでいるので、非常にわかりやすいです。

View に適用できる modifier もわかりやすく説明されているので、ビューの理解だけではなく、どのような装飾ができるかも簡単にわかります。

超便利です

販売元のページは、こちらです。

SwiftUI 徹底入門

＃ SwiftUI は、毎年大きく改善されていますので、少し古くなってしまいましたが、いまでも定番本です。

リンク

Swift学習におすすめの本

詳解Swift

Swift の学習には、詳解 Swift という書籍が、おすすめです。

著者は、Swift の初期から書籍を出していますし、Swift の前に主力言語だった Objective-C という言語についても同様の書籍を出しています。

リンク

最新版を購入するのがおすすめです。

現時点では、上記の Swift 5 に対応した第５版が最新版です。