SwiftUI Fill HStack to parent view but not to full screen

Question

I want to make a chat-bubble. The content should be a text, the date and a name (here TextBla). I want that the name is on the right side of the bubble. The time stays on the left side. When I add a Spacer to the HStack the bubble fills the complete screen, but I want that the bubble is as width as the text is.

Here is my try:

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

Answer 1

Here is possible approach. Tested with Xcode 11.4. / iOS 13.4

Bubble element is

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

Demo code:

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

Answer 2

try this:

  struct ContentView: View {
    var body: some View {
        VStack {
            HStack() {
                VStack(alignment: .leading) {
                    HStack {
                        Text("9:38")
                        Spacer()
                        Text("Alfredo")
                    }

                    Text("important message")
                        .layoutPriority(2)
                    //  .fixedSize(horizontal: true, vertical: true)
                }.fixedSize()
                    .padding()
                Spacer()
            }
            HStack() {
                VStack(alignment: .leading) {
                    HStack {
                        Text("9:38")
                        Spacer()
                        Text("Alfredo")
                    }

                    Text("important dd important df important message important message important message important message dfd message important message important message important message important message important message ")
                    .lineLimit(50)
                    .layoutPriority(2)
                        .frame(width: UIScreen.main.bounds.width - 40)
                    //  .fixedSize(horizontal: true, vertical: true)
                }.fixedSize()
                    .padding()
                Spacer()
            }
        }
    }
}