SwiftUI如何让TextField高度动态变化到阈值后开启滚动？

iOS 16+ 原生实现方案 #

iOS 16 开始TextField新增了垂直轴输入支持，仅需添加axis: .vertical参数即可实现高度自适应+超过行数阈值自动滚动的效果，正确写法如下：

TextField("Text", text: $model.commitDescr, axis: .vertical)
     .multilineTextAlignment(.leading)
     .lineLimit(1...5) // 传入区间参数，代表最少显示1行、最多显示5行，超过自动开启滚动

之前写法异常的原因：

• 未添加axis: .vertical参数时TextField默认是单行水平输入模式，lineLimit参数不会生效，文本会自动折行但不会限制行数
• 嵌套ScrollView的方案本身逻辑错误：ScrollView默认会占用父布局允许的最大高度，不会跟随子视图内容动态调整高度
• 未开启垂直轴时TextField本身不会根据输入内容自动撑开高度，所以直接设置frame区间也不会生效

iOS 15 及更低版本兼容方案 #

低版本系统没有TextField垂直轴特性，可使用TextEditor配合隐藏文本计算高度实现相同效果：

@State private var contentHeight: CGFloat = 20
private let maxHeight: CGFloat = 400 // 自定义最大高度阈值

var body: some View {
    TextEditor(text: $model.commitDescr)
        .frame(minHeight: 20, maxHeight: min(contentHeight, maxHeight))
        // iOS 16+ 可加下面这行，高度未到阈值时禁用滚动更贴合体验
        .scrollDisabled(contentHeight <= maxHeight)
        .background(
            // 用和输入内容相同的隐藏Text计算实际渲染高度
            Text(model.commitDescr)
                .frame(maxWidth: .infinity)
                .padding(.vertical, 8) // 和TextEditor的内边距保持一致保证高度计算准确
                .background(
                    GeometryReader { geo in
                        Color.clear
                            .onAppear {
                                contentHeight = geo.size.height
                            }
                            .onChange(of: model.commitDescr) { _ in
                                contentHeight = geo.size.height
                            }
                    }
                )
                .hidden()
        )
}

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