[SwiftUI] プレビュー画面の操作方法

前回の記事では、Xcode を使用して、新規プロジェクトを作成し、「Hello Swift!」を表示するアプリケーションを作成しました。
今回は、プレビュー画面の操作方法について説明します。

環境
Text とは？
プレビューで、Text を編集する
1. SwiftUI Inspector での編集
まとめ

環境

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

Text とは？

プレビュー画面の操作をする前に Text について確認しましょう。
Text とは、アプリ上に文字列を表示するための部品です。
前回の記事では、この Text を使用して「Hello Swift!」という文字列を表示しました。

Text

プレビューで、Text を編集する

SwiftUI Inspector での編集

Text に表示する文字列は、ソースコードから編集することもできますが、プレビュー画面から直接編集することもできます。
はじめに、プレビュー画面の「Hello Swift!」の文字列を[⌘]キーを押しながらクリックします。

Inspector での編集

ポップオーバーが表示されますので[Show SwiftUI Inspector]を選択します。
ポップオーバーに表示される内容は、選択される項目によって異なります。

ポップオーバーの表示

Text 欄では、表示するテキストを変更することができます。
Font 欄では、Font（フォント）やWeigth（太さ）、Color（色）、Alignment（配置）、Line Limit（行数制限）などを設定することができます。いくつかの項目に表示されている「Inherited」というのは「他の項目からの継承」を表しています。SwiftUI で使用する Text のような部品は、他の部品の上に配置することができます。この配置先に設定されている設定値を継承している場合は「Inherited」と表示されます。
Padding 欄では、テキストの周りのスペースを設定します。
Farme 欄では、表示するテキストの幅（Width）、高さ（Height）を設定することができます。

それでは、SwiftUI Inspector で、Width に 200、Height に 30 を入力してみましょう。
すると、コードが以下のように自動で変更されます（6行目に .frame のコードが追加される）。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, Swift!")
            .frame(width: 200.0,height: 30.0)
    }
}

まとめ

今回は、プレビュー画面の操作方法について説明しました。
SwiftUI では、コードを記述しなくても設定が可能な部品があります。SwiftUI Inspector の使い方をマスターして、自分好みにカスタマイズをしてみましょう。