Menu
Coddy logo textTech

モディファイアの順序

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

各モディファイアは、それが呼び出されたビューをラップし、新しいビューを返します。そのため順序が重要です。モディファイアは、それより前のモディファイアが生成したすべてのものに作用します。

Text("A")
    .padding()
    .background(.orange)

Text("B")
    .background(.orange)
    .padding()

Aでは、まずパディングが追加され、その後に背景がパディングされたビューを覆います。オレンジ色の領域は大きくなります。Bでは、背景はテキストのみを覆い、パディングはその外側に追加され、小さなオレンジ色の領域の周囲に余白として表示されます。

修飾子の連鎖を上から下へ読みます。各行は、それより上の行によって構築されたビューを変更します。

challenge icon

チャレンジ

簡単

オレンジ色の領域はテキストと同じ大きさだけで、パディングはその外側にあります。モディファイアの順序を入れ替えて、オレンジ色の背景がパディングも覆うようにしてください。

自分で試してみよう

import SwiftUI

@main
struct CoddyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
quiz icon腕試し

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

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

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