SwiftUI-da klaviaturaning Submit tugmasini moslashtirish

Hammaga salom, xush kelibsiz qaytib! Men — Nick, bu Swiftful Thinking, va bu, ehtimol, yana bir shunday video — to'liq alohida video bo'lishi shart bo'lmagan, ammo men Bootcamp-ni birinchi marta yaratganimda, biz hali iOS 14da edik, va bizda ushbu videoda ko'rib chiqadigan iOS 15ning bu ajoyib yangi xususiyatlari yo'q edi.

Bunga, jumladan, ushbu videoda ko'rib chiqadigan bir nechta yangi modifikator kiradi. Birinchisi — onSubmit. Qurilmada klaviatura chiqqanida, uning pastki o'ng burchagida kichik bir "Return" (qaytish) tugmasi bo'ladi. iOS 15dan oldin, SwiftUI-da biz shu tugma bilan hech qanday alohida amal bajara olmasdik — foydalanuvchi uni bossa, klaviatura yopiladi, ammo biz bu bilan birga hech qanday qo'shimcha amal bajara olmasdik.

Ushbu yangi onSubmit modifikatori bilan endi biz, atigi bir qator qo'shimcha kod orqali, xohlagan har qanday amalni bajarishimiz mumkin. Shundan keyin biz yana bir yangi modifikator — **submitLabel**ni ko'rib chiqamiz, va u, aslida, nomidan ham ko'rinib turganidek ishlaydi: biz klaviaturada chiqadigan shu "Return" tugmasining yozuvini (label) o'zgartirishimiz mumkin. iOS 14da bu tugma har doim "Return" deb yozilgan edi, ammo endi iOS 15da biz buni, hech bo'lmaganda bir oz, moslashtira olamiz. Juda qiziqarli narsalar — keling, Xcode-ga o'tib, kod yozishni boshlaymiz.

Yangi SwiftUI fayl yaratish

Xcode loyihamizga, Swiftful Thinking Bootcamp-ga qaytdik. Sizlar uchun yana bir juda tezkor video. Navigator-da o'ng tugmani bosib, yangi fayl yaratamiz — bu SwiftUI View bo'ladi, va unga SubmitTextFieldBootcamp deb nom beramiz.

Bu juda-juda sodda bo'ladi — yana bir bor aytaman, bular iOS 15-dan kelgan yangi yangilanishlar, shuning uchun ular ushbu seriyaning oldinroq qismida men TextField haqida video qilganimda mavjud emas edi. Shuning uchun o'sha TextField videosi, albatta, hamon juda dolzarb. Ushbu videoda biz shunchaki yana bir TextField qo'shamiz — buni qisqa va tezkor qilamiz.

Boshlang'ich TextField

"placeholder..." deb sarlavha (title) qo'shamiz:

TextField("placeholder...", text: $text)

Yuqorida text nomli state o'zgaruvchisi yaratamiz, va uni bo'sh qiymat bilan boshlaymiz:

@State private var text: String = ""

Eslatma: men bu yerda iOS 15-ning prompt parametrini o'chirib tashlayman, chunki bu hozircha bizga unchalik kerak emas.

Ekranimizda TextField paydo bo'ladi, va uni bossak, klaviatura chiqishi kerak. Buni tezroq sinab ko'rish uchun, shu struct-ni ilovamizning birinchi view-i qilib, simulatorda ishga tushiramiz.

Foydalanuvchilar TextField-ni bosganda, klaviatura chiqib keladi — bu chiroyli ko'rinadi, ammo iOS 15dan oldin, bu "Return" tugmasi bilan hech narsa qila olmasdik — u shunchaki doim "Return" tugmasi edi, va foydalanuvchi uni bosganida, faqat klaviatura yopilardi. Bu yaxshi — bu boshlanish, ammo biz hech qanday alohida amal bajara olmaganmiz.

.onSubmit modifikatori

Yaxshiyamki, endi iOS 15da biz .onSubmit maydonini qo'shishimiz mumkin. Bu, xuddi boshqa har qanday closure — .onAppear, .onDisappear kabi — ishlaydi, faqat bu — onSubmit, va biz bu yerda konsolga biror narsa chop etishimiz mumkin:

TextField("placeholder...", text: $text)
    .onSubmit {
        print("On submit")
    }

Ilovani yana ishga tushirib, simulatorga qaytamiz: TextField-ni ochamiz, va endi **"Return"**ni bosganimda, biz konsolga biror narsani chop etishimiz mumkin.

Shunchaki shu — endi biz shu "Return" tugmasini bosganda biror amal bajara olamiz. Bu juda qulay, chunki avval foydalanuvchi uni bossa, bu shunchaki klaviaturani yopib qo'yardi, va keyin bizga, ularning matnini haqiqatan yuborish uchun, qo'shimcha kod ishga tushirish yoki ularni boshqa tugmani bosishga majburlash usulini topishimiz kerak edi. Endi esa biz bularning barchasini bir vaqtning o'zida amalga oshira olamiz — bu juda qulay.

.submitLabel modifikatori

Hozircha bitta kamchilik bor: bu "Return" tugmasi kulrang, va u shunchaki "Return" deb yozilgan — u "Submit", "Go" yoki shunga o'xshash biror chiroyli narsa demaydi. Yaxshiyamki, iOS 15ning yana bir xususiyati — biz .submitLabel qo'shishimiz mumkin.

Nuqta qo'yib qarasak, bizda kutganimdan ham ko'proq variant bor ekan — men Apple bizga shunchaki bir-ikki variant, masalan "Continue" kabi narsa berishini kutgan edim, ammo bu yerda juda ko'plab turli xil variantlar mavjud.

Avval **.route**ni sinab ko'raylik:

TextField("placeholder...", text: $text)
    .submitLabel(.route)
    .onSubmit {
        print("On submit")
    }

Simulatorda ishga tushirib ko'rsak — endi tugmada "Route" so'zi paydo bo'lganini ko'ramiz.

Har bir TextField uchun alohida moslashtirish

Buni, agar bizda bir nechta TextField bo'lsa, har biri uchun alohida-alohida ham moslashtirishimiz mumkin. Shuni ko'rsatish uchun, shu TextField-ni qirqib olib, VStack ichiga, uch marta nusxalab joylashtiramiz:

VStack {
    TextField("placeholder...", text: $text)
        .submitLabel(.route)
        .onSubmit {
            print("On submit")
        }

    TextField("placeholder...", text: $text)
        .submitLabel(.next)
        .onSubmit {
            print("On submit")
        }

    TextField("placeholder...", text: $text)
        .submitLabel(.search)
        .onSubmit {
            print("On submit")
        }
}

Birinchisini .route, ikkinchisini .next, uchinchisini esa .search qilamiz.

Ilovani ishga tushiramiz: birinchi maydonni bossak — bizda "Route" bor; ikkinchisini bossak — "Next" chiqadi, va e'tibor bering: "Next" tugmasi ko'k emas, balki kulrang. Uchinchisini bossak — yana "Search" chiqadi, va bu yana ko'k rangga qaytadi — bu juda qulay.

Albatta, bularning barchasi hozircha konsolga bir xil narsani chop etmoqda, ammo biz shu amallarni ham har biriga alohida moslashtirishimiz mumkin.

Xulosa

Demak, biz endi TextField-da bo'lganimizda, klaviaturaning ko'rinishi va xususiyatlarini moslashtirishni boshlay olamiz.

Sizlar uchun tezkor va oson video bo'ldi — umid qilaman, sizlarga yoqdi. Har doimgidek, men — Nick, bu Swiftful Thinking, va keyingi videoda ko'rishamiz!