SwiftUI Заполните HStack до родительского вида, но не до полного экрана

Question

Я хочу сделать чат-пузырь. Содержание должно быть текстом, датой и именем (здесь TextBla). Я хочу, чтобы имя было справа от пузыря. Время остается на левой стороне. Когда я добавляю Spacer в 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)
            }
}

Answer 1

Здесь возможен подход. Протестировано с 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)
    }
}

Answer 2

попробуйте это:

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