SwiftUI如何避免上方提示文本显隐时下方Button发生位移

你当前实现里的校验提示Text(prompt)在提示内容为空时，系统会将其高度计算为0；当校验触发、提示文本出现时，又会撑开包裹TextField和提示文本的VStack高度，导致整个输入组件的总高度动态变化，挤压下方布局空间，最终带动Submit按钮上下偏移。

以下方案都不需要给控件设置固定宽高，可按需选择：

• 预留提示位恒定高度（最推荐）
  始终保留提示文本的布局高度，仅通过透明度控制提示的显隐，保证输入组件总高度不会随提示状态变化。修改FloatingTextField中的提示文本代码即可：

  Text(prompt)
      .fixedSize(horizontal: false, vertical: true)
      .font(.caption)
      .foregroundColor(.red)
      // 核心：固定占住1行提示文本的最小高度，无提示时不收缩
      .frame(minHeight: UIFont.preferredFont(forTextStyle: .caption1).lineHeight, alignment: .topLeading)
      .opacity(prompt.isEmpty ? 0 : 1)
  

  这个方案改动量最小，不会出现文本重叠、布局错位问题，同时适配系统动态字体大小。
• 提示文本脱离正常布局流
  将提示文本放到叠加层中，不参与输入框VStack的高度计算，从根源上避免提示显隐影响组件高度：

  VStack(alignment: .leading) {    
      TextField("", text: $text)
          .font(.system(.title2, design: .rounded))
          .foregroundColor(.blue)
  }
  .overlay(alignment: .topLeading) {
      Text(prompt)
          .fixedSize(horizontal: false, vertical: true)
          .font(.caption)
          .foregroundColor(.red)
          .offset(y: 42) // 按实际UI调整y轴偏移，把提示放到输入框下方
          .opacity(prompt.isEmpty ? 0 : 1)
  }
  // 底部留出和提示等高的内边距，避免提示和下方输入框重叠
  .padding(.bottom, UIFont.preferredFont(forTextStyle: .caption1).lineHeight)
  

• 固定Submit按钮布局层级
  不修改输入框组件的话，可以把整体布局调整为ZStack，将按钮固定在容器底部，不受上方内容高度变化影响：

  ZStack(alignment: .bottom) {
      // 外层加ScrollView避免小屏设备内容被截断
      ScrollView {
          VStack(spacing: 15) {
              FloatingTextField(placeHolder : "First name", text: $userVM.firstName, borderColor: $color, prompt: userVM.confirmFnamePrompt)
              FloatingTextField(placeHolder : "Last Name", text: $userVM.lastName, borderColor: $color, prompt: userVM.confirmLnamePrompt)
          }
          .frame(maxWidth: .infinity)
          .padding(.bottom, 80) // 给底部按钮预留显示空间
      }
      
      Button {
          // 提交逻辑
      } label: {
          Text("Submit")                            
      }
      .disabled(!userVM.isFieldValid)
      .padding(.bottom, 20)
  }
  

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