Published on

SwiftUI-da Toggle — kalit tugma

Authors

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

Bu videoda Toggle komponentini ko'ramiz. Toggle — foydalanuvchi yoqib-o'chirishi mumkin bo'lgan oddiy kalit (switch). Ilovada "ha/yo'q" yoki "yoq/o'chir" kabi ikki holatli tanlovlar uchun juda qulay.

Yangi fayl yaratish

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

Oddiy Toggle

struct ToggleBootcamp: View {

    @State var toggleIsOn: Bool = false

    var body: some View {
        Toggle(isOn: $toggleIsOn, label: {
            Text("Holat o'zgartirish")
        })
    }
}

Toggle ikkita parametr oladi:

  • isOn — @Binding Bool o'zgaruvchisi, kalit holati shu yerda saqlanadi
  • label — kalit yonida ko'rinadigan matn yoki ko'rinish

Canvas-da Resume bosib live preview-ni ishga tushiring — kalitni bosib yoqib-o'chirishingiz mumkin.

Rangini o'zgartirish — .toggleStyle()

Kalitning yashil rangi o'rniga boshqa rang berish uchun .toggleStyle() ishlatiladi:

Toggle(isOn: $toggleIsOn, label: {
    Text("Holat o'zgartirish")
})
.toggleStyle(SwitchToggleStyle(tint: .red))

Xohlagan rangni berishingiz mumkin:

.toggleStyle(SwitchToggleStyle(tint: .purple))

Haqiqiy ilovaga o'xshash ko'rinish

Toggle-ni ternary operator bilan birlashtirib, kalit holatiga qarab matn o'zgaradigan ekran yaratamiz:

struct ToggleBootcamp: View {

    @State var toggleIsOn: Bool = false

    var body: some View {
        VStack {
            HStack {
                Text("Holat:")
                    .font(.title)

                // Kalit holatiga qarab matn o'zgaradi
                Text(toggleIsOn ? "Online" : "Offline")
                    .font(.title)
            }

            Toggle(isOn: $toggleIsOn, label: {
                Text("Holatni o'zgartirish")
            })
            .toggleStyle(SwitchToggleStyle(tint: .purple))

            Spacer()
        }
        .padding(.horizontal, 100)
    }
}

Kalit yoqilganda "Online", o'chirilganda "Offline" deb ko'rsatadi.

Toggle odatda kenglikni to'liq egallaydi. .padding(.horizontal, 100) qo'shib, uni ekran markaziga to'plash mumkin.

Toggle va @State

Toggle odatda @State Bool o'zgaruvchisi bilan ishlaydi. Bu o'zgaruvchi yoqilganda ilovada boshqa narsalar ham o'zgarishi mumkin — animatsiya, boshqa elementlar ko'rsatish/yashirish va hokazo. Bu oldingi videolarda o'rgangan narsalar bilan bir xil:

// Kalit yoqilganda animatsiya ham ishga tushishi mumkin
withAnimation {
    toggleIsOn.toggle()
}

To'liq kod

struct ToggleBootcamp: View {

    @State var toggleIsOn: Bool = false

    var body: some View {
        VStack {
            HStack {
                Text("Holat:")
                    .font(.title)

                Text(toggleIsOn ? "Online" : "Offline")
                    .font(.title)
            }

            Toggle(isOn: $toggleIsOn, label: {
                Text("Holatni o'zgartirish")
            })
            .toggleStyle(SwitchToggleStyle(tint: .purple))

            Spacer()
        }
        .padding(.horizontal, 100)
    }
}

Xulosa

Bu videoda o'rgandik:

  • Toggle — foydalanuvchi yoqib-o'chira oladigan kalit komponenti
  • isOn: $bool — kalitni @State Bool o'zgaruvchisiga bog'lash
  • .toggleStyle(SwitchToggleStyle(tint:)) — kalit rangini o'zgartirish
  • Ternary operator bilan birlashtirib kalit holatiga qarab matn yoki boshqa narsalarni o'zgartirish mumkin
  • Toggle — oddiy @State Bool o'zgaruvchisi bo'lgani uchun animatsiyalar, shartli ko'rsatish va boshqa narsalar bilan birga ham ishlatilishi mumkin

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

Buy mea coffee