For the inner padding property of the Text view, we can use the padding property to modify the distance between the text content and the border of the Text view, that is, to modify the top, bottom, left, and right padding of the Text view.
To show the padding properties more clearly, first set a black background and white text to the Text view.
Knowledge points:
Set the padding property to 20 and increase the spacing between the Text view and text content.
Text("www.podnu.com")
.accentColor(.white)
.background(.black)
.foregroundColor(.white)
.padding(20)Because the order of chaining calls is from top to bottom, if you set the padding of the Text view first, and then set the background color and font color of the Text view, the padding will also have the corresponding background color.
Text("www.podnu.com")
.padding()
.accentColor(.white)
.background(.black)
.foregroundColor(.white)Visual effects:
Add multiple padding properties to the Text view to create a border with a color gradient from outside to inside.
Set the style of the text content to largeTitle to display the text content more clearly.
Set the value of the padding property to 20 to increase the spacing between the Text view and the text content.
Set the background color of the Text view to red.
Go ahead and set the padding property to 20 to increase the spacing by another 20 points.
Set the background color of the Text view to green for the new padding.
Set the padding property to 20 again to increase the spacing around the second layer of the Text view.
Finally, set the background color to blue for the new padding, so to add red, green, and blue borders to the Text view.
Text("Hello World!")
.font(.largeTitle)
.padding(20)
.background(.red)
.padding(20)
.background(.green)
.padding(20)
.background(.blue)Visual effects:
Follow me on:
Comentarios