ios - 如何使用 SwiftUI 创建自定义 slider ？

Question

我可以使用 SwiftUI 创建 slider ，但无法更改 slider 的样式，如下图所示。

问题:我无法在 SwiftUI 中找到任何选项来更改 slider 样式。

注意:我只想使用 SwiftUI 创建它。我已经使用“https://github.com/daprice/iOS-Tactile-Slider”在 Swift 中创建了这个 slider

我试过以下方法，但这不是解决方案:

1. Slider(value: .constant(0.3)).accentColor(Color.white)

2. Slider(value: $age, in: 18...20, step: 1, minimumValueLabel: Text("18"), maximumValueLabel: Text("20")) { Text("") }

3. Slider(value: $age, in: 18...20, step: 1, minimumValueLabel: Image(systemName: "18.circle"), maximumValueLabel: Image(systemName: "20.circle")) { Text("") }

How can I create a slider with the style as shown in the image using SwiftUI only?

Answer 1

事实证明，强调色取决于上下文和框架，因此我们不需要处理它。

就控件而言，我做了一个非常简单的虚拟示例。请不要将此视为解决方案，而是一个开始。

struct CustomView: View {

    @Binding var percentage: Float // or some value binded

    var body: some View {
        GeometryReader { geometry in
            // TODO: - there might be a need for horizontal and vertical alignments
            ZStack(alignment: .leading) {
                Rectangle()
                    .foregroundColor(.gray)
                Rectangle()
                    .foregroundColor(.accentColor)
                    .frame(width: geometry.size.width * CGFloat(self.percentage / 100))
            }
            .cornerRadius(12)
            .gesture(DragGesture(minimumDistance: 0)
                .onChanged({ value in
                    // TODO: - maybe use other logic here
                    self.percentage = min(max(0, Float(value.location.x / geometry.size.width * 100)), 100)
                }))
        }
    }
}

你可以像这样使用它

    @State var percentage: Float = 50

    ...
    var body: some View {
    ...
            CustomView(percentage: $percentage)
                .accentColor(.red)
                .frame(width: 200, height: 44)
    ...