SwiftUI将HStack填充到父视图，但不填充到全屏

Question

我想聊天。内容应为文本，日期和名称（此处为TextBla）。 我希望名称在气泡的右侧。时间停留在左侧。 当我在HStack中添加一个Spacer时，气泡会填满整个屏幕，但是我希望气泡的宽度和文本一样。

这是我的尝试：

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