在 SwiftUI 中初始化 Slider 值

Question

In the process of learning SwiftUI , I am having this issue.

I have this view with a slider:

struct RangeSpanView: View {
    var minimumValue,maximumValue:Double

    init(minSlide: UInt64,
         maxSlide: UInt64) {
        self.minimumValue = Double(minSlide)
        self.maximumValue = Double(maxSlide)
    }

    @State var sliderValue = 0.0

    var body: some View {
        VStack {
            HStack {
                Text("\(Int(minimumValue))")
                Slider(value: $sliderValue,
                       in: minimumValue...maximumValue)
                Text("\(Int(maximumValue))")
            }.padding()
            Text("\(Int(sliderValue))")
            Spacer()
        }
    }
}

And this is the code where the view is loaded.

var body: some View {
    NavigationLink(destination: RangeSpanView(minSlide: myMinVal,
                                              maxSlide: myMaxVal),
                   label: {
                       .......... // Useful code.
    })
}

It works fine using the slider. There is only a little inconsistency detail concerning the initialization of the sliderValue that I would like to fix.

The way it is in the current code is that sliderValue is initialized to 0.0, which is not exactly what I like when the min and max values are respectively 150.0 and 967.0 (for example).

I have tried various solutions to initialize sliderValue to minimumValue (for example) to make it consistent. But it always fails with some error message complaining about some "expected argument type 'Binding" in the Slider object.

So, is there a proper way to solve this problem?

Answer 1

How about something like this:

struct TestView: View {
    let myMinVal: UInt64 = UInt64.random(in: 100...200)
    let myMaxVal: UInt64 = UInt64.random(in: 400...600)
    
    @State var sliderValue: Double = 0
    
    var body: some View {
        RangeSpanView(
            minimumValue: Double(myMinVal),
            maximumValue: Double(myMaxVal),
            sliderValue: $sliderValue
        ).onAppear {
            self.sliderValue = Double(self.myMinVal)
        }
    }
}

struct RangeSpanView: View {
    var minimumValue: Double
    var maximumValue: Double

    @Binding var sliderValue: Double

    var body: some View {
        VStack {
            HStack {
                Text("\(Int(minimumValue))")
                Slider(value: $sliderValue,
                       in: minimumValue...maximumValue)
                Text("\(Int(maximumValue))")
            }.padding()
            Text("\(Int(sliderValue))")
            Spacer()
        }
    }
}

You can use a @Binding var on the SliderValue so that you can set starting value before you present it. I used onAppear but you can set the sliderValue on wherever you are setting the myMinVal

Answer 2

You can initialize your @State variable with the lowest min value of the slider. So you won't need to do this in the willApear() method.

struct RangeSpanView: View {
    var minimumValue,maximumValue:Double

    //declare State here
    @State var sliderValue : Double

    init(minSlide: UInt64,
         maxSlide: UInt64) {
        self.minimumValue = Double(minSlide)
        self.maximumValue = Double(maxSlide)

        //Initialize the State with the lowest value
        self._sliderValue = State(initialValue: self.minimumValue)
    }

Answer 3

I think Ludyem is onto somthing. On this site I found an explanation as to why setting the value in the init wont work.

But if we use the onAppear function on the slider we can ensure the default value is within range like this

                .onAppear {
                    if(self.sliderValue < self.minimumValue) {
                        self.sliderValue = self.minimumValue
                    }
                }

So the whole thing would look like this

struct RangeSpanView: View {
  let minimumValue,maximumValue:Double

  init(minSlide: UInt64, maxSlide: UInt64) {
    self.minimumValue = Double(minSlide)
    self.maximumValue = Double(maxSlide)
  }

@State var sliderValue = 0.0


var body: some View {
    VStack {
        Text("hi guys")
        HStack {
            Text("\(Int(minimumValue))")
            Slider(value: $sliderValue,
                in: minimumValue...maximumValue)
                .onAppear {
                    if(self.sliderValue < self.minimumValue) {
                        self.sliderValue = self.minimumValue
                    }
                }
            Text("\(Int(maximumValue))")
        }.padding()
        Text("\(Int(sliderValue))")
        Spacer()
    }
 }
}