how can I get Text to be on one side and another text on the same line to be on the other side in a List?

user_19612676 0
Viewed 52
NavigationView{
            List{
                VStack{
                    Text("EdwardCullen")
                        .padding(.vertical, -20)
                    AsyncImage(url)) { image in
                        image
                        .center()
                    } placeholder: {
                        ProgressView()
                    }
                }
                Text("Test")
            }

            .navigationTitle("EdwardCullen's Profile")
            .navigationBarTitleDisplayMode(.inline)
        }

Picture of what I want I included a picture of what I want kind of, so basically "Status" on the left side of the Text and "Online" on the total other side. I also would preferably want "Online" to be green, so I think I need to use two different Text views, but how exactly would I do this in a list? Is there any good way to do this?

The way I did what is in the picture is just adding many spaces to Text like this, but obviously that is not very smart and also not exactly what I want.

Text("First                           Second")
swiftui
3 Answers

Use HStack{} plus Spacer(). (Code is below the image) enter image description here

var body: some View {
    VStack {
        HStack {
            Text("First")
            Spacer() //this one
            Text("Second")
        }
        .padding()
        .background(.blue)
        .cornerRadius(15)
    }
 }
user_167314010

Use a spacer "Spacer()". This is an adaptive view that expands as much as it can.

NavigationView{
    List{
        VStack{
            Text("EdwardCullen")
                .padding(.vertical, -20)
            AsyncImage(url)) { image in
                image
                .center()
            } placeholder: {
                ProgressView()
            }
        }
        # new code here
        HStack {
            Text("Status")
            Spacer()
            Text("Online")
                .foregroundColor(.green)
        }
    }

    .navigationTitle("EdwardCullen's Profile")
    .navigationBarTitleDisplayMode(.inline)
}
user_121511420

Just Use a HStack and put a spacer between two text .

sample code :

HStack{
    Text("Status")
    Spacer()
    Text("Online")
}.cornerRadius(8)

you may use this anywhere you want .

Sample Output:

iamge picture

user_111340350
Related