About Teletype
Join
SNRG py | Nematjon Shahobiddinov
@snrg_py
FLET KUTUBXONASI
September 12

flet 2

Flet — bu Python uchun cross-platform GUI (grafik interfeys) kutubxonasi bo‘lib, Flutter asosida qurilgan, web, desktop va mobil ilovalarni tezda yaratishga mo‘ljallangan. Quyida Flet kutubxonasining asosiy tushunchalari, metodlari va funksiyalari (kontrolleri, sahifa interfeysi, eventlar, layout’lar va boshqalar) to‘liqroq ko‘rib chiqamiz.

1. Asosiy tushunchalar

Atama Ma’nosi / vazifasi Control Flet’ning barcha UI elementlari — tugmalar, matn, kiritish maydonlari va boshqalar — control sinfidan meros olinadi. Page Ilovaning asosiy oynasi / sahifasi — bu yerda control’lar joylanadi. main(page: Page) tipik boshlang‘ich funksiya. (Flet) ft.app(...) Ilovani ishga tushuruvchi funksiya. target=main orqali asosiy funksiya beriladi. (Flet) controls Layouth va tashkiliy eltish uchun control’lar ro‘yxati — masalan, Column, Row, Stack kabi container control’lar. (Flet) Events / Callback’lar Masalan, tugma bosilganda, matn maydonidagi o‘zgarishda — on_click, on_change, va boshqalar. Callback funksiyalar odatda bir parametr (event obyekti, e) oladi. (Stack Overflow)

2. Layout va joylashuv (Layout & Positioning)

Flet’da elementlar sahifaga qanday joylanadi, tartiblanishi va tarqoq ko‘rinishi uchun bir qancha kontrollerlar va parametrlar mavjud:

Kontrol / funksiya Vazifasi Row Kontrollerini gorizontal yo‘nalishda joylashtiradi (chapdan o‘ngga). (Flet) Column Kontrollerini vertikal yo‘nalishda joylashtiradi (yuqoridan pastga). (Flet) Stack Elementlar ustma-ust (layered) tarzda joylana oladi — masalan, fon rasmi, ustiga matn va boshqalar. (LabDeck) Positioned Stack ichida joylashishni (koordinatalar, top/left va hk) belgilash uchun ishlatiladi. (LabDeck) expand parametri Masalan, TextField(expand=True) yoki boshqa kontrollerlarda ishlatiladi, bo‘sh joyni kengaytirib olish uchun. (Flet) Alignments horizontal_alignment, vertical_alignment, alignment kabi parametrlar bilan container ichida joylashuv, yo‘nalish sozlanadi. (Flet)

3. Asosiy kontrollerlar (Controls)

Flet da turli UI elementlar mavjud. Ba’zilari:

Kontrol Tavsifi Text Oddiy matn ko‘rsatadi. TextField Matn kiritish maydoni. Checkbox On/off holatini ifodalaydi. Radio, Switch Tanlash uchun boshqa variantlar. Button, ElevatedButton, FilledButton, OutlinedButton Turli ko‘rinishdagi tugmalar. IconButton Ikonka bilan tugma. FloatingActionButton Materyal dizaynidagi “floating” tugma. Tabs, Tab Sahifa ichida tabs navigatsiyasi. Dialog, AlertDialog, BottomSheet Foydalanuvchi bilan dialog oynalari, bildirishnomalar. AppBar Sahifaning yuqori qismi (title bar, action ikonalar bilan). DataTable, DataRow, DataColumn, DataCell Jadval ko‘rinishida ma’lumotlarni chiqarish.

4. Sahifa (Page) bilan ishlash

Page obyekti Flet ilovasining markaziy obyekti hisoblanadi:

Xususiyat / metod Vazifasi page.title Oyna nomini o‘rnatadi. (Flet) page.add(...) Sahifaga control qo‘shadi. (Flet) page.update() UI ni yangilash — control’larda o‘zgartirishlar qilinsa, ularni ekranga aks ettirish. (Flet) page.horizontal_alignment, page.vertical_alignment Sahifadagi kontentning ikkala yo‘nalishdagi tartibi. (Flet) page.run_task(handler, *args) Async funksiya yoki kod qismini fon vazifasida bajarish imkoniyati. (Python in Plain English) page.run_thread(handler, *args) Sync vazifani alohida threadda ishga tushirish. (Python in Plain English)

5. Eventlar va callback’lar

Flet ilovalarida foydalanuvchi bilan interaktivlik uchun callback’lar ishlatiladi:

Xususiyat / metod Tavsifi on_click, on_change, on_submit va hokazo Kontrollerga tegishli hodisalar — tugma bosilganda, qiymat o‘zgarganda va boshqalar. Callback funksiyalar odatda event obyekti (e) oladi. (Flet) e.control, e.data, e.page, e.name Event objekti orqali ushbu ma’lumotlarga kirish; masalan, qaysi kontrol bosilgan, qo‘shimcha ma’lumot, sahifa va event nomi. (Stack Overflow)

6. Sinxron / asinxron kod

Flet 0.21 versiyasidan boshlab asinxronlik va sinxron kodni aralashtirish imkoniyati yaxshilandi. (Python in Plain English)

  • on_click kabi event handler’lar sinxron yoki asinxron bo‘lishi mumkin.
  • page.run_task(...) yordamida async funksiyalar chaqirilishi mumkin.
  • page.run_thread(...) yordamida sync vazifalar alohida thread’da bajarilishi mumkin. (Python in Plain English)

7. Hayot sikli va adaptive / platformga moslik

  • Ilovaning turli holatlari (masalan, ko‘rinishi, yashiringanligi / tiklanishi) uchun on_app_lifecycle_state_change kabi eventlar bor. (Python in Plain English)
  • Kontrollerlarning adaptive xususiyati: agar bir nazarda material yoki Cupertino (iOS) ko‘rinishi kerak bo‘lsa — platformaga qarab mos ko‘rinishni tanlash. (Python in Plain English)

Agar xohlasang, Flet’ning eng muhim metodlari va kontrollerlarini ro‘yxatini kod misollari bilan tayyorlab bera olaman (o‘zbek tilida). Hohlasang shuni qilaymi?

Zo‘r! 👌 Endi Flet kutubxonasining asosiy kontrollerlarini (UI elementlari) jadval va kod misollari bilan ko‘rib chiqamiz.

📌 Flet asosiy kontrollerlari

1. Matn va yozuvlar

Kontrol Tavsifi Misol Text Oddiy matn chiqaradi ft.Text("Salom!") TextField Matn kiritish maydoni ft.TextField(label="Ismingizni yozing")

👉 Kod:

page.add(
    ft.Text("Salom, dunyo!"),
    ft.TextField(label="Ismingizni yozing")
)

2. Tugmalar

Kontrol Tavsifi Misol ElevatedButton Ko‘tarilgan tugma ft.ElevatedButton("OK") OutlinedButton Chiziqli tugma ft.OutlinedButton("Bekor qilish") FilledButton To‘ldirilgan tugma ft.FilledButton("Yuborish") IconButton Faqat ikonka tugma ft.IconButton(icon=ft.icons.SEARCH)

👉 Kod:

def tugma_bosildi(e):
    page.add(ft.Text("Tugma bosildi!"))

page.add(
    ft.ElevatedButton("Bos", on_click=tugma_bosildi),
    ft.IconButton(icon=ft.icons.FAVORITE, on_click=tugma_bosildi)
)

3. Tanlash elementlari

Kontrol Tavsifi Misol Checkbox Belgilash maydoni ft.Checkbox(label="Roziman") Switch On/Off tugma ft.Switch(label="Yoqish/O‘chirish") Radio Variantlardan bittasini tanlash ft.Radio(value="a", label="Variant A") Dropdown Ro‘yxatdan tanlash ft.Dropdown(options=[ft.dropdown.Option("A"), ft.dropdown.Option("B")])

👉 Kod:

page.add(
    ft.Checkbox(label="Roziman"),
    ft.Switch(label="Yoqish"),
    ft.Dropdown(
        options=[
            ft.dropdown.Option("A"),
            ft.dropdown.Option("B")
        ]
    )
)

4. Tartib (Layout)

Kontrol Tavsifi Misol Row Yonma-yon joylashtirish ft.Row([ft.Text("Chap"), ft.Text("O‘ng")]) Column Pastma-past joylashtirish ft.Column([ft.Text("Yuqori"), ft.Text("Past")]) Stack Ustma-ust joylashtirish ft.Stack([...]) Container Bir elementni o‘rash, fon va margin berish ft.Container(ft.Text("Ichkarida"), bgcolor="blue")

👉 Kod:

page.add(
    ft.Row([
        ft.Text("Chap"),
        ft.Text("O‘ng")
    ]),
    ft.Container(
        content=ft.Text("Ichkarida"),
        bgcolor="yellow",
        padding=10
    )
)

5. Navigatsiya va tuzilma

Kontrol Tavsifi Misol AppBar Yuqori panel (title va ikonalar bilan) ft.AppBar(title=ft.Text("Mening ilovam")) Tabs Sahifa ichida tab navigatsiyasi ft.Tabs(tabs=[ft.Tab(text="1"), ft.Tab(text="2")]) Drawer Yon menyu (slide menu) ft.NavigationDrawer(...)

👉 Kod:

page.appbar = ft.AppBar(title=ft.Text("Mening ilovam"))
page.add(
    ft.Tabs(
        selected_index=0,
        tabs=[ft.Tab(text="Tab 1"), ft.Tab(text="Tab 2")]
    )
)

6. Ma’lumot ko‘rsatish

Kontrol Tavsifi Misol DataTable Jadval ko‘rinishida ma’lumot ft.DataTable(...) ListView Ro‘yxat ko‘rinishi ft.ListView(...) Image Rasm chiqarish ft.Image(src="https://picsum.photos/200")

👉 Kod:

page.add(
    ft.Image(src="https://picsum.photos/200"),
    ft.ListView(
        controls=[ft.Text(f"Element {i}") for i in range(5)]
    )
)

✅ Demak, Flet kutubxonasida asosiy kontrollerlar — Matn, Tugmalar, Tanlash elementlari, Layout, Navigatsiya va Ma’lumot ko‘rsatish bloklariga bo‘linadi.

Xohlaysanmi, men bu kontrollerlarni jadval shaklida to‘liq ro‘yxat qilib, yoniga asosiy xususiyatlari (properties) va eventlari bilan tayyorlab beray?

https://chatgpt.com/share/68c3e7c8-7a98-8008-90bc-810b307e2b6e

SNRG py | Nematjon Shahobiddinov
September 12, 09:29
0 views
0 reactions
0 replies
0 reposts