Как позволить тексту расти достаточно для отображения всего содержимого без усечения?

Question

Я пытаюсь создать представление SwiftUI, представляющее разговор в виде чата в виде серии вертикально расположенных пузырьков, как в сообщениях.

У меня возникают проблемы с поиском способа отображения очень длинных сообщений. Я хотел бы отображать такие сообщения просто как очень большие пузырьки, которые отображают весь текст. Например, как сообщения делают это:

Проблема, с которой я сталкиваюсь, заключается в том, что текстовое представление, на котором основаны мои пузыри, в значительной степени делаетсвоя вещь. Это может привести к тому, что весь текст будет корректно отображаться для небольших сообщений, длинные сообщения будут разбиты на несколько строк, но по-прежнему будут отображаться полностью, другие длинные сообщения будут сведены к одной строке с эллипсом.

Рассмотрим следующий кодчтобы создать последовательность сообщений:

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

Это приводит к нежелательному расположению:

Я экспериментировал с fixedSize и frame после прочтения нескольких руководств SwiftUI;это позволяет делать пузырьки большими, но тогда они имеют фиксированный размер и / или не будут расти, когда отображаемый текст будет даже длиннее, чем ожидалось.

Как я могу сказать MessageViews, или, скорее,Текстовые представления внутри них - что они могут занимать столько места, сколько им нужно вертикально, чтобы полностью отобразить текстовое содержимое?

Answer 1

Попробуйте установить MessageView в ScrollView.

Answer 2

Я нашел одно интересное решение, используя List и удалив разделители:

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

результат:

PS ответ должен быть .lineLimit (nil) , но в TextField есть некоторая ошибка с этим. Может быть, с текстом эта ошибка также продолжается

PPS Я поспешил с ответом = (. Вы можете установить свой список VStack в ScrollView:

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

, и результат будет: