SwiftUI-da Badge — TabView va List uchun belgilar

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

Bu videoda badge — bildirishnoma belgisini qo'shishni o'rganamiz. Bu iOS 15 da SwiftUI-ga qo'shildi. UIKit-da allaqachon mavjud edi, lekin SwiftUI-ga kech qo'shildi.

Badge ikkita joyda ishlaydi:

TabView — tab-dagi bildirishnomalar soni
List — ro'yxat qatorida qo'shimcha matn

Yangi fayl yaratish

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

1. TabView-da badge

struct BadgesBootcamp: View {
    var body: some View {
        TabView {
            Color.red
                .tabItem {
                    Image(systemName: "heart.fill")
                    Text("Sevimlilar")
                }
                .badge(5)

            Color.green
                .tabItem {
                    Image(systemName: "message.fill")
                    Text("Xabarlar")
                }
                .badge(12)

            Color.blue
                .tabItem {
                    Image(systemName: "person.fill")
                    Text("Profil")
                }
                .badge(0)
        }
    }
}

Eslatma: badge(0) bo'lganda badge umuman ko'rinmaydi — bu juda qulay, chunki 0 ta bildirishnoma bo'lganda belgi ko'rsatmaslik kerak.

Matn bilan badge

Son o'rniga matn ham berish mumkin:

Color.red
    .tabItem {
        Image(systemName: "bell.fill")
        Text("Yangiliklar")
    }
    .badge("Yangi")

2. List-da badge

List-dagi badge TabView-dagi kabi qizil doira emas — balki qator o'ng tomonida ikkilamchi rangda matn ko'rinishida chiqadi:

struct BadgesBootcamp: View {
    var body: some View {
        List {
            Text("Kiruvchi xabarlar")
                .badge(3)

            Text("Yuborilganlar")
                .badge(0)

            Text("Qoralamalar")
                .badge("Yangi")
        }
    }
}

badge(0) List-da ham ko'rinmaydi.

Badge-ni dinamik yangilash

Badge odatda @State o'zgaruvchisi bilan ishlatiladi — bildirishnomalar soni o'zgarganda badge avtomatik yangilanadi:

struct BadgesBootcamp: View {

    @State var messageCount: Int = 5

    var body: some View {
        TabView {
            VStack {
                Text("Xabarlar: \(messageCount)")
                Button("O'qildi") {
                    messageCount = 0
                }
            }
            .tabItem {
                Image(systemName: "message.fill")
                Text("Xabarlar")
            }
            .badge(messageCount)
        }
    }
}

TabView va List — badge ko'rinishi farqi

Joy	Ko'rinishi
TabView	Qizil doira ichida oq raqam (iOS standart stili)
List	Qator o'ng tomonida ikkilamchi rangda matn

To'liq kod

struct BadgesBootcamp: View {

    @State var notifications: Int = 5

    var body: some View {
        TabView {
            // Badge son bilan
            List {
                Text("Kiruvchi xabarlar")
                    .badge(notifications)

                Text("Yuborilganlar")
                    .badge(0)

                Text("Qoralamalar")
                    .badge("Yangi")
            }
            .tabItem {
                Image(systemName: "tray.fill")
                Text("Pochta")
            }
            .badge(notifications)

            Color.green
                .tabItem {
                    Image(systemName: "person.fill")
                    Text("Profil")
                }

            Color.blue
                .tabItem {
                    Image(systemName: "gearshape.fill")
                    Text("Sozlamalar")
                }
        }
    }
}

Xulosa

Bu videoda o'rgandik:

.badge(Int) — son bilan badge qo'shish
.badge(String) — matn bilan badge qo'shish
badge(0) — badge ko'rinmaydi (son nol bo'lsa avtomatik yashiriladi)
TabView-da — qizil doira ichida son (iOS standart stili)
List-da — qator o'ng tomonida ikkilamchi rangda matn
Badge odatda @State o'zgaruvchisi bilan birgalikda ishlatiladi

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