[SwiftUI] ライブラリからビュー（部品）を配置する方法

前回の記事では、HStack や VStack を使用して、ビューを構成する方法について説明しました。
今回は、ライブラリを使用してビュー（部品）を配置する方法について説明します。
なお、本記事は https://developer.apple.com/tutorials/swiftui/creating-and-combining-views を参考にしています。

環境
ライブラリとは？
Text を配置してみよう
まとめ

環境

OS: macOS Big Sur 11.2.1
Xcode: 12.4
Swift: 5.2.4

ライブラリとは？

前回までの記事では、コードに直接「Text」と書いて文字列を表示させました。SwiftUI では、この Text ビュー以外にも、Button や Label、Slider など様々なビューがあります。
これらのビューの書き方（コード）を１つ１つ覚えるのは大変です。
そこで、使用するのが「ライブラリ」です。
ライブラリは下図のように、SwiftUIで使用することができるビュー（部品）の一覧を見ることができます。この一覧から、必要なビューをドラッグ＆ドロップでプレビュー画面に配置し、デザインをすることができます。

ライブラリ

Text を配置してみよう

それでは、新規プロジェクトを作成して Text を配置してみましょう。
Xcode 上部右上の[+] ボタンをクリックするか、[Shift]+[⌘]+[L]キーを押します。
ライブラリが表示され、一覧に様々なビューがあることを確認できます。

ライブラリの表示

ライブラリの一番上は検索窓になっていますので「Text」と入力するか、一覧から Text を見つけましょう。ライブラリの右側には、選択したビューのヘルプが表示されます。全て英語ですが、SwiftUI のコードが理解できると読み進められるようになります。

Text の選択

Text を見つけたら、プレビュー画面にドラッグします。どこに挿入するかを示す青い線が表示されますので、任意の挿入位置が決定したらドロップします。

ドラッグ＆ドロップによる配置

ドラッグ&ドロップが完了すると、コードは以下のようになります。

struct ContentView: View {
    @State private var name = ""
    
    var body: some View {
        VStack {
            Text("Hello, world!")
                .padding()
            Text("Placeholder")
        }
    }
}

まとめ

今回は、ライブラリを利用してビューをデザインする方法について説明しました。
コードを書くことなく、見た目を確認しながらデザインを決定できるのが最大の利点です。
ぜひ活用して、自分好みの画面デザインをしてみてください。