将文本对准屏幕侧面（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

将框架对齐用于文本就足够了，根据用户的不同

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

Answer 2

您只需要在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")
                    }
                }
            }

同样，对于回复，将spacer（）放在末尾在hstack中，也将文本推向左侧。