SwiftUI中的Slider的基本使用

最新推荐文章于 2024-07-20 16:00:43 发布

技术拾光

最新推荐文章于 2024-07-20 16:00:43 发布

阅读量449

点赞数 4

分类专栏： SwiftUI 文章标签： swiftui ios Slider

本文链接：https://blog.csdn.net/guoyongming925/article/details/139203819

版权

SwiftUI 专栏收录该内容

47 篇文章 3 订阅

订阅专栏

在SwiftUI中，可以使用Slider视图创建一个滑动条，允许用户从范围中选择一个值。通过系统提供的Slider，用起来也很方便。

Slider

先看一个最简单的初始化方法：
在这里插入图片描述

  @State private var sliderValue: Float = 100

  var body: some View {
    VStack(spacing: 30) {
      Text("\(sliderValue)")
      Slider(value: $sliderValue)
    }
  }

Slider的初始化至少需要传入一个@State修饰的变量，用来记录滑动的数值。如果只是这样初始化，那默认滑动条的范围是从0到1，上面代码中初始值给了100，那么显示的时候滑动条的滑块直接就在最右边了，不过在滑动后，就变味0到1的数值了。

指定滑动范围

默认的滑动范围是0到1，我们也可以在初始化的时候传入一个范围，这样滑动的取值就在这个范围之内了。

  @State private var sliderValue: Float = 5

  var body: some View {
    VStack(spacing: 30) {
      Text("\(sliderValue)")
//      Slider(value: $sliderValue)
      Slider(value: $sliderValue, in: 0...10)
    }
  }

初始化方法中提供了一个in参数，可以传入一个范围。
在这里插入图片描述

指定滑动步长

滑动步长指的是滑动时数值变化的距离。比如下面这个示例，我们将范围设置为0到10，步长1，这样滑动过程中，数值都是以整数变化，不断加1.

  @State private var sliderValue: Float = 5

  var body: some View {
    VStack(spacing: 30) {
      Text(String(format: "%.0f", sliderValue))
//      Slider(value: $sliderValue)
//      Slider(value: $sliderValue, in: 0...10)
      Slider(value: $sliderValue, in: 0...10, step: 1)
    }
  }

在这里插入图片描述

onEditingChanged

onEditingChanged是初始化中的一个闭包参数，在我们滑动过程中以及结束的时候调用这个闭包，闭包内返回一个bool类型的参数，滑动时为true，滑动结束后为false。
比如下面的代码，在滑动时修改显示数字的颜色为红色，滑动结束后改回黑色。

  @State private var sliderValue: Float = 5
  @State private var color: Color = .black

  var body: some View {
    VStack(spacing: 30) {
      Text(String(format: "%.0f", sliderValue))
        .foregroundColor(color)
//      Slider(value: $sliderValue)
//      Slider(value: $sliderValue, in: 0...10)
//      Slider(value: $sliderValue, in: 0...10, step: 1)
      Slider(value: $sliderValue, in: 0...10, step: 1) { isChanging in
        color = isChanging ? .red : .black
      }
    }
  }

在这里插入图片描述

minimumValueLabel和maximumValueLabel

minimumValueLabel和maximumValueLabel两个初始化参数需要我们传入Text组件实例，分别用来显示在滑动条的左侧和右侧。

@State private var sliderValue: Float = 5
  @State private var color: Color = .black

  var body: some View {
    VStack(spacing: 30) {
      Text(String(format: "%.0f", sliderValue))
        .foregroundColor(color)
//      Slider(value: $sliderValue)
//      Slider(value: $sliderValue, in: 0...10)
//      Slider(value: $sliderValue, in: 0...10, step: 1)
//      Slider(value: $sliderValue, in: 0...10, step: 1) { isChanging in
//        color = isChanging ? .red : .black
//      }
      Slider(
        value: $sliderValue,
        in: 0...10,
        step: 1,
        label: {
          Text("Title")
        },
        minimumValueLabel: {
          Text("0")
        },
        maximumValueLabel: {
          Text("10")
        },
        onEditingChanged: { isChanging in
          color = isChanging ? .red : .black
        })
      .padding(.horizontal)
      .tint(.red)
    }
  }