SwiftUI水平滚动视图中多行文本高度适配问题

问题 #

我需要实现一个UI，将字符串数组加载到可滚动的水平栈（HStack）中。文本需设置最大宽度为100，并自动换行填充空间。目前文本已经实现换行，但水平ScrollView仅保留一行文本的高度，导致文本被截断。

如何让ScrollView的垂直高度自动适配栈中最高文本的高度？由于栈上方有其他控件，设置高度为.infinity不可行，且我尽量不想使用GeometryReader。

现有代码如下：

VStack {
    Capsule()
        .foregroundColor(.black.opacity(0.5))
        .frame(width: 48, height: 2)
    ScrollView(.horizontal, showsIndicators: false) {
        HStack {
            ForEach(chats, id: \.self) { chat in
                Text(chat)
            }
            .fixedSize(horizontal: false, vertical: true)
            .frame(maxWidth: 100)
        }
    }
}

当前效果：

解决方案 #

问题核心是ScrollView未能正确识别内部HStack的完整垂直高度，通过以下修改可实现自适应：

VStack {
    Capsule()
        .foregroundColor(.black.opacity(0.5))
        .frame(width: 48, height: 2)
    ScrollView(.horizontal, showsIndicators: false) {
        HStack {
            ForEach(chats, id: \.self) { chat in
                Text(chat)
                    .frame(maxWidth: 100)
                    .fixedSize(horizontal: false, vertical: true)
            }
        }
        .fixedSize(horizontal: true, vertical: false) // 关键修改
    }
}

关键说明 #

• 将文本的换行和宽度限制修饰符移到ForEach内部的Text上，确保每个文本都能独立计算自身高度。
• 给外层HStack添加.fixedSize(horizontal: true, vertical: false)：让HStack在垂直方向上根据内部最高的文本自动拉伸高度，水平方向则保持内容的实际宽度，这样ScrollView就能匹配这个高度，避免文本被截断。

内容的提问来源于stack exchange，提问作者Priva28