NEW: My new book Pro SwiftUI is out now – level up your SwiftUI skills today! >>

line up numbers

Forums > SwiftUI

I am displaying a list of string with an associated number in a column. Depending on the length of the string, the position of the number changes. I would like the numbers to all line up (right aligned), with the strings left aligned. The numbers are all integers, so no need to worry about the decimal point. Not sure how to do this, anyone help please?

   

There are many ways to do this, primarily depending on how you are creating and managing your lists of names and numbers.

Here is an example if you are using dictionaries.

struct ContentView: View {

    let myListInts = ["Gary": 10, "James": 25, "Alexander": 17]
    let myListNames = ["Gary", "Mary", "James", "Alexander", "Jane", "Bill"]

    var body: some View {

        List {
            ForEach (myListNames, id: \.self) { thisName in
                HStack {
                    Text("\(thisName.self)")
                    Spacer()
                    Text("\(myListInts[thisName] ?? 0)")
                }
            }
        }
    }
}

Could not see any difference in the example you gave above, other than Alexander. became Alexander

Do you have a clearer example of what you are after?

   

when I typed in the example, the names were all on seperate lines with the bottom set showing the numbers all lining up, so I am unable to show exactly what I mean.

   

is there a way of inserting a screenshot on here?

   

You have to upload / host the screen shot elsewhere, then link to it from here.

Unfortunately you cannot just upload a screenshot on HWS.

   

The code is something like this

struct ScoreColumn: View {
    @Binding var item: Score

    var body: some View {
        VStack(alignment: .trailing , spacing: 5) {
            HStack {
                Text("Birds")
                Spacer()
                TextField("Birds", value: $item.birds, format: .number)
            }

            HStack {
                Text("Bonus Cards")
                Spacer()
                TextField("Bonus Cards", value: $item.bonusCards, format: .number)
            }

            HStack {
                Text("End of Round")
                TextField("End of Round", value: $item.endOfRoundGoals, format: .number)
           }

        }
        .padding(5)
         .animation(nil, value: item)
        .background(Color(item.color.rawValue))
        .listRowInsets(EdgeInsets(top:5, leading: 10, bottom: 5, trailing: 10))
    }

}

   

Hacking with Swift is sponsored by Play

SPONSORED Play is the first native iOS design tool created for designers and engineers. You can install Play for iOS and iPad today and sign up to check out the Beta of our macOS app with SwiftUI code export. We're also hiring engineers!

Click to learn more about Play!

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.