Modifier Order
Part of the Introduction to SwiftUI section of Coddy's Swift journey. Lesson 16 of 50.
Each modifier wraps the view it is called on and returns a new view. So the order matters: a modifier works on everything the earlier modifiers produced.
Text("A")
.padding()
.background(.orange)
Text("B")
.background(.orange)
.padding()For A, the padding is added first and the background then covers the padded view: the orange area is large. For B, the background covers only the text and the padding is added outside it, as clear space around a small orange area.
Read a chain of modifiers from top to bottom: each line changes the view built by the lines above it.
Challenge
EasyThe orange area is only as big as the text, and the padding is outside it. Reorder the modifiers so the orange background also covers the padding.
Try it yourself
import SwiftUI
@main
struct CoddyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
Test yourselfThis lesson includes a short quiz. Start the lesson to answer it and track your progress.
All lessons in Introduction to SwiftUI
Practice on your own: Swift playground