Align text to side of screen (SwiftUI)

user_15419557 0
Viewed 526

Using Swiftui I'm creating a chat application. I'm trying to align the text so that it appears on the right side of the screen and then messages from the other user will appear on the left. I have tried using VStack and using leading and trailing alignment, I have also tried just aligning the text attribute. I have a text, and then two buttons. I would like the trash can button and pencil button to all evenly line up on the right side.

enter image description here

            VStack (alignment: .trailing ) {
                HStack {
                    Text(data.text)
                        .padding(.bottom, 4)
                        .padding(.top, 4)
                        .padding(.leading, 8)
                        .padding(.trailing, 8)
                        .foregroundColor(Color.white)
                        .background(Color(UIColor.systemBlue))
                        .cornerRadius(20)
                    
                    Button(action: {
                        self.showingPopover = true
                    }) {
                        Image(systemName: "pencil")
                    }
                    Button(action: {
                        viewModel.deleteData(id: data.id)
                    }) {
                        Image(systemName: "trash")
                    }
                }
            }
swiftui swift alignment screen frame
2 Answers

It is enough to use frame alignment for text, depending to user it can be conditionally changed in place, like

Text(data.text)
    .padding(.bottom, 4)
    .padding(.top, 4)
    .padding(.leading, 8)
    .padding(.trailing, 8)
    .foregroundColor(Color.white)
    .background(Color(UIColor.systemBlue))
    .cornerRadius(20)
    .frame(maxWidth: .infinity, alignment: isMe ? .trailing : .leading) // << here !!
user_122990300

You just need to add a Spacer() in the beginning of the HStack:

            VStack (alignment: .trailing ) {
                HStack {

                    // This Spacer() will "push" the text to the right
                    Spacer()

                    Text(data.text)
                        .padding(.bottom, 4)
                        .padding(.top, 4)
                        .padding(.leading, 8)
                        .padding(.trailing, 8)
                        .foregroundColor(Color.white)
                        .background(Color(UIColor.systemBlue))
                        .cornerRadius(20)
                    
                    Button(action: {
                        self.showingPopover = true
                    }) {
                        Image(systemName: "pencil")
                    }
                    Button(action: {
                        viewModel.deleteData(id: data.id)
                    }) {
                        Image(systemName: "trash")
                    }
                }
            }

Similarly, for the replies put a Spacer() at the end of the HStack, too push the text to the left.

user_182513270
Related