将文本对齐到屏幕的一侧 (SwiftUI)

Question

我正在使用 Swiftui 创建一个聊天应用程序。我正在尝试对齐文本，使其出现在屏幕的右侧，然后来自其他用户的消息将出现在左侧。我尝试过使用 VStack 并使用前导和尾随对齐，我也尝试过只对齐文本属性。我有一个文本，然后是两个按钮。我希望垃圾桶按钮和铅笔按钮都在右侧均匀排列。

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

Answer 1

你只需要在HStack开头加上一个Spacer():

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

同样，对于回复，在 HStack 的末尾放置一个 Spacer()，也将文本向左推。

Answer 2

对文本使用框架对齐就足够了，根据用户的不同，它可以有条件地就地改变，比如

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

将文本对齐到屏幕的一侧 (SwiftUI)

Align text to side of screen (SwiftUI)

swift

swiftui

alignment

screen

frame