ScrollView 中的多行文本被截断

Question

ScrollView 中的多行文本有一个相当特殊的问题。我在 ScrollView 中有一个 LazyVStack 并在此堆栈中有 SomeRow（见下文）视图。 我在这个 SomeRow 视图中有一个很长的多行描述，SwiftUI 总是会中断。

我已经尝试了所有here 的解决方案，但它们要么破坏了布局，要么不起作用，要么直接导致应用崩溃。

目前的情况：

我尝试将复制代码减少到最低限度，但不幸的是它仍然很长，因为我想保留我想要完成的外观。

这里是 SomeListView：

import SwiftUI

struct SomeListView: View {
    
    var body: some View {
        VStack{
            Text("Title")
                .font(.title)
            ScrollView{
                LazyVStack{
                    ForEach(0..<4){_ in
                        SomeRow(entries: EntryContainer(entries:
                            [
                                Entry("DESC\nLONG DESCRIPTION WITH OVERFLOW"),
                                Entry("")
                            ]
                        ))
                        Spacer().frame(height: 5)
                        Divider()
                    }
                }
            }.padding(16)
        }
    }
}

struct SomeListView_Previews: PreviewProvider {
    static var previews: some View {
        SomeListView()
    }
}

SomeRow 视图

import SwiftUI

struct SomeRow: View {
    var entries: [Entry]
    
    var body: some View {
        VStack(alignment: .leading, spacing: 0){
            Text("title").frame(maxWidth: .infinity, alignment: .leading)
            Spacer().frame(height: 5)
            ForEach(entries){entry in
                HStack{
                    VStack{
                        Text("00:00 - 00:00")
                        Spacer()
                    }.frame(minWidth: 110)
                    Divider()
                    VStack{
                        HStack{
                            Text("titleinner")
                            Spacer()
                        }
                        HStack{
                            Text(entry.description ?? "")
                            Spacer()
                            VStack{
                                Spacer()
                                Text("number")
                            }
                        }
                        Spacer()
                    }
                    Spacer()
                }
            }
        }
    }
}

struct SomeRow_Previews: PreviewProvider {
    static var previews: some View {
        SomeRow(entries:
            [
                Entry("DESC\nLONG DESCRIPTION WITH OVERFLOW"),
                Entry("")
            ]
        )
    }
}

入口数据类

import Foundation

class Entry: Identifiable {
    let description: String?

    init(_ description: String? = nil) {
        self.description = description
    }
}

任何解决方法的想法？我假设这只是 SwiftUI 错误，因为如果您为两个条目设置相同的长描述，它会神奇地完全显示两个描述，这对我来说真的没有意义。

当我使用Text(entry.description ?? "").fixedSize(horizontal: false, vertical: true 时，它是这样中断的： （分隔线不再填满整个高度，左列中的时间戳对齐错误）

Answer 1

几乎不可能有一个分隔线并保持与您所寻找的相同的对齐方式。我能得到的最接近的显示在下面的代码中。希望能在一定程度上满足要求。

   import SwiftUI

struct SomeListView: View {
    var obj = [
        Entry("DESC LONG DESCRIPTION WITH OVERFLOW"),
        Entry("")
    ]
    var body: some View {
        
        VStack{
            Text("Title")
                .font(.title)
            ScrollView{
                
                LazyVStack(){
                    ForEach(0..<4){_ in
                        SomeRow(entries: obj)
                        Spacer().frame(height: 5)
                        Divider()
                    }
                }
            }.padding(16)
        }
        
    }
}


class Entry: Identifiable {
    let description: String?
    
    init(_ description: String? = nil) {
        self.description = description
    }
}

struct SomeRow: View {
    var entries: [Entry]
    
    var body: some View {
        
        VStack(alignment: .leading,spacing:7){
            
            Text("title")
            
            ForEach(entries){entry in
                
                HStack(alignment: .top,spacing:15){
                    
                    Text("00:00 - 00:00")
                    Divider()
                    VStack(alignment:.leading, spacing:8){
                        Text("titleinner")
                        HStack(alignment:.lastTextBaseline, spacing:0){
                            Text(entry.description ?? "")
                            Spacer()
                            Text("number")
                        }
                        
                    }
                }.fixedSize(horizontal: false, vertical: true)
            }
        }
    }
}

struct SomeRow_Previews: PreviewProvider {
    static var previews: some View {
        SomeRow(entries:
                    [
                        Entry("DESC\nLONG DESCRIPTION WITH OVERFLOW"),
                        Entry("")
                    ]
        )
    }
}

struct SomeListView_Previews: PreviewProvider {
    static var previews: some View {
        SomeListView()
    }
}

输出-：

Answer 2

借助the answer from Tushar Sharma 的概念，我能够创建一个显示多行文本并在两个“列”之间有连续分隔符的版本。 唯一的变化是 SomeRow View（与我最初的问题相比）：

struct SomeRow: View {
    var entries: [Entry]
    
    var body: some View {
        VStack(alignment: .leading, spacing: 0){
            Text("title").frame(maxWidth: .infinity, alignment: .leading)
            Spacer().frame(height: 5)
            ForEach(entries){entry in
                HStack(alignment: .top){
                    VStack{
                        Text("00:00 - 00:00")
                        Spacer()
                    }.frame(minWidth: 110)
                    Divider()
                    VStack(alignment: .leading){
                        Text("titleinner")
                        HStack(alignment: .lastTextBaseline){
                            Text(entry.description ?? "")
                            Spacer()
                            Text("number")
                        }
                        Spacer()
                    }
                    Spacer()
                }.fixedSize(horizontal: false, vertical: true)
            }
        }
    }
}

基本上使用指定的对齐方式并在整个文本容器上使用 fixedSize 会产生奇迹。 这是它现在的样子：