SwiftUI 开关 指示器 计数器-Toggle Progre

Toggle, 在开启和关闭状态之间切换的控件。

@State var isShowing = true // toggle state

Toggle(isOn: $isShowing) {
    Text("Hello World")
}

截屏2023-06-14 21.56.15.png

如果你的 Toggle 的标签只是 Text 你可以用 这个更简单的声明。

Toggle("Hello World", isOn: $isShowing)

截屏2023-06-14 21.59.27.png

ProgressView, 显示任务完成进度的视图。

@State private var progress = 0.5

VStack {
 ProgressView(value: progress)
 Button("More", action: { progress += 0.05 })
}

截屏2023-06-14 22.51.33.png

通过应用 CircularProgressViewStyle 可以将其用作 UIActivityIndicatorView。或者 .circular

ProgressView(value: progress)
         .progressViewStyle(CircularProgressViewStyle())
      
      ProgressView(value: progress)
        .progressViewStyle(.circular) 

截屏2023-06-14 22.55.46.png

Slider, 在取值范围内滑动选择值的控件。

@State var progress: Float = 10

      Slider(value: $progress, in: 0...100)

截屏2023-06-14 23.18.11.png

设置 min 和 max，或者图片 通过 HStack 设置

@State var progress: Float = 10

      Slider(value: $progress, in: 0...100) {
        
      } minimumValueLabel: {
        Text("0")
      } maximumValueLabel: {
        Text("100")
      }

      
      HStack { 
        Image(systemName: "sun.min")
        Slider(value: $progress, in: 0...100)
        Image(systemName: "sun.max.fill")
      }.padding()

截屏2023-06-14 23.27.53.png

Stepper, 用于执行语义递增和递减动作的控件。

如果你的 Stepper 的标签只有 Text 你可以初始化使用这个更简单的声明。

@State var quantity: Int = 0
      Stepper(value: $quantity, in: 0...10, label: { Text("Quantity \(quantity)")})
      
//    简单声明
      Stepper("Quantity \(quantity)", value: $quantity, in: 0...10)

截屏2023-06-14 23.33.16.png

管理数据。

@State var quantity: Int = 0
Stepper(onIncrement: {
    self.quantity += 1
}, onDecrement: {
    self.quantity -= 1
}, label: { Text("Quantity \(quantity)") })

截屏2023-06-14 23.37.01.png

设置数字每次增加的数量大小, 初始化器指定值 = 2

Stepper(value: $quantity, in: 0...10, step: 2) {
    Text("Quantity \(quantity)")
}

截屏2023-06-14 23.39.19.png