SwiftUI Picker DatePicker Slider

直接看代码案例快速入手SwiftUI

本文介绍Picker，DatePicker，Slider。

🎉下载GitHub仓库，直接体验

Picker

struct PickerContentView: View {
    @State private var selectedIndex = 0

    let options = ["Option 1", "Option 2", "Option 3"]

    var body: some View {
        VStack {
            Picker("Picker", selection: $selectedIndex) {
                ForEach(0 ..< options.count, id: \.self) { index in
                    Text(options[index]).tag(index)
                }
            }

            Picker("Horizontal picker", selection: $selectedIndex) {
                ForEach(0 ..< options.count, id: \.self) { index in
                    Text(options[index]).tag(index)
                }
            }
            .pickerStyle(.segmented)

            Picker("Wheel picker", selection: $selectedIndex) {
                ForEach(0 ..< options.count, id: \.self) { index in
                    Text(options[index]).tag(index)
                }
            }
            .pickerStyle(.wheel)

            Menu {
                Picker("Picker", selection: $selectedIndex) {
                    ForEach(0 ..< options.count, id: \.self) { index in
                        Text(options[index]).tag(index)
                    }
                }
            } label: {
                Text("Menu picker")
            }
        }
    }
}

struct PickerContentView_Previews: PreviewProvider {
    static var previews: some View {
        PickerContentView()
    }
}

DatePicker

struct DatePickerContentView: View {
    @State private var selectedDate = Date()
    
    var body: some View {
        VStack {
            DatePicker("Date picker", selection: $selectedDate, displayedComponents: .hourAndMinute)
            
            DatePicker(
                "Date", selection: $selectedDate, in: ...Date(), displayedComponents: [.date]
            )
            .onChange(of: selectedDate, perform: { date in
                print(date)
            })
            
            let startDate = Calendar.current.date(byAdding: .day, value: -7, to: Date())!
            let endDate = Calendar.current.date(byAdding: .day, value: 7, to: Date())!
            let dateRange = startDate ... endDate
            
            DatePicker("Date picker", selection: $selectedDate, in: dateRange, displayedComponents: [.date])
            
            DatePicker("Date picker wheel", selection: $selectedDate)
                .datePickerStyle(.wheel)
            
            DatePicker("Date picker", selection: $selectedDate)
                .datePickerStyle(.compact)
                .accentColor(.red)
        }
    }
}

struct DatePickerContentView_Previews: PreviewProvider {
    static var previews: some View {
        DatePickerContentView()
    }
}

Slider

struct SliderContentView: View {
    @State private var sliderValue: Double = 0
    @State private var sliderStepValue: Double = 0

    var body: some View {
        VStack {
            Slider(value: $sliderValue, in: 0...100)
            Slider(value: $sliderStepValue, in: 0...100, step: 10)
            Slider(value: $sliderValue, in: 0...100)
                .accentColor(.red)
            Slider(value: $sliderValue, in: 0...100)
                .onChange(of: sliderValue) { value in
                    print("Slider value changed: \(value)")
                }
            Slider(value: $sliderValue, in: 0...100)
                .rotationEffect(.degrees(90))
            CustomSliderView(percentage: $sliderValue)
                .accentColor(.red)
                .frame(width: 200, height: 44)
        }
    }
}

struct SliderContentView_Previews: PreviewProvider {
    static var previews: some View {
        SliderContentView()
    }
}

自定义Slider

struct CustomSliderView: View {
    @Binding var percentage: Double

    var body: some View {
        GeometryReader { geometry in
            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
                    self.percentage = Double(min(max(0, Float(value.location.x / geometry.size.width * 100)), 100))
                })
        }
    }
}

struct CustomSliderView_Previews: PreviewProvider {
    static var previews: some View {
        CustomSliderView(percentage: .constant(20))
            .accentColor(.red)
            .frame(width: 200, height: 44)
    }
}