Как создать собственный слайдер с помощью SwiftUI? - PullRequest
Новая
       70

Как создать собственный слайдер с помощью SwiftUI?

1 голос
/ 08 октября 2019

Я могу создать слайдер с помощью SwiftUI, но я не могу изменить стиль слайдера, как показано на изображении (ниже).

Проблема: я не могу найти никакой опциив SwiftUI, чтобы изменить стиль ползунка.

Примечание: я хочу создать это, используя только SwiftUI. Я уже создал этот слайдер в Swift, используя "https://github.com/daprice/iOS-Tactile-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("") }

Как создать слайдер со стилемкак показано на рисунке только с использованием SwiftUI?

enter image description here

1 Ответ

1 голос
/ 08 октября 2019

Как оказалось для меня цвет акцента зависит от контекста, а также от фрейма, поэтому нам не нужно с этим справляться.

Что касается контроля, то я сделал действительно пустышкуи простой пример. Пожалуйста, не рассматривайте это как решение, а скорее для начала. 

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)
    ...
...