Question

我正在尝试创建一个SwiftUI视图，该视图以一系列垂直排列的气泡表示聊天对话，例如在消息中。

我在弄清楚如何显示很长的消息时遇到麻烦。我想将这些消息显示为显示所有文本的非常大的气泡。例如，像Messages这样：

我遇到的问题是气泡所基于的“文本”视图几乎是在做自己的事情。这会导致对于小消息，整个文本可以正确显示，将长消息分成几行，但仍完整显示，而将其他长消息缩小为带椭圆的单行。

考虑以下代码以创建消息序列：

import SwiftUI

struct MessageView: View {
    var body: some View {
        Text("This is a very long message. Can you imagine it will ever be displayed in full on the screen? Because I can‘t. I can tell you, the one other time I wrote a message this long was when we went to the picnic and uncle Bob whipped out his cigars and I had to vent on the family WhatsApp group.")
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            ForEach(0..<100, id: \.self) { i in
                MessageView()
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

这会导致这种不良布局：

在阅读了几本SwiftUI指南之后，我对fixedSize和frame进行了实验；这样可以使气泡变大，但是气泡的大小固定，并且/或者当要显示的文本比预期的更长时，气泡不会增长。

如何告诉MessageViews或它们内部的Text视图，它们可以自由地占用垂直方向所需的空间来完全呈现其文本内容？

Answer 1

我发现了一个有趣的决定，使用列表并删除了分隔符：

struct ContentView: View {

    init() {
        UITableView.appearance().tableFooterView = UIView()
        UITableView.appearance().separatorStyle = .none
    }

    var body: some View {
        List {
            ForEach(0..<50, id: \.self) { i in
                VStack(alignment: .trailing, spacing: 20) {

                    if i%2 == 0 {
                        MessageView().lineLimit(nil)
                    } else {
                        MessageViewLeft()
                    }

                }
            }
        }
    }
}

我制作了2个结构进行演示：

struct MessageView: View {
    var body: some View {
        HStack {
            Text("This is a very long message. Can you imagine it will ever be displayed in full on the screen? Because I can‘t. I can tell you, the one other time I wrote a message this long was when we went to the picnic and uncle Bob whipped out his cigars and I had to vent on the family WhatsApp group.")
            Spacer(minLength: 20)
        }
    }
}

struct MessageViewLeft: View {
    var body: some View {
        HStack {
            Spacer(minLength: 20)
            Text("This is a very long message. Can you imagine it will ever be displayed in full on the screen? Because I can‘t. I can tell you, the one other time I wrote a message this long was when we went to the picnic and uncle Bob whipped out his cigars and I had to vent on the family WhatsApp group.")
        }
    }
}

结果是：

P.S。答案应该是 .lineLimit（nil），但是TextField中存在一些错误。也许使用文本，该错误也会继续存在

P.P.S。我急忙回答=（.。您可以将VStack列表设置为ScrollView：

var body: some View {
        VStack {
            ScrollView {
                ForEach(0..<50, id: \.self) { i in
                    VStack(alignment: .trailing, spacing: 20) {
                        MessageView().padding()
                    }
                }
            }
        }
    }

，结果是：

Answer 2

尝试在ScrollView中设置MessageView。

如何使文本增长到足以显示整个内容而不会被截断的程度？

2 个答案: