SwiftUI-da ColorPicker

Hammaga xush kelibsiz! Mening ismim Nick, bu — Swiftful Thinking kanali.

Oldingi videoda umumiy Picker ko'rdik. Bu videoda esa SwiftUI-ga o'rnatilgan maxsus komponent — ColorPicker bilan tanishamiz. U foydalanuvchiga dunyodagi istalgan rangni tanlash imkonini beradi va uni amalga oshirish bir qator koddan iborat.

Yangi fayl yaratish

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

Boshlang'ich ko'rinish

ZStack ichiga fon rangi va ColorPicker qo'shamiz:

struct ColorPickerBootcamp: View {

    @State var backgroundColor: Color = .green

    var body: some View {
        ZStack {
            // Fon qatlami — tanlangan rang
            backgroundColor
                .ignoresSafeArea(.all)

            // ColorPicker
            ColorPicker(
                "Rang tanlang",
                selection: $backgroundColor,
                supportsOpacity: true
            )
            .foregroundColor(.white)
            .font(.headline)
            .padding()
            .background(Color.black)
            .cornerRadius(10)
            .padding(50)
        }
    }
}

ColorPicker uchta parametr oladi:

• Sarlavha (String) — picker yonidagi matn
• selection — @Binding Color o'zgaruvchisi, tanlangan rang shu yerda saqlanadi
• supportsOpacity — foydalanuvchi shaffoflikni ham o'zgartira oladimi

supportsOpacity — shaffoflik

// Faqat to'liq opaque ranglar
ColorPicker("Rang tanlang", selection: $backgroundColor, supportsOpacity: false)

// Shaffoflikni ham o'zgartirish mumkin
ColorPicker("Rang tanlang", selection: $backgroundColor, supportsOpacity: true)

supportsOpacity: true bo'lganda rang tanlash oynasida pastda shaffoflik slayderi ham ko'rinadi.

Rang tanlash oynasi

Live preview-da tugmaning o'ng tomonidagi doirachani bosing — rang tanlash oynasi ochiladi.

Foydalanuvchi uchun quyidagi imkoniyatlar mavjud:

• Standart ranglar — oldindan tayyorlangan ranglar palitrasi
• Spektr — slayder yordamida istalgan rangni tanlash
• Slayderlar — RGB yoki HSB qiymatlari bo'yicha aniq sozlash
• Hex kod — aniq rang kodini kiritish
• Shaffoflik slayderi — supportsOpacity: true bo'lganda ko'rinadi

To'liq kod

struct ColorPickerBootcamp: View {

    @State var backgroundColor: Color = .green

    var body: some View {
        ZStack {
            backgroundColor
                .ignoresSafeArea(.all)

            ColorPicker(
                "Rang tanlang",
                selection: $backgroundColor,
                supportsOpacity: true
            )
            .foregroundColor(.white)
            .font(.headline)
            .padding()
            .background(Color.black)
            .cornerRadius(10)
            .padding(50)
        }
    }
}

backgroundColor ColorPicker-ga @Binding sifatida ulangan va shu o'zgaruvchi ZStack foniga ham berilgan. Shuning uchun rang tanlash oynasida rang o'zgartirilishi bilan ekran foni ham darhol yangilanadi.

Xulosa

Bu videoda o'rgandik:

• ColorPicker — foydalanuvchiga istalgan rangni tanlash imkonini beradigan tayyor SwiftUI komponenti
• selection: $color — tanlangan rang saqlanadigan @Binding Color o'zgaruvchisi
• supportsOpacity — shaffoflik slayderini yoqish yoki o'chirish
• ColorPicker bitta qator kod bilan amalga oshiriladi va foydalanuvchiga boy rang tanlash oynasini taqdim etadi
• Rang tanlash oynasini ochish uchun label emas, doiracha (rang namunasi) bosiladi

Rahmat tomosha qilganingiz uchun! Men — Nick, bu Swiftful Thinking. Keyingi videoda ko'rishamiz!