SwiftUI中如何为VStack内两个Text视图设置合并行数限制？

下面是满足你需求的完整实现代码，包含三个示例场景的预览：

struct FixedHeightTextContainer: View {
    let imageName: String
    let titleText: String
    let subtitleText: String
    
    // 使用系统动态字体，跟随系统设置调整大小
    private let titleFont = Font.title2.weight(.semibold)
    private let subtitleFont = Font.body
    
    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            Image(systemName: imageName)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 40, height: 40)
            
            // 嵌套VStack管理两个文本，控制高度范围
            VStack(alignment: .leading, spacing: 2) {
                Text(titleText)
                    .font(titleFont)
                    .lineLimit(nil)
                    .minimumScaleFactor(0.8) // 字体过大时自动缩放
                
                Text(subtitleText)
                    .font(subtitleFont)
                    .lineLimit(nil)
                    .minimumScaleFactor(0.8)
            }
            // 限制最大高度：最多容纳三行文本
            .frame(maxHeight: calculateMaxTextHeight(), alignment: .top)
            // 限制最小高度：保持两行文本的高度（每个文本一行）
            .frame(minHeight: calculateMinTextHeight())
        }
        .padding()
        .background(Color.gray.opacity(0.1))
        .cornerRadius(8)
    }
    
    // 计算文本区域最大高度：取两种字体中行高较大的乘以3，加上文本间距
    private func calculateMaxTextHeight() -> CGFloat {
        let titleLineHeight = titleFont.lineHeight
        let subtitleLineHeight = subtitleFont.lineHeight
        return max(titleLineHeight, subtitleLineHeight) * 3 + 2
    }
    
    // 计算文本区域最小高度：两个文本各一行的高度之和，加上间距
    private func calculateMinTextHeight() -> CGFloat {
        return titleFont.lineHeight + subtitleFont.lineHeight + 2
    }
}

// 预览三种场景
struct FixedHeightTextContainer_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            // 场景1：两个文本均为单行
            FixedHeightTextContainer(
                imageName: "star.fill",
                titleText: "短标题",
                subtitleText: "短副标题"
            )
            
            // 场景2：标题两行+副标题一行（总三行）
            FixedHeightTextContainer(
                imageName: "heart.fill",
                titleText: "这是一个比较长的标题文本，会自动折行显示两行",
                subtitleText: "短副标题"
            )
            
            // 场景3：两个文本均超行，最多显示三行
            FixedHeightTextContainer(
                imageName: "book.fill",
                titleText: "这是一个非常长的标题文本，原本可以显示多行",
                subtitleText: "这是一个同样很长的副标题文本，原本也能显示多行"
            )
        }
        .padding()
        .previewLayout(.sizeThatFits)
    }
}

需求对应实现细节 #

• 文本最多显示三行：通过给内部文本VStack设置maxHeight，基于动态字体的行高计算出三行内容的高度上限，当文本总内容超过三行时，容器高度不再扩展，文本会自动适配容器高度截断显示。
• 单行文本时容器高度不缩小：设置minHeight为两个文本各占一行的高度总和，确保即使内容只有两行，容器也保持固定的最小高度，不会收缩。
• 支持动态字体大小：使用Font.title2、Font.body这类系统动态字体，会跟随系统字体设置自动调整；同时给文本添加minimumScaleFactor，在字体过大导致内容放不下时自动缩放文本，保证内容可见性。

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