SwiftUI TextField设置axis为vertical后意外推挤下方视图问题咨询

这个问题属于iOS 16的SwiftUI TextField布局bug，同时可以通过调整写法规避该问题，以下是具体解析和解决方案：

你的预期理解是正确的 #

设置axis: .vertical配合.lineLimit(5, reservesSpace: true)的设计目标，就是让TextField保持固定5行高度，超出内容内部滚动，不会影响周边视图布局。你的用法逻辑没有问题。

问题根源 #

iOS 16中，当垂直方向的TextField处于List容器内，且启用了reservesSpace: true时，输入大量内容后执行退格操作，TextField的内部布局计算会出现异常——它会错误地向List传递布局偏移信号，导致下方元素被推挤，最终甚至会被移出屏幕。这个问题在iOS 17中已被苹果官方修复。

可行的规避方案 #

• 强制固定容器高度：给TextField套一层固定高度的frame，直接切断错误的布局传递。高度可以根据字体行高计算，确保和5行文字高度匹配：

  TextField("输入内容", text: $inputText, axis: .vertical)
      .lineLimit(5, reservesSpace: true)
      .frame(height: UIFont.systemFont(ofSize: 16).lineHeight * 5)
      .padding()
  

• 升级到iOS 17及以上：如果项目适配允许，直接升级系统版本即可解决该bug。
• 自定义滚动容器：用ScrollView包裹TextField，替代原生的滚动行为，同时固定容器高度：

  ScrollView(.vertical) {
      TextField("输入内容", text: $inputText, axis: .vertical)
          .lineLimit(nil)
  }
  .frame(height: UIFont.systemFont(ofSize: 16).lineHeight * 5)
  .border(Color.gray) // 可选，用于直观查看容器范围
  

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