Home > AI > IOS > SwiftUI >

order matters between frame, background, and padding

Example 1: order between background and frame
frame > background

Button("Hello World") {
    print(type(of: self.body))
}
.frame(width: 200, height: 200)
.background(Color.red)

// it expands the view 
// then apply the background
// code doesn't work
Button("Hello World") {
    print(type(of: self.body))
}
.background(Color.red)
 .frame(width: 200, height: 200)

// apply background at first
// apply frame (and background will not be redraw)

Example 2: order between padding and frame

You can get a boundary reference to see the result.

padding > frame

Conclusion: padding > frame > background

Button(action: {
}, label: {
Text("HelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorld")
})
.padding()
.frame(width: 200, height: 200)
.background(Color.red)

Leave a Reply