SwiftUI 离散洗涤器实现

如果您确实希望滚动视图的高度占据所有可用空间，那么GeometryReader在这里使用是完全合适的。这没有什么错。否则，您必须使用其他填充可用空间的视图（例如Color.clear），并测量该视图的几何形状。

Color.clear
    .onGeometryChange(for: CGSize.self) { proxy in
        proxy.size
    } action: { newValue in
        viewSize = newValue
    }
    .overlay {
        ScrollView { ... } // the actual scroll view would go on an overlay
            .frame(height: viewSize?.height)
    }

显然，只使用 aGeometryReader更方便。

在这个特殊情况下，如果您只想阻止Texts 被剪切，您可以通过放置滚动视图来禁用剪切scrollClipDisabled()。无需执行任何与几何相关的操作，您可以删除frame滚动视图上的 。

请注意，Texts 仍将在 的边界之外ScrollView。如果您希望它们在边界内，请考虑使用 来VStack布局刻度线和文本：

ForEach(0...totalSteps, id: \.self) { index in
    let remainder = index % config.steps
    VStack {
        Rectangle() // changed the Divider to a Rectangle, because a Divider is horizontal in a VStack
            .fill( remainder == 0 ? Color.primary : Color.gray)
            .frame(width: 1, height: remainder == 0 ? 20 : 10, alignment: .center)
            .frame(maxHeight: 20, alignment: .bottom)
        Text("\(index / config.steps)")
            .font(.caption)
            .fontWeight(.semibold)
            .textScale(.secondary)
            .fixedSize()
            .opacity(remainder == 0 ? 1 : 0)
    }
}

这假设所有文本都具有相同的高度。如果您不能假设这一点，您可以Text使用首选项键找到所有 s 的最大高度。然后，将 的高度设置HStack为文本的最大高度加上分隔符的最大高度（即 20）。

struct MaxHeightPreference: PreferenceKey {
    static let defaultValue: CGFloat = 0
    
    // this reduce implementation finds the maximum height of all the sibling views
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = max(value, nextValue())
    }
}

struct MaxHeightPreferenceModifier: ViewModifier {
    @State private var height: CGFloat = 0

    func body(content: Content) -> some View {
        content
            .onGeometryChange(for: CGFloat.self, of: \.size.height) { newValue in
                height = newValue
            }
            .preference(key: MaxHeightPreference.self, value: height)
    }
}

struct ScrollScrubber: View {
    var config:ScrubberConfig
    
    @State var viewWidth: CGFloat = 0
    @State var maxTextHeight: CGFloat = 0
    
    var body: some View {
        let horizontalPadding = viewWidth / 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)
                        .frame(maxHeight: 20, alignment: .bottom)
                        // the text should align to the top of the divider, so that
                        // .offset(y:20) will put the text directly under the divider
                        .overlay(alignment: .top) {
                            if remainder == 0 {
                                Text("\(index / config.steps)")
                                    .font(.caption)
                                    .fontWeight(.semibold)
                                    .textScale(.secondary)
                                    .fixedSize()
                                    .modifier(MaxHeightPreferenceModifier())
                                    .offset(y:20)
                            }
                        }
                }
            }
            .frame(height: maxTextHeight + 20, alignment: .top)
        }
        .scrollIndicators(.hidden)
        .safeAreaPadding(.horizontal, horizontalPadding)
        .onGeometryChange(for: CGFloat.self, of: \.size.width) { newValue in
            viewWidth = newValue
        }
        .onPreferenceChange(MaxHeightPreference.self) { newValue in
            maxTextHeight = newValue
        }
        // this border is to show the bounds of the ScrollView.
        // you can see that it does not take up all the available height,
        // only as much height as needed by the dividers + texts
        .border(.red)
    }
}