Published on

SwiftUI-da ControlGroup

Authors

Menu komponenti tugmalarni vertikal qatorlar shaklida ko'rsatadi. ControlGroup esa shunga o'xshash, lekin tugmalarni gorizontal guruhlash imkonini beradi. Ikkalasini birlashtirib, ko'p qatlamli ochiladigan menyular yaratish mumkin.


Yangi fayl yaratish

Navigatorda o'ng tugma bosib yangi SwiftUI fayli yarating. Uni ControlGroupMenuBootcamp deb nomlang va Create tugmasini bosing.


Oddiy Menu

Menu("Mening menyum") {
    Button("Bir") {}
    Button("Ikki") {}
    Button("Uch") {}
}

Tugma bosilganda har bir element alohida qatorda β€” yuqoridan pastga ko'rinadi. Menyu ekranning qaysi qismida ekanligiga qarab yuqoriga yoki pastga ochilishi mumkin β€” bu tizim tomonidan avtomatik boshqariladi.


ControlGroup β€” gorizontal guruhlash

ControlGroup bir nechta tugmani yonma-yon joylashtiradi:

Menu("Mening menyum") {
    ControlGroup("Bir") {
        Button("Uno") {}
        Button("Dos") {}
        Button("Tres") {}
    }
}

Natijada menyuda "Bir" sarlavhali qator chiqadi, uning ostida esa uchta tugma gorizontal ravishda yonma-yon joylashadi.

Sarlavhasiz ControlGroup

Sarlavhani olib tashlasangiz, faqat gorizontal tugmalar qatori qoladi:

ControlGroup {
    Button("Uno") {}
    Button("Dos") {}
    Button("Tres") {}
}

Ichki menyular β€” qatlamli tuzilma

Menu ichida yana boshqa Menu joylashtirish mumkin β€” bu ko'p bosqichli ochiladigan menyu hosil qiladi:

Menu("Mening menyum") {
    Button("Bir") {}

    ControlGroup("Ikki") {
        Button("Uno") {}
        Button("Dos") {}
    }

    Menu("Uch") {
        Button("Salom") {}
        Button("Qalaysiz?") {}

        Menu("Qalaysiz?") {
            Button("Yaxshi") {}
            Button("Yomon") {}
        }
    }
}

Bu tuzilmada:

  • "Bir" β€” oddiy tugma
  • "Ikki" β€” ControlGroup, ichida ikkita gorizontal tugma
  • "Uch" β€” Menu, ichida yana ikkita tugma va yana bitta ichki Menu

Foydalanuvchi "Uch" ustiga bossa, yangi menyu ochiladi. U yerdan "Qalaysiz?" ustiga bossa, yana bir menyu ochiladi. Har bir bosqichda foydalanuvchi orqaga qaytishi ham mumkin.


ControlGroup-ni Menu ichida ishlatish

ControlGroup Menu-ning bevosita farzandi sifatida ham ishlatilishi mumkin:

Menu("Mening menyum") {
    Button("Bir") {}

    Menu("Qalaysiz?") {
        Button("Yaxshi") {}
        Button("Yomon") {}
    }
}

To'liq kod

struct ControlGroupMenuBootcamp: View {
    var body: some View {
        Menu("Mening menyum") {
            Button("Bir") {}

            ControlGroup("Ikki") {
                Button("Uno") {}
                Button("Dos") {}
                Button("Tres") {}
            }

            Menu("Uch") {
                Button("Salom") {}

                Menu("Qalaysiz?") {
                    Button("Yaxshi") {}
                    Button("Yomon") {}
                }
            }
        }
    }
}

Qachon ishlatish kerak?

Ushbu naqsh quyidagi holatlarda foydali:

  • Foydalanuvchi tez-tez bosmaydigan sozlamalar yoki amallar ro'yxati uchun (masalan, ellipsis tugmasi ortidagi qo'shimcha amallar)
  • Bir nechta bog'liq amallarni guruhlash kerak bo'lganda (ControlGroup bilan)
  • Ko'p qatlamli tanlovlar kerak bo'lganda β€” masalan, kategoriya va subkategoriya tanlash

Foydalanuvchi har safar ilovani ochganda bosadigan asosiy amallar uchun bu menyu o'rniga alohida, doim ko'rinadigan tugma (masalan, navigatsiya panelida) ishlatish maqsadga muvofiqroq. Menu va ControlGroup esa kamroq tez-tez kerak bo'ladigan, ammo bir nechta tanlov talab qiladigan amallar uchun mos.


Xulosa

Bu videoda o'rgandik:

  • Menu β€” tugmalarni vertikal qatorlar shaklida ko'rsatadi
  • ControlGroup β€” tugmalarni gorizontal guruhlab ko'rsatadi, sarlavha bilan yoki sarlavhasiz
  • Ichki Menu β€” Menu ichida yana Menu qo'yib, ko'p bosqichli navigatsiya yaratish mumkin
  • ControlGroup ham Menu ichida ishlatilishi mumkin
  • Bu komponentlar tizim darajasida avtomatik moslashadi β€” ochilish yo'nalishi, orqaga qaytish kabi imkoniyatlar qo'shimcha kod yozmasdan ishlaydi
Buy mea coffee