SwiftUI可滚动自适应文本容器的简化实现方案咨询

需求核心 #

需要实现一个文本矩形容器，满足两个关键要求：

• 文本内容较少时，紧密包裹文本，不占用多余屏幕空间
• 文本内容过多或屏幕空间不足时，支持垂直滚动

现有方案的缺陷 #

之前尝试的两种视图都存在明显问题：

• TextScrollView：能适配屏幕尺寸/方向并支持滚动，但会占用过多垂直空间，即使文本很少也会撑满可用区域
• TextScrollFixView：通过.fixedSize(horizontal: true, vertical: true)实现了紧密包裹，但窄屏场景下文本无法自动换行，会超出屏幕宽度

临时用ViewThatFits选择合适视图来规避问题，但希望找到更简洁的实现方式。另外尝试过overlay和ZStack方案，最终认为矩形背景+阴影的视觉效果最佳。

简洁优化实现 #

核心思路是通过组合fixedSize和maxHeight约束，无需额外的视图判断逻辑，直接实现自适应效果：

import SwiftUI

// 自定义颜色扩展（保持原有颜色定义）
extension Color {
    static let myGreen = Color.green
    static let Blue = Color.blue
    static let Cyan = Color.cyan
}

struct MainView: View {
    var body: some View {
        VStack {
            Rectangle()
                .frame(width: 300, height: 20)
                .foregroundColor(.myGreen)
            TextRectView()
            Rectangle()
                .frame(width: 300, height: 20)
                .foregroundColor(.myGreen)
            Spacer()
        }
    }
}

struct VerboseTextView: View {
    var body: some View {
        VStack {
            Text("first line")
            ForEach(1..<20) { _ in
                Text(verbatim: "The lazy fox")
            }
            Text("last line")
        }
    }
}

// 简洁版自适应滚动文本容器
struct AdaptiveTextScrollContainer: View {
    // 可根据需求调整容器最大高度阈值
    private let maxContainerHeight: CGFloat = 300
    
    var body: some View {
        ScrollView(.vertical, showsIndicators: true) {
            VerboseTextView()
                .frame(maxWidth: .infinity) // 确保文本在窄屏时自动换行
        }
        .fixedSize(horizontal: false, vertical: true) // 垂直方向紧密包裹，水平方向适配屏幕
        .frame(maxHeight: maxContainerHeight) // 超过最大高度时自动启用滚动
        .padding()
        .frame(minWidth: 100)
        .background(RoundedRectangle(cornerRadius: 20)
            .foregroundColor(.Blue))
        .padding()
        .shadow(color: .Cyan, radius: 10)
    }
}

struct TextRectView: View {
    var body: some View {
        VStack {
            AdaptiveTextScrollContainer()
        }
    }
}

// 预览
struct MainView_Previews: PreviewProvider {
    static var previews: some View {
        MainView()
    }
}

优化点说明 #

1. .fixedSize(horizontal: false, vertical: true)：垂直方向根据文本实际高度自适应（紧密包裹），水平方向允许文本换行以适配屏幕宽度
2. .frame(maxHeight: maxContainerHeight)：给容器设置最大高度阈值，当文本总高度超过该值时，ScrollView自动启用滚动；未超过时保持紧凑布局
3. 内部文本的.frame(maxWidth: .infinity)：确保文本在窄屏场景下能自动换行，避免内容超出屏幕

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