Today I will show you how to use color, gradient, and image as the background of the view

Steps:

• First, add a Text.

• Use yellow as the background color of the Text.

Text("Hello World!")
    .font(.largeTitle)
    .padding()
    .background(.yellow)

• Use an image as the background of the Text.

• Use resizable to adjust the image size so that the Image fits the display area of the Text.

Text("Hello World!")
    .font(.largeTitle)
    .padding()
    .background(Image("iphone_wallpaper_light").resizable())

• Use a linear style gradient as the background of the Text.

• The starting color of the gradient is yellow, and the ending color is blue.

• The gradient line's starting point is at the upper left corner of the Text, and the ending point is at the lower right corner of the Text.

Text("Hello World!")
    .font(.largeTitle)
    .padding()
    .background(LinearGradient(gradient: Gradient(colors: [.yellow, .blue]),
                               startPoint: .topLeading,
                               endPoint: .bottomTrailing))

• Use a graphic as the background of the Text.

• Set the shape to a yellow circle.

• Then set the size of the graphic.

Text("Hello World!")
    .font(.largeTitle)
    .padding()
    .background(Circle().fill(.yellow).frame(width: 220, height: 220))

Follow me on:

(Foks) Hui Wang's LinkedIn