SwiftUI Fill HStack到父视图，但不到全屏

我想做一个聊天泡泡。内容应该是文本、日期和名称（此处为TextBla）。 我希望名字在泡沫的右边。时间停留在左边。 当我在HStack中添加一个间隔符时，气泡将填充整个屏幕，但我希望气泡的宽度与文本的宽度相同

以下是我的尝试：

HStack {
VStack(alignment: .leading) {
                HStack {
                    Text(self.message.formattedTimeString)
                        .foregroundColor(self.textColor)
                        .font(Font.mcCaption)
                    Text(self.message.fromPlayer.name)
                        .foregroundColor(self.textColor)
                        .font(Font.mcCaption)
                }

                Text(self.message.message)
                    .font(Font.mcBody)
                    .layoutPriority(2)
                    .fixedSize(horizontal: false, vertical: true)
                    .foregroundColor(self.textColor)
            }
}

试试这个：

---

以下是可能的方法。使用Xcode 11.4进行测试。/iOS 13.4

气泡元素是

struct BubbleView: View {
    let name: String
    let time: String
    let text: String
    var color: Color = Color.gray.opacity(0.4)

    var body: some View {
        ZStack(alignment: .topTrailing) {
            Text(name)
            VStack(alignment: .leading) {
                 // 2nd needed to avoid overlap on very short text
                Text(time) + Text("\t\(name)").foregroundColor(Color.clear)
                Text(text)
            }
        }
        .padding(8)
        .background(RoundedRectangle(cornerRadius: 12).fill(color))
    }
}

演示代码：

struct ContentView: View {
    var body: some View {

        ScrollView {
            HStack {
                ZStack(alignment: .topTrailing) {
                    Text("Name1")
                    VStack(alignment: .leading) {
                        Text("9:38")
                        Text("Lorem ipsum dolor sit amet")
                    }
                }
                .padding(8)
                .background(RoundedRectangle(cornerRadius: 10).fill(Color.pink.opacity(0.4)))
                Spacer()
            }
            HStack {
                ZStack(alignment: .topTrailing) {
                    Text("Name2")
                    VStack(alignment: .leading) {
                        Text("9:38")
                        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut venenatis risus. Fusce eget orci quis odio lobortis hendrerit. Vivamus in sollicitudin arcu. Integer nisi eros, hendrerit eget mollis et, fringilla et libero.")
                    }
                }
                .padding(8)
                .background(RoundedRectangle(cornerRadius: 10).fill(Color.pink.opacity(0.4)))
                Spacer()
            }
            HStack {
                Spacer()
                ZStack(alignment: .topTrailing) {
                    Text("Name3")
                    VStack(alignment: .leading) {
                        Text("9:38")
                        Text("Lorem ipsum dolor sit amet")
                    }
                }
                .padding(8)
                .background(RoundedRectangle(cornerRadius: 10).fill(Color.blue.opacity(0.4)))
            }
        }.padding(8)
    }
}

---

谢谢，但是对于较大的文本来说，它不起作用。现在文本比屏幕宽。我更新了我的答案…虽然这不是“来源”问题…谢谢。但问题是，当消息像“ok”一样短时。那么名字和时间是重叠的。@HansDeBeer，是的，我刚刚认出了它。请参阅使用提取的BubbleView更新，该视图已修复此问题。Nice

hack

；）非常感谢你！

struct ContentView: View {
    var body: some View {

        ScrollView {
            HStack {
                ZStack(alignment: .topTrailing) {
                    Text("Name1")
                    VStack(alignment: .leading) {
                        Text("9:38")
                        Text("Lorem ipsum dolor sit amet")
                    }
                }
                .padding(8)
                .background(RoundedRectangle(cornerRadius: 10).fill(Color.pink.opacity(0.4)))
                Spacer()
            }
            HStack {
                ZStack(alignment: .topTrailing) {
                    Text("Name2")
                    VStack(alignment: .leading) {
                        Text("9:38")
                        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut venenatis risus. Fusce eget orci quis odio lobortis hendrerit. Vivamus in sollicitudin arcu. Integer nisi eros, hendrerit eget mollis et, fringilla et libero.")
                    }
                }
                .padding(8)
                .background(RoundedRectangle(cornerRadius: 10).fill(Color.pink.opacity(0.4)))
                Spacer()
            }
            HStack {
                Spacer()
                ZStack(alignment: .topTrailing) {
                    Text("Name3")
                    VStack(alignment: .leading) {
                        Text("9:38")
                        Text("Lorem ipsum dolor sit amet")
                    }
                }
                .padding(8)
                .background(RoundedRectangle(cornerRadius: 10).fill(Color.blue.opacity(0.4)))
            }
        }.padding(8)
    }
}