Published on

SwiftUI-da Picker va uning stillari

Authors

Bu videoda Picker komponentini o'rganamiz. Foydalanuvchi bir nechta variantdan birini tanlashi kerak bo'lgan har qanday holatda Picker juda qulay. Katta ma'lumot to'plamlari uchun ham, kichik (2-3 variant) uchun ham mos stillar mavjud.

Yangi fayl yaratish

Navigatorda o'ng tugma bosib yangi SwiftUI fayli yarating. Uni PickerBootcamp deb nomlang va Create tugmasini bosing. Canvas-da Resume bosing.

1. Wheel Picker — aylanuvchan g'ildirak

Bu Picker-ning standart ko'rinishi. Katta ma'lumot to'plamlari uchun qulay.

Oddiy Picker

struct PickerBootcamp: View {

    @State var selection: String = "1"

    var body: some View {
        VStack {
            HStack {
                Text("Yosh:")
                Text(selection)
            }

            Picker(
                selection: $selection,
                label: Text("Picker"),
                content: {
                    Text("1").tag("1")
                    Text("2").tag("2")
                    Text("3").tag("3")
                    Text("4").tag("4")
                    Text("5").tag("5")
                }
            )
            .pickerStyle(WheelPickerStyle())
        }
    }
}

Eslatma: Text — ekranda ko'rinadigan narsa, .tag() — tanlaganda selection-ga yoziladigan qiymat. Ular odatda bir xil bo'ladi.

ForEach bilan katta diapason

100 tagacha yozishning hojati yo'q — ForEach ishlatamiz:

struct PickerBootcamp: View {

    @State var selection: String = "18"

    var body: some View {
        VStack {
            HStack {
                Text("Yosh:")
                Text(selection)
            }

            Picker(
                selection: $selection,
                label: Text("Yosh"),
                content: {
                    ForEach(18..<100) { number in
                        Text("\(number)").tag("\(number)")
                    }
                }
            )
            .pickerStyle(WheelPickerStyle())
        }
    }
}

Endi Picker 18 dan 99 gacha barcha sonlarni ko'rsatadi.

Rangini biroz sozlash

Picker(/* ... */, content: {
    ForEach(18..<100) { number in
        Text("\(number)")
            .font(.headline)
            .foregroundColor(.red)
            .tag("\(number)")
    }
})
.background(Color.gray.opacity(0.3))
.pickerStyle(WheelPickerStyle())

Picker unchalik katta sozlash imkonini bermaydi. Lekin matn rangi va fon rangini o'zgartirish mumkin.

2. Menu Picker — ochiladigan menyu

Kichik ma'lumot to'plamlari (2-5 variant) uchun juda chiroyli ko'rinish. Eng sevimli stilim!

struct PickerBootcamp: View {

    let filterOptions: [String] = ["Eng yangi", "Eng mashhur", "Eng ko'p yoqtirilgan"]
    @State var selection: String = "Eng yangi"

    var body: some View {
        Picker(
            selection: $selection,
            label: Text("Filter"),
            content: {
                ForEach(filterOptions, id: \.self) { option in
                    Text(option).tag(option)
                }
            }
        )
        .pickerStyle(MenuPickerStyle())
    }
}

MenuPickerStyle-da label ko'rinadi (oldingi stildan farqi). Bosilganda variantlar ro'yxati ochilib chiqadi.

Labelni chiroyli qilish

Picker(
    selection: $selection,
    label: HStack {
        Text("Filter")
            .font(.headline)
            .foregroundColor(.white)
        Text(selection)
            .foregroundColor(.white)
    }
    .padding()
    .padding(.horizontal)
    .background(Color.blue)
    .cornerRadius(10)
    .shadow(color: Color.blue.opacity(0.3), radius: 10, x: 0, y: 10),
    content: {
        ForEach(filterOptions, id: \.self) { option in
            Text(option).tag(option)
        }
    }
)
.pickerStyle(MenuPickerStyle())

Variantlarga ikonka qo'shish

ForEach(filterOptions, id: \.self) { option in
    HStack {
        Image(systemName: "heart.fill")
        Text(option)
    }
    .tag(option)
}

3. Segmented Picker — bo'limli tugmalar

2-3 ta variant bo'lganda eng qulay ko'rinish. Profil sozlamalari, filtr tugmalari kabi joylarda ko'p ishlatiladi.

struct PickerBootcamp: View {

    let filterOptions: [String] = ["Eng yangi", "Eng mashhur", "Eng ko'p yoqtirilgan"]
    @State var selection: String = "Eng yangi"

    var body: some View {
        Picker(
            selection: $selection,
            label: Text("Filter"),
            content: {
                ForEach(filterOptions.indices, id: \.self) { index in
                    Text(filterOptions[index]).tag(filterOptions[index])
                }
            }
        )
        .pickerStyle(SegmentedPickerStyle())
    }
}

ForEach-da id: \.self o'rniga .indices ishlatilganda indeks orqali elementlarga murojaat qilinadi.

Tanlangan segment rangini o'zgartirish

SegmentedPickerStyle UIKit-dan kelgan, shuning uchun sozlash uchun init() ichida UIKit metodlaridan foydalanamiz:

struct PickerBootcamp: View {

    let filterOptions: [String] = ["Eng yangi", "Eng mashhur", "Eng ko'p yoqtirilgan"]
    @State var selection: String = "Eng yangi"

    init() {
        // Tanlangan segmentning fon rangi
        UISegmentedControl.appearance().selectedSegmentTintColor = UIColor.red

        // Tanlangan matn rangi va uslubi
        let attributes: [NSAttributedString.Key: Any] = [
            .foregroundColor: UIColor.white
        ]
        UISegmentedControl.appearance().setTitleTextAttributes(attributes, for: .selected)
    }

    var body: some View {
        Picker(
            selection: $selection,
            label: Text("Filter"),
            content: {
                ForEach(filterOptions.indices, id: \.self) { index in
                    Text(filterOptions[index]).tag(filterOptions[index])
                }
            }
        )
        .pickerStyle(SegmentedPickerStyle())
    }
}

Muhim: UISegmentedControl.appearance() — ilovadagi barcha segmented control-larga ta'sir qiladi, faqat bitta ekranga emas. Bir nechta ekranda turli ranglar kerak bo'lsa, buni hisobga oling.

Stillarni solishtirish

StilQachon ishlatiladiSozlash imkoni
WheelPickerStyleKo'p variant (20+)O'rtacha
MenuPickerStyleKam variant (2-5)Label to'liq sozlanadi
SegmentedPickerStyle2-3 variantUIKit orqali sozlanadi

Xulosa

Bu videoda o'rgandik:

  • Picker — foydalanuvchiga bir nechta variantdan birini tanlatish komponenti
  • .tag() — tanlaganda selection-ga yoziladigan qiymat
  • ForEach — ko'p variantni qo'lda yozmasdan dinamik ko'rsatish
  • WheelPickerStyle — aylanuvchan g'ildirak, katta to'plamlar uchun
  • MenuPickerStyle — ochiladigan menyu, kam variantlar uchun
  • SegmentedPickerStyle — bo'limli tugmalar, 2-3 variant uchun
  • UISegmentedControl.appearance() — segmented control-ni UIKit orqali sozlash

Rahmat tomosha qilganingiz uchun! Keyingi videoda ko'rishamiz!

Buy mea coffee