面试题：SwiftUI的Slider组件自定义样式及值的实时处理

Question

在SwiftUI中，Slider组件默认样式较为单一。请实现一个自定义样式的Slider，例如改变滑块的颜色、轨道的颜色等。并且，当Slider的值发生变化时，实时计算并展示其平方值，要求使用响应式编程的思想来实现。

Answer 1

1. 创建自定义样式的Slider：
   • 首先，我们可以通过.accentColor来改变Slider的默认颜色，包括滑块和轨道的颜色。如果想要更细致的控制，我们可以使用.sliderStyle来自定义Slider的样式。
   • 以下是一个自定义SliderStyle的示例代码：

struct CustomSliderStyle: SliderStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            Rectangle()
               .frame(height: 4)
               .foregroundColor(.gray)
            Circle()
               .fill(configuration.isPressed? Color.blue : Color.green)
               .frame(width: 20, height: 20)
            Rectangle()
               .frame(height: 4)
               .foregroundColor(.gray)
        }
       .onChange(of: configuration.value) { newValue in
            configuration.value = newValue
        }
    }
}

2. 实现Slider值变化时实时计算并展示其平方值：
   • 使用@State来跟踪Slider的值，并且在Slider值变化时，实时计算并展示其平方值。
   • 完整代码如下：

import SwiftUI

struct ContentView: View {
    @State private var sliderValue: Double = 0.0
    @State private var squaredValue: Double = 0.0

    var body: some View {
        VStack {
            Text("Slider Value: \(sliderValue)")
            Text("Squared Value: \(squaredValue)")
            Slider(value: $sliderValue, in: 0...10, step: 0.1)
              .sliderStyle(CustomSliderStyle())
              .onChange(of: sliderValue) { newValue in
                    squaredValue = newValue * newValue
                }
        }
       .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在上述代码中：

• CustomSliderStyle结构体定义了一个自定义的Slider样式，其中通过configuration.isPressed来判断滑块是否被按下，从而改变滑块的颜色。
• 在ContentView中，@State变量sliderValue用于跟踪Slider的值，squaredValue用于存储sliderValue的平方值。Slider的onChange闭包在sliderValue变化时更新squaredValue。

这样就实现了自定义样式的Slider，并在其值变化时实时计算并展示其平方值，符合响应式编程的思想。