SwiftUI中Text与Stepper间的Spacer()为何无法生效？

我在下方代码里给Text和Stepper之间加了Spacer()，但没实现预期的两端对齐效果。

当前显示效果：

期望显示效果：

代码如下：

import SwiftUI

struct FontEditView: View {
    @Binding var fontSize: CGFloat
    
    var body: some View {
        NavigationStack {
            Form {
                HStack {
                    Text("Font Size")
                    Spacer()
                    Stepper(fontSize.formatted(), value: $fontSize, in: 5...50)
                }    
            }
        }
    }
}

struct FontEditView_Previews: PreviewProvider {
    static var previews: some View {
        FontEditView(fontSize: .constant(20))
    }
}

这是因为SwiftUI的Form会对内部视图的布局做默认适配，Stepper在Form容器里默认会尽可能占据水平空间，直接把Spacer()的拉伸效果给覆盖了。

给你两种解决办法：

• 方法一：给Stepper添加fixedSize()修饰符
  让Stepper只占用自身内容所需的空间，这样Spacer()就能正常把Text和Stepper推到两端：

HStack {
    Text("Font Size")
    Spacer()
    Stepper(fontSize.formatted(), value: $fontSize, in: 5...50)
        .fixedSize()
}

• 方法二：调整布局优先级
  给Text设置更高的布局优先级，让它先占据需要的空间，剩下的空间留给Spacer()和Stepper：

HStack {
    Text("Font Size")
        .layoutPriority(1)
    Spacer()
    Stepper(fontSize.formatted(), value: $fontSize, in: 5...50)
}

两种方法都能实现你要的左右分布效果，第一种更直接，推荐优先试试。

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