top of page
Search
Writer's pictureHui Wang
Jan 18, 20222 min read

2. SwiftUI: Properties of the Text View


Use the properties of the Text view to adjust the visual style of text such as kerning, line spacing, offset values, framing, and alignment.


Knowledge points:

  • Add a Text view and set its word spacing to 10 using the tracking property. The tracking property represents the average word spacing of a set of text.

Text("www.podnu.com")
                .tracking(10)

  • Add another Text view and use the kerning property to set its word spacing to 10. The kerning property represents the average word spacing of a set of characters.

Text("www.podnu.com")
                .kerning(10)

  • Add a blur effect to the Text view and set the blur radius to 1

Text("www.podnu.com")
                .blur(radius: 1)

Visual effects:


  • Add a Text view with longer text content, set the line spacing to 20, and don't limit the number of lines.

Text("SwiftUI helps you build great-looking apps across all Apple platforms with the power of Swift — and as little code as possible. With SwiftUI, you can bring even better experiences to all users, on any Apple device, using just one set of tools and APIs.")
                .lineSpacing(20)
                .lineLimit(nil)


Visual effects:


  • Add a Text view and set the text content in the horizontal direction, offset the distance to the right by 40 points.

Text("www.podnu.com")
                .offset(x: 40, y: 0)

  • Add a Text view and set its width to 200 and height to 60, with the text content in the bottom right corner of the Text view. And set the background color to red.

Text("www.podnu.com")
                .frame(width: 200, height: 60, alignment: .bottomTrailing)
                .background(.red)

Visual effects:


  • Add a Text view, same as the previous Text view. Set its width to 200, height to 60, and the text content to be in the bottom right corner of the Text view. And set the background color to red.

  • Call the position property of the Text view, which will invalidate the alignment, so the text is no longer in the bottom right corner of the Text view, but is offset 30 points to the right and down from the top left corner of the Text view.

Text("www.podnu.com")
                .position(x: 30, y: 30)
                .frame(width: 200, height: 60, alignment: .bottomTrailing)
                .background(.red)

Visual effects:


  • Add a Text view with a width of 300 and a height of 200 and set it to display 5 lines of text. By default, text is left-aligned.

Text("SwiftUI\nuses\na\ndeclarative\nsyntax")
                .frame(width: 300, height: 200)
                .lineLimit(5)

Visual effects:


  • Finally, call multilineTextAlignment to change the alignment of the multi-line text content to the center.

Text("SwiftUI\nuses\na\ndeclarative\nsyntax")
                .frame(width: 300, height: 200)
                .lineLimit(5)
                .multilineTextAlignment(.center)

Visual effects:


 

Follow me on:

Comments

bottom of page