【Lebus的iOS开发教程】iOS16+SwiftUI4.0新功能实操演示-GaugeGauge-用来显示进度条或仪表

Gauge-用来显示进度条或仪表

大家可以想象成是ProgressView和Slider的结合体

和ProgressView做对比：

struct ContentView: View {
    
    @State private var speed = 0.5
    
    var body: some View {
        VStack {
            ProgressView(value: speed) {
                Text("正在加载")
            }
            Gauge(value: speed) {
                Text("正在加载")
            }
        }
        .padding()
    }
}

上例的默认范围是0到1，所以参数为0.5的时候，就显示一半的进度条。

和Slider一样，也可以提供自定义范围：

struct ContentView: View {
    
    @State private var speed = 50.0
    
    var body: some View {
        VStack {
            Slider(value: $speed, in: 0...250) {
                Text("正在加载")
            } minimumValueLabel: {
                Text("0")
            } maximumValueLabel: {
                Text("250")
            }
            
            Gauge(value: speed, in: 0...250) {
                Text("正在加载")
            } currentValueLabel: {
                Text(Int(speed), format: .number)
            } minimumValueLabel: {
                Text("0")
            } maximumValueLabel: {
                Text("250")
            }
        }
        .padding()
    }
}

上述范围是0到250，所以speed是50的时候，显示5分之一进度条：

Gauge除了可以显示最大最小值处的文本，还可以显示’正在加载‘的文本，但不能像Slider一样拖动

Gauge独有功能-有很多style和color

总体预览：

先说style：

linearCapacity：

struct ContentView: View {
    @State private var temp = 36.0
    
    private let minValue = 0.0
    private let maxValue = 100.0
    
    let gradient = Gradient(colors: [.green, .orange, .pink])
    
    var body: some View {
        VStack(spacing: 80) {
            Gauge(value: temp, in: minValue...maxValue) {
                Label("温度 (°C)", systemImage: "thermometer.medium")
            } currentValueLabel: {
                Text(Int(temp), format: .number)
            } minimumValueLabel: {
                Text("0")
            } maximumValueLabel: {
                Text("100")
            }
            Gauge(value: temp, in: minValue...maxValue) {
                Label("温度 (°C)", systemImage: "thermometer.medium")
            }
            Slider(value: $temp, in: minValue...maxValue)
        }
        .gaugeStyle(.linearCapacity) //看这里
        
        .padding()
    }
}