SwiftUI indentation in multiline string

Question

Created Apr ’23

Replies 3

Boosts 0

Views 4.2k

Participants 4

I want to create a multiline text view with bullet points indented to the right. The text following these bullet points is long and is looping to the next row, which I want. However, the part that is being looped is not keeping the original indentation that I gave the line. This is my code:

Text("""
        Moving piece
              • To move pieces, click on the piece you want to move
              • Then click on the square you want to move the piece to
              • To unselect a piece, simply click it again
               """)

Here is a screenshot:

Screen Shot 2023-04-12 at 5.45.34 PM.png

The word "piece" is not receiving the indent that the beginning of that sentence was given. How can I fix this?

Answered by Claude31 in 750661022

I do not know a direct solution to do it.

But this provided what you asked for (even though a bit convoluted):

            VStack(alignment: .leading) {
                Text("Moving piece")
                Text("""
                           • To move pieces, click on the piece you want to move
                           • Then click on the square you want to move the piece to
                           • To unselect a piece, simply click it again
                           """)
                .padding(.leading, 20)
            }

Capture d’écran 2023-04-13 à 11.06.40.png

Boost

Answer 1

Claude31 OP

Apr ’23

Accepted Answer

I do not know a direct solution to do it.

But this provided what you asked for (even though a bit convoluted):

            VStack(alignment: .leading) {
                Text("Moving piece")
                Text("""
                           • To move pieces, click on the piece you want to move
                           • Then click on the square you want to move the piece to
                           • To unselect a piece, simply click it again
                           """)
                .padding(.leading, 20)
            }

Capture d’écran 2023-04-13 à 11.06.40.png

0

Answer 2

artemf OP

Jan ’24

Hi there! Decided to post a reply, as I found a working solution. You can define custom grid items width and use it with LazyVGrid:

struct MyView: View {
    let bulletListGridItems = [
        GridItem(.fixed(10)),
        GridItem()
    ]

    var body: some View {
        LazyVGrid(columns: bulletListGridItems, alignment: .leading, content: {
            GridRow {
                VStack(alignment: .leading, content: {
                    Text("•")
                     Spacer()
                 })
                 Text("Play the course as you find it and play the ball as it lies.")
             }
    }
}

This would return:

Screenshot 2024-01-15 at 11.07.21.png

Note, I'm using a Stack with Spacer() to push the bullet to the top of the grid row

2

Answer 3

peromax OP

Sep ’24

HStack(alignment: .top) {
            // bullet
            Text("•")
            // text
            Text("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.")
                .frame(maxWidth: .infinity, alignment: .leading)
        }

Screenshot 2024-09-20 at 17.57.54.png

1