Align text to side of screen (SwiftUI)-CodePudding

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.

            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")
                    }
                }
            }

CodePudding user response：

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 !!

CodePudding user response：

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.