SwiftUI离散Scrubber实现：无需GeometryReader的替代方案问询

我正在实现一款带文本标记的离散式Scrubber，遇到两个核心问题：

1. 无法提前确定ScrollView内部HStack的高度
2. 尝试用onGeometryChange修饰器解决时，叠加的文本出现截断问题

已知用GeometryReader结合几何代理设置HStack高度能解决，但想找无需GeometryReader的替代方案。

原实现代码：

struct ScrollScrubber: View {
    var config:ScrubberConfig
    
    @State var viewSize:CGSize?
    
    var body: some View {
        let horizontalPadding = (viewSize?.width ?? 0)/2
        
        ScrollView(.horizontal) {
            HStack(spacing:config.spacing) {
                let totalSteps = config.steps * config.count
                
                ForEach(0...totalSteps, id: \.self) { index in
                    let remainder = index % config.steps
                    Divider()
                        .background( remainder == 0 ? Color.primary : Color.gray)
                        .frame(width: 0, height: remainder == 0 ? 20 : 10, alignment: .center)
                        .frame(maxHeight: 20, alignment: .bottom)
                        .overlay(alignment: .bottom) {
                            if remainder == 0 {
                                Text("\(index / config.steps)")
                                    .font(.caption)
                                    .fontWeight(.semibold)
                                    .textScale(.secondary)
                                    .fixedSize()
                                    .offset(y:20)
                            }
                        }
                    
                }
            }
            .frame(height:viewSize?.height)
            
        }
        .scrollIndicators(.hidden)
        .safeAreaPadding(.horizontal, horizontalPadding)
        .onGeometryChange(for: CGSize.self) { proxy in
            proxy.size
        } action: { newValue in
            viewSize = newValue
            print("View Size \(newValue)")
        }


    }
}

struct ScrubberConfig:Equatable {
    var count:Int
    var steps:Int
    var spacing:CGFloat
}

#Preview {
    ScrollScrubber(config: .init(count: 100, steps: 5, spacing: 5.0))
        .frame(height:60)
}

方案1：调整布局结构（最推荐） #

问题根源是你用overlay+offset放置的文本不会计入HStack的布局高度，导致文本超出ScrollView范围被截断。把Divider和文本改成垂直布局的子视图，让HStack自动计算总高度，完全不需要动态读取几何尺寸。

修改后的核心代码：

struct ScrollScrubber: View {
    var config: ScrubberConfig
    
    var body: some View {
        // 直接用屏幕宽度计算左右padding，无需动态读取
        let horizontalPadding = UIScreen.main.bounds.width / 2
        
        ScrollView(.horizontal) {
            HStack(spacing: config.spacing) {
                let totalSteps = config.steps * config.count
                
                ForEach(0...totalSteps, id: \.self) { index in
                    let remainder = index % config.steps
                    // 用VStack替代overlay+offset，让文本成为布局的一部分
                    VStack(spacing: 4) { // 可调整spacing控制文本与Divider的间距
                        Divider()
                            .background(remainder == 0 ? Color.primary : Color.gray)
                            .frame(width: 0, height: remainder == 0 ? 20 : 10)
                        if remainder == 0 {
                            Text("\(index / config.steps)")
                                .font(.caption)
                                .fontWeight(.semibold)
                                .textScale(.secondary)
                                .fixedSize()
                        }
                    }
                    .frame(maxHeight: .infinity, alignment: .bottom) // 让VStack在ScrollView高度内底部对齐
                }
            }
        }
        .scrollIndicators(.hidden)
        .safeAreaPadding(.horizontal, horizontalPadding)
        .frame(height: 60) // 直接固定整体高度，无需动态传递
    }
}

方案2：显式计算固定高度 #

如果必须保留overlay布局，可以直接计算HStack需要的总高度：Divider的最大高度（20） + 文本高度 + offset的垂直距离（20）。可以通过字体属性估算，或用Text.intrinsicContentSize获取精确值。

示例代码片段：

struct ScrollScrubber: View {
    var config: ScrubberConfig
    
    // 提前计算文本的固有高度
    private var textHeight: CGFloat {
        let sampleText = Text("0")
            .font(.caption)
            .fontWeight(.semibold)
            .textScale(.secondary)
        return sampleText.intrinsicContentSize.height
    }
    
    var body: some View {
        let horizontalPadding = UIScreen.main.bounds.width / 2
        
        ScrollView(.horizontal) {
            HStack(spacing: config.spacing) {
                // ... 原ForEach内容不变
            }
            .frame(height: 20 + 20 + textHeight) // Divider高度 + offset距离 + 文本高度
        }
        .scrollIndicators(.hidden)
        .safeAreaPadding(.horizontal, horizontalPadding)
        .frame(height: 60)
    }
}

方案3：利用ScrollView自动适配高度 #

去掉外部的固定高度限制，让ScrollView根据内容自动调整高度，同时用padding给文本留出足够空间：

#Preview {
    ScrollScrubber(config: .init(count: 100, steps: 5, spacing: 5.0))
        .padding(.vertical, 20) // 给文本留出垂直空间
}

各方案优缺点 #

• 方案1：完全符合SwiftUI布局逻辑，自动适配动态类型、字体变化，彻底解决截断问题，代码最简洁
• 方案2：适合需要保留overlay布局的特殊场景，但需要手动维护高度计算，适配性稍差
• 方案3：实现最简单，但无法固定Scrubber的整体高度，适合对高度无严格要求的场景

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