具有最大值的 SwiftUI 自定义滑块

Posted 2023-03-14

【中文标题】具有最大值的 SwiftUI 自定义滑块

【英文标题】：SwiftUI Custom Slider with max Value

【发布时间】：2020-03-04 20:01:59

【问题描述】：

我使用这个很棒的代码来获得一个滑块。 here

但是如何将最大值设置为 30 而不是 100？

这个例子是从 0 到 100。

希望大家帮忙。

struct CustomView: View 

@Binding var percentage: Float // or some value binded

var body: some View 
    GeometryReader  geometry in
        ZStack(alignment: .leading) 
            Rectangle()
                .foregroundColor(.gray)
            Rectangle()
                .foregroundColor(.accentColor)
                .frame(width: geometry.size.width * CGFloat(self.percentage / 100))
        
        .cornerRadius(12)
        .gesture(DragGesture(minimumDistance: 0)
            .onChanged( value in
                self.percentage = min(max(0, Float(value.location.x / geometry.size.width * 100)), 100)
            ))
    

【参考方案1】：

您只需将 100 替换为 30 即可从 0 绑定到 30

struct CustomView: View 

    @Binding var percentage: Float // or some value binded

    var body: some View 
        GeometryReader  geometry in
            ZStack(alignment: .leading) 
                Rectangle()
                    .foregroundColor(.gray)
                Rectangle()
                    .foregroundColor(.accentColor)
                    .frame(width: geometry.size.width * CGFloat(self.percentage / 30))
            
            .cornerRadius(12)
            .gesture(DragGesture(minimumDistance: 0)
            .onChanged( value in
                self.percentage = min(max(0, Float(value.location.x / geometry.size.width * 30)), 30)
                print(self.percentage)
            ))
        
    

【讨论】：

并且矩形需要达到 100% 而不仅仅是 30%

您可以为您的视图矩形设置frame，这样最大值为30，不影响矩形的大小。 ` CustomView(percentage: $percentage) .accentColor(.red) .frame(width: 300, height: 44)`