CommentViewRow 评论文本奇怪的间距行为......？

Question

我正在尝试为社交应用程序制作自适应 CommentViewRow，其中整个评论文本可以显示在行中。

到目前为止，我正在实现这一点，但我有 3 个问题:

1 当评论文本很短时，即使我在 VStack.

中指定“.alignment: .leading”，它也会在行中居中

2 当评论文本使用多行时，用户的个人资料图片和评论文本之间有一个神秘的填充？？见下图。

3 我不确定我的 .frame 修饰符是否是实现我正在做的事情的最佳方式，它似乎是米老鼠，我正在阅读有关 .frame(idealWith, idealHeight, 等等..) 不确定是否有帮助。

知道如何解决这个问题，让每个 CommentViewRow 都像您一般的社交媒体评论视图一样显示吗？？

谢谢！

struct CommentViewRow: View {    
    var comment: Comment
    
    var body: some View {
        HStack { 
            KFImage("profilePicture")
           
            // COMMENT
            VStack(alignment: .leading, spacing: 5) {
                Text("**\(comment.username)** \(comment.comment)")
                    .font(.caption)
                    .frame(width: 310) 
                    .fixedSize(horizontal: true, vertical: false)
                
                Text(comment.createdAt.timeAgoDisplay())
                    .bold()
                    .font(.caption)     
            }
            Spacer()
        }.padding([.leading, .trailing], 10)      
    }
}

Answer 1

第一个选项：如果您确实需要 310 宽

您可以将 .frame(width: 310) 更改为 .frame(width: 310, alignment: .leading)

第二个选项：让视图根据内容自行调整，您只需指定对齐方式（.leading 在这种情况下）

struct CommentViewRow: View {
    var comment: Comment
    var body: some View {
        HStack {
            KFImage("profilePicture")

            VStack(alignment: .leading, spacing: 5) {
                Text("**\(comment.username)** \(comment.comment)")
                    .font(.caption)

                Text(comment.createdAt.timeAgoDisplay())
                    .font(.caption.bold())
            }
            .frame(maxWidth: .infinity, alignment: .leading)
        }
        .padding([.horizontal], 10)

    }
}

Answer 2

是的，摆脱框架：

struct ContentView: View {
    
    var comment = "Thjfhg jhfgjhdfg jdfhgj  dfhdfsjjdfgh djdshfg hjdfgjfdh ghjkf gdhjdfgh jkh fjg dfjkhgj dfglkhdfsg"
    
    var body: some View {
        HStack {
            Image(systemName: "person.circle")
                .font(.largeTitle)
            
            VStack(alignment: .leading, spacing: 5) {
                Text("\(comment)")
                    .font(.caption)
                
                Text("3 minutes ago")
                    .bold()
                    .font(.caption)
            }
            Spacer()
        }.padding([.leading, .trailing], 10)
    }
}