如何在ViewThatFits及maxWidth限制下避免SwiftUI文本截断？

问题核心 #

当视图设置maxWidth限制后，若文本内容超出父视图垂直可用空间，SwiftUI会自动截断文本以适配空间。直接使用ScrollView会导致其占满剩余屏幕空间，让后续控件远离文本；而ViewThatFits会因文本被截断，无法正确触发滚动视图的切换逻辑。

解决方案 #

通过以下两步实现需求：

1. 让文本容器优先尝试自然布局（不截断文本），确保ViewThatFits能准确判断是否需要切换到滚动视图。
2. 给滚动视图设置垂直布局规则，避免它占满整个屏幕空间，保证后续控件紧跟文本区域。

完整实现代码 #

struct TextTruncator: View {
    @State private var longText = false
    
    var body: some View {
        VStack(spacing: 16) {
            Toggle("Long Text", isOn: $longText).padding()
            
            ViewThatFits {
                essay
                    .fixedSize(horizontal: false, vertical: true) // 文本水平换行、垂直自然扩展，不截断
                ScrollView(.vertical, showsIndicators: true) {
                    essay
                }
                .frame(maxHeight: .infinity, alignment: .top) // 滚动视图仅占用所需垂直空间，顶部对齐
            }
            
            Button("My Controls") {}
            Spacer()
        }
    }
    
    var essay: some View {
        VStack(spacing: 8) {
            paragraph
            if longText {
                paragraph
                paragraph
                paragraph
            }
        }
        .frame(maxWidth: 200)
    }
    
    var paragraph: some View {
        Text("+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
            .font(.body)
    }
}

关键细节说明 #

• .fixedSize(horizontal: false, vertical: true)：作用于普通文本容器，让文本在水平方向遵守maxWidth限制自动换行，垂直方向根据内容高度自然扩展，彻底避免文本截断。这样ViewThatFits能准确识别文本是否超出父视图垂直空间，触发滚动视图的切换。
• .frame(maxHeight: .infinity, alignment: .top)：给滚动视图设置此修饰符，确保它仅占用显示文本所需的垂直空间（而非占满整个屏幕），同时保持顶部对齐，让后续按钮控件能紧贴滚动视图下方。
• 外层VStack设置spacing：统一管理控件间的间距，让布局更规整。

替代方案（手动空间判断） #

如果ViewThatFits的行为不符合预期，可通过GeometryReader手动计算空间，精准控制滚动视图的显示：

struct TextTruncator: View {
    @State private var longText = false
    @State private var needScroll = false
    @State private var contentHeight: CGFloat = 0
    
    var body: some View {
        GeometryReader { geometry in
            VStack(spacing: 16) {
                Toggle("Long Text", isOn: $longText).padding()
                
                if needScroll {
                    ScrollView(.vertical, showsIndicators: true) {
                        essay
                            .background(GeometryReader { proxy in
                                Color.clear.onAppear {
                                    contentHeight = proxy.size.height
                                }
                            })
                    }
                    .frame(maxHeight: geometry.size.height - 100) // 预留Toggle和按钮的固定空间
                } else {
                    essay
                        .background(GeometryReader { proxy in
                            Color.clear.onAppear {
                                contentHeight = proxy.size.height
                                needScroll = contentHeight > (geometry.size.height - 100)
                            }
                        })
                }
                
                Button("My Controls") {}
                Spacer()
            }
            .onChange(of: longText) { _ in
                // 文本内容变化时重新计算高度
                DispatchQueue.main.async {
                    needScroll = contentHeight > (geometry.size.height - 100)
                }
            }
        }
    }
    
    // essay和paragraph定义同上述代码
}

该方案通过手动计算内容高度与可用空间，更精准地控制滚动视图的显示时机，但代码复杂度相对较高。

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