CODEWITHSUNDEEP
iosswiftswiftui
Kenny Kurochkin
Kenny Kurochkin

Reputation: 1108

SwiftUI how to add an Underline to a Text View?

Is there a way to modify a Text view to have an underline? For example like this text below:

y͟o͟u͟r͟ t͟e͟x͟t͟

Text(Constants.chooseText)
    .font(Font.system(size: 26))
    .foregroundColor(Color.white)
    .padding(.bottom, 80)

Upvotes: 44

Views: 36146

Answers (4)

byaruhaf
byaruhaf

Reputation: 4733

Add the underline modifier on the Text view.

Text("Hello, world!")
    .underline()

Upvotes: 109

Gurjinder Singh
Gurjinder Singh

Reputation: 10299

iOS 16 you can use the underline modifier, If you want anything more advanced like control its position and size, then you can use the background modifier, and in the bg you can set the height, offset, and color of the underline. Alternatively, you can also use the overlay modifier. Sample Code:

// Using background modifier
                    Text("FRANCE")
                        .foregroundColor(Color.white)
                        .background(
                            Color.white
                                .frame(height: 1) // underline's height
                                .offset(y: 14) // underline's y pos
                        )

Output: enter image description here

//Using overlay modifier
              Text("FRANCE")
                        .foregroundColor(Color.white)
                        .overlay(
                            Rectangle()
                                .fill(Color.white)
                                .frame(width: 64, height: 1)
                            , alignment: .bottom
                        )

Output: enter image description here

Upvotes: 12

Enamul Haque
Enamul Haque

Reputation: 5053

You may use below like:

Text("Forget User ID")
     .underline(true, color: .gray)

Upvotes: 6

Kenny Kurochkin
Kenny Kurochkin

Reputation: 1108

UPDATE adding underline() as the first modifier solved the issue.

Text(Constants.chooseText)
    .underline()
    .font(Font.system(size: 26))
    .foregroundColor(Color.white)
    .padding(.bottom, 80)

Upvotes: 15

Related Questions