如何在SwiftUI Slider中添加非step式自定义标记且不使用overlay？

当然可以不用.overlay实现这种效果，核心思路是通过视图组合+布局计算，把Slider和自定义标记文本放在同一个容器里，而非叠加在Slider之上。下面提供两种实用方案：

方案1：均分对齐式标记（适合等间距刻度） #

如果你的标记是等间距分布的（比如Off/Small/Large对应0/1/2三个值），直接用VStack嵌套Slider和标记文本的HStack即可，HStack里的文本会自动平分宽度，刚好对齐Slider的刻度点：

struct LabeledSlider: View {
    @Binding var value: Double
    let labels: [String]
    let range: ClosedRange<Double>
    
    var body: some View {
        VStack(spacing: 8) {
            // 基础Slider
            Slider(value: $value, in: range)
            
            // 自定义标记文本行
            HStack {
                ForEach(labels, id: \.self) { label in
                    Text(label)
                        .font(.caption)
                        .frame(maxWidth: .infinity)
                }
            }
        }
    }
}

// 使用示例
struct ContentView: View {
    @State private var sliderValue = 0.0
    
    var body: some View {
        LabeledSlider(
            value: $sliderValue,
            labels: ["Off", "Small", "Large"],
            range: 0...2
        )
        .padding()
    }
}

方案2：精准定位式标记（支持任意刻度） #

如果标记对应的数值不是等间距的，用GeometryReader获取容器宽度，通过数值比例计算每个标记的精准位置：

struct PreciseLabeledSlider: View {
    @Binding var value: Double
    // 存储每个标记对应的数值和文本
    let labeledValues: [(value: Double, text: String)]
    let range: ClosedRange<Double>
    
    var body: some View {
        GeometryReader { geo in
            VStack(spacing: 4) {
                // 精准定位的标记文本
                HStack(spacing: 0) {
                    ForEach(labeledValues, id: \.text) { item in
                        // 计算当前标记在Slider范围内的比例，转换为x坐标
                        let positionRatio = (item.value - range.lowerBound) / (range.upperBound - range.lowerBound)
                        Text(item.text)
                            .font(.caption)
                            .position(x: geo.size.width * positionRatio, y: 0)
                    }
                }
                
                // 基础Slider
                Slider(value: $value, in: range)
            }
        }
        .frame(height: 60) // 固定容器高度避免布局混乱
    }
}

// 使用示例
struct ContentView: View {
    @State private var sliderValue = 0.0
    
    var body: some View {
        PreciseLabeledSlider(
            value: $sliderValue,
            labeledValues: [(0, "Off"), (1, "Small"), (3, "Large")], // 支持非等间距数值
            range: 0...3
        )
        .padding()
    }
}

这两种方案都是通过视图组合实现，完全不需要.overlay修饰符，既符合SwiftUI的布局逻辑，也能灵活适配不同的标记需求。

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