SwiftUI中如何移除Stepper标签与步进按钮的多余间距

问题原因 #

SwiftUI 原生Stepper默认水平方向为弹性布局，会尽可能占用父视图分配的可用宽度，内部标签文本与右侧步进控件默认两端对齐，因此会出现中间的大段多余间距。

解决方法 #

方案1：快速适配（推荐）

给Stepper添加水平方向的fixedSize修饰符，让组件水平方向贴合内容尺寸渲染，不再拉伸占满空间，即可自动消除多余空白：

Stepper("x \(quantity)", value: $quantity, in: 1...50)
    .fixedSize(horizontal: true, vertical: false)

修改后完整代码如下：

struct CartListCell: View {
    @State var itemTitle = "Title"
    @State var price = Double.random(in: 1...100)
    @State var quantity = 1
    
    var body: some View {
        HStack(spacing: 10) {
            Image(systemName: "cart")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 40, height: 40)
                .foregroundStyle(Color.yellow, Color.cyan)
            VStack(alignment: .leading, spacing: 5) {
                Text(itemTitle)
                    .font(Font.system(.headline, design: .rounded))
                    .foregroundColor(.primary)
                    .lineLimit(2)
                Text(price, format: .currency(code: Locale.current.currencyCode!))
                    .font(Font.system(.footnote, design: .rounded).weight(.medium))
                    .foregroundColor(.secondary)
            }
            .padding(.horizontal)
            Spacer()
            Stepper("x \(quantity)", value: $quantity, in: 1...50)
                .fixedSize(horizontal: true, vertical: false)
        }
    }
}

方案2：自定义布局

如果你需要灵活调整标签和步进按钮的间距，可以隐藏Stepper自带标签，通过HStack自行组合文本与控件，自定义间距值：

HStack(spacing: 5) { // 按需调整间距数值即可
    Text("x \(quantity)")
    Stepper(value: $quantity, in: 1...50) {}
        .labelsHidden()
}

两种方案都能让Stepper收缩到内容对应的最小宽度，不会再占据HStack的一半空间，标签和步进按钮之间仅保留合理间距。

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