在SwiftUI中，可以使用Slider視圖創建一個滑動條，允許用戶從范圍中選擇一個值。通過系統提供的Slider，用起來也很方便。

Slider

先看一個最簡單的初始化方法：

  @State private var sliderValue: Float = 100var 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 = 5var 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 = 5var 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 = .blackvar 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 incolor = isChanging ? .red : .black}}}

minimumValueLabel和maximumValueLabel

minimumValueLabel和maximumValueLabel兩個初始化參數需要我們傳入Text組件實例，分別用來顯示在滑動條的左側和右側。

@State private var sliderValue: Float = 5@State private var color: Color = .blackvar 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 incolor = isChanging ? .red : .black}).padding(.horizontal).tint(.red)}}

再給minimumValueLabel和maximumValueLabel賦值的時候，我們可以對Text組件設置想要的樣式。
上面代碼中我們給Slider添加了.tint修飾符，修改了滑動快左側部分的顏色。

最后，希望能夠幫助到有需要的朋友，如果覺得有幫助，還望點個贊，添加個關注，筆者也會不斷地努力，寫出更多更好用的文章。