自定义滑块占用过多 Space

Question

我使用 here 中的代码创建了我自己的自定义滑块变体。但是，滑块底部有太多多余的 space，我想将其删除。有什么办法吗？这是滑块的代码：

struct CustomSlider: View {
    
    @Binding var value: CGFloat
    
    @State var lastOffset: CGFloat = 0
    
    var range: ClosedRange<CGFloat>
    var leadingOffset: CGFloat = 5
    var trailingOffset: CGFloat = 5
    
    var knobSize: CGSize = CGSize(width: 25, height: 25)
    
    let trackGradient = LinearGradient(gradient: Gradient(colors: [.pink, .yellow]), startPoint: .leading, endPoint: .trailing)
    
    var body: some View {
        GeometryReader { geometry in
            
            ZStack(alignment: .leading) {
                
                ZStack(alignment: .leading) {
                
                Capsule()
                    .fill(Color(hue: 0.172, saturation: 0.275, brightness: 1.0))
                    .frame(height: 30)
                
                Capsule()
                    .fill(Color(hue: 0.55, saturation: 0.326, brightness: 1.0))
                    .frame(width: self.$value.wrappedValue.map(from: self.range, to: self.leadingOffset...(geometry.size.width - self.knobSize.width - self.trailingOffset))+30, height: 30)
                }
                
                HStack {
                    RoundedRectangle(cornerRadius: 50)
                        .frame(width: self.knobSize.width, height: self.knobSize.height)
                        .foregroundColor(.white)
                        .offset(x: self.$value.wrappedValue.map(from: self.range, to: self.leadingOffset...(geometry.size.width - self.knobSize.width - self.trailingOffset)))
                        .gesture(
                            DragGesture(minimumDistance: 0)
                                .onChanged { value in
                                    
                                    if abs(value.translation.width) < 0.1 {
                                        self.lastOffset = self.$value.wrappedValue.map(from: self.range, to: self.leadingOffset...(geometry.size.width - self.knobSize.width - self.trailingOffset))
                                    }
                                    
                                    let sliderPos = max(0 + self.leadingOffset, min(self.lastOffset + value.translation.width, geometry.size.width - self.knobSize.width - self.trailingOffset))
                                    let sliderVal = sliderPos.map(from: self.leadingOffset...(geometry.size.width - self.knobSize.width - self.trailingOffset), to: self.range)
                                    
                                    self.value = sliderVal
                                }
                            
                        )
                }
            }
        }
    }
}

我注意到当我 select 空 space 时，几何 reader 中的代码会自动 selected。（我无法在 post 中嵌入图像，所以这里是 link）

Answer 1

当您使用 GeometryReader 时，它会自动占用所有可用的 space。如果你想限制它，使用 frame(height: ) 修饰符给它一个特定的高度。

struct CustomSlider: View {
    
    //all of the properties

    var body: some View {
        GeometryReader { geometry in
          // slider code
        }.frame(height: 60) //<-- Here
    }
}

自定义滑块占用过多 Space

Custom Slider Taking Too Much Space

swift

xcode

swiftui

uislider