Hello! - SwiftUI でプログラミング。 - 2

Hello, SwiftUI | Apple Developer Documentation

Edit code and make mistakes

真ん中のエディタ部分をいじっていきます。色々変更してみます。

Text("Hello, world!")

"Hello, world"部分を変えてみます。

Hello, world!      →   　　Knock, knock!

実行してみるとプレビュー画面で文字が変わったのが確認することができます。

この部分を消した時は文字が消え、括弧を片方消した時は

Expected '"' to end string literal

というエラー表示されることを確認します。このエラーは

終了していない文字列リテラル」

文字を囲む括弧の最後の""がないことを示しています。

文字列リテラルというのは、 Swift のString（文字列の型） であり、引用符(" ")で囲まれた文字です。

 Text("")

と修正してやると地球のアイコンのみが表示されることになります。確認できたら

Text("Knock, knock!")

に戻しておきます。

Use the library to add a Text view

SwiftUI では、"View"ははアプリの一部で"Text"はその一例です。

Viewと表示されるデータは違うもので、Textはviewであり括弧内の文字列はデータとなります。

Image で始まるコード行とその下の 2 行を削除します。 次に、テキスト ビューの下に新しい行を追加して、赤丸部分を押します。

次に赤丸部分を押せばテキストが追加されます。

ここで注意点ですが、カーソルを挿入したいところへ移動しておくと自分の思うところへ挿入されます。

文字を"Who's there?"と変えておきます。

Use code completion to add modifiers

次はカスタマイズしていきます。

カーソルを赤四角の場所に移動します。

「.pad」と入力してちょっと一時停止します。 コード補完候補が出てきるまで待ってみましょう。

矢印キーを使用してメニュー内のpadding(_edges:_length:)を強調表示し、Returnキーを押しとコード内に.padding修飾子を挿入することができます。

.padding()　　・・・今は必要ないものを消して括弧のみにします。

"esc"エスケープボタンを押せばキャンセルできます。

.padding 修飾子は、ビューの端の周囲に余分なスペースを追加して、ビューを周囲のビューから分離します。

ドット表記を使用してビューに修飾子を適用します。 そのため、単語のパディングの前にピリオドがあるのです。

同じように

 .background(Color.yellow, in: RoundedRectangle(cornerRadius: 8))

を付けます。

 .padding()
 .background(Color.yellow, in: RoundedRectangle(cornerRadius: 8))

となりますがここで、

.background(Color.yellow, in: RoundedRectangle(cornerRadius: 8)) 
.padding()

逆にしてプレビューを見て身まあしょう。

記入の順番によって文字の周りの余白と背景色の関係があるのがわかります。

最終的には

 Text("Knock, knock!")
                 .padding()
                 .background(Color.yellow, in: RoundedRectangle(cornerRadius: 8))
 
 Text("Who's there?")  
                .padding()
                .background(Color.teal, in: RoundedRectangle(cornerRadius: 8))

となります。