背景

CoddyのSwiftジャーニー「SwiftUI入門」セクションの一部。レッスン 15/50。

.backgroundはビューの背後に色を描画します。ビューの領域を覆うため、パディングによって色の付いた領域はテキストよりも大きくなります：

Text("New")
    .padding()
    .background(.red)
    .foregroundStyle(.white)

色付きの領域の角を丸くするには、.clipShapeを使って形状に合わせて切り抜きます。RoundedRectangle(cornerRadius: 8)では角が丸くなり、Capsule()では両端が完全に丸くなります。

Text("Tag")
    .padding(8)
    .background(.blue)
    .clipShape(RoundedRectangle(cornerRadius: 8))

チャレンジ

簡単

テキストをバッジに変えましょう。標準のパディング、赤い背景、白い文字を追加してください。

自分で試してみよう

import SwiftUI

@main
struct CoddyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

SwiftUI入門のすべてのレッスン

1はじめに

4モディファイア

7リスト

10プロジェクト - Coddy Coffee

2コンテンツの表示

5状態とボタン

8ナビゲーション

11最終チャレンジ

3Stackとレイアウト

6ユーザー入力

9データの共有

自分で練習してみよう: Swiftプレイグラウンド