Python Flet Modülü

Kruvazör' Alıntı:

Eline sağlık trojan

Genişletmek için tıkla ...

Adanalıtrojan' Alıntı:

Merhaba THT Ailesi,

Uzun bir aranın ardından tekrar sizlerle buluşmanın sevincini yaşıyorum. Okul sınavlarının yoğun temposu nedeniyle buraya vakit ayıramamıştım, ancak şimdi sizlere yeni bir konuyla gelmiş bulunuyorum.

Konuya giriş yapmadan önce, yazımı okumak için ihtiyacınız olan bazı ön bilgileri paylaşmak isterim:
Python'a orta seviyede hakim olmalısınız.
Class yapısının temellerini bilmelisiniz.
Biraz sabırlı olmanız gerekebilir.

Şimdi lafı uzatmadan konumuza geçelim. Bu yazıda sizlere "Python Flet Modülü"nü tanıtacağım.

Flet Modülü'nü kullanabilmek için öncelikle aşağıdaki komutu kullanarak pakedi yüklemeniz gerekiyor:

PHP:

pip install flet

Flet Modülü:
Pythonda Gerçek zamanlı Web, Masaüstü ve Uygulamalar oluşturabileceğiniz Bir Framework'tür.
Aynı zamanda Flutter Öğrenmenize gerek kalmadan çok rahat bir şekilde öğrenbilirsiniz.

Sizlere Bugün bu Modülü Bir uygulama ile anlatacam.
En basitinden Hesap Makinesi Yapalım, Evet Yanlış Duymadınız Hesap Makinesi.
----------------------------------------------------------------------------------------------------------------------
Kodumuzu Yazmaya Başlayalım.

Python:

import flet as ft
global_data = ''

İlk Önce Modülümüzü İmport Edip Bir global Değişken Atıyoruz.

Python:

def main(page:ft.Page):
    global global_data
    page.title = "Hesap Makinesi"
    page.vertical_alignment = ft.MainAxisAlignment.END
    page.horizontal_alignment = ft.MainAxisAlignment.CENTER
    page.window_width = 340
    page.window_height = 700
    page.window_resizable = False
    result = ft.Text(value="", color=ft.colors.INDIGO_400, size=40)
    global_data = result.value

Şimdi Kodumuzu Açıklayalım.
def main(page: ft.Page):
main adında bir fonksiyon tanımlanıyor, bu fonksiyon bir sayfa (page) alır.
page: ft.Page ifadesi, ft modülünden Page sınıfını kullanacağımızı belirtir.
global global_data
global_data adında bir global değişken tanımlanıyor. Bu değişkenin kullanılabilmesi için global anahtar kelimesi kullanılıyor.
page.title = "Hesap Makinesi"
Sayfanın başlığı "Hesap Makinesi" olarak ayarlanıyor.
page.vertical_alignment = ft.MainAxisAlignment.END
Sayfanın dikey hizalaması (vertical alignment) END olarak ayarlanıyor. Yani, içerik sayfanın en altına hizalanacak.
page.horizontal_alignment = ft.MainAxisAlignment.CENTER
Sayfanın yatay hizalaması (horizontal alignment) CENTER olarak ayarlanıyor. Yani, içerik sayfanın ortasına hizalanacak.
page.window_width = 340
Sayfa genişliği 340 piksel olarak ayarlanıyor.
page.window_height = 700
Sayfa yüksekliği 700 piksel olarak ayarlanıyor.
page.window_resizable = False
Sayfanın yeniden boyutlandırılabilirliği devre dışı bırakılıyor. Yani, kullanıcı sayfanın boyutunu değiştiremez.
result = ft.Text(value="", color=ft.colors.INDIGO_400, size=40)
result adında bir metin nesnesi oluşturuluyor. Bu metin nesnesinin başlangıç değeri boş (value=""), rengi indigo mavisi (color=ft.colors.INDIGO_400), boyutu ise 40 piksel (size=40) olarak ayarlanıyor.
global_data = result.value
global_data adlı global değişken, oluşturulan metin nesnesinin değeri ile aynı oluyor. Yani, başlangıçta bu değer boş olacaktır.

Şimdi İse Hesaplama Fonksiyonlarımızı Yazalım.

Python:

 def olay(e):
        global global_data
        data = e.control.data
        if data in "1":
            if len(global_data) < 12:
                global_data += "1"
                result.value += "1"
            else:
                pass

        if data in "2":
            if len(global_data) < 12:
                global_data += "2"
                result.value += "2"
            else:
                pass
        page.update()


        if data in "3":
            if len(global_data) < 12:
                global_data += "3"
                result.value += "3"
            else:
                pass
        page.update()


        if data in "4":
            if len(global_data) < 12:
                global_data += "4"
                result.value += "4"
            else:
                pass
        page.update()


        if data in "5":
            if len(global_data) < 12:
                global_data += "5"
                result.value += "5"
            else:
                pass
        page.update()


        if data in "6":
            if len(global_data) < 12:
                global_data += "6"
                result.value += "6"
            else:
                pass
        page.update()


        if data in "7":
            if len(global_data) < 12:
                global_data += "7"
                result.value += "7"
            else:
                pass
        page.update()


        if data in "8":
            if len(global_data) < 12:
                global_data += "8"
                result.value += "8"
            else:
                pass
        page.update()


        if data in "9":
            if len(global_data) < 12:
                global_data += "9"
                result.value += "9"
            else:
                pass
        page.update()


        if data in "0":
            if len(global_data) < 12:
                global_data += "0"
                result.value += "0"
            else:
                pass
        page.update()


        if data in "00":
            if len(global_data) < 12:
                global_data += "00"
                result.value += "00"
            else:
                pass
        page.update()

    def nokta(e):
        data = e.control.data
        if data in ".":
            pass
        else:
            if len(data) < 12:
                result.value += "."
                page.update()


    def olayC(e):
        global data
        global global_data
        data = e.control.data
        result.value = ""
        global_data = ""
        page.update()

    def d(e):
        result.value = str(result.value[:-1])
        page.update()

Kodumuzu Açıklayalım.
olay(e) fonksiyonu: Sayı tuşlarına basıldığında çalışır. Her tuşa basıldığında, global veriyi ve görüntülenen değeri günceller. Ancak, karakter sayısı 12'yi geçerse güncelleme yapmaz.
nokta(e) fonksiyonu: Nokta tuşuna basıldığında çalışır. Ancak, bir sayıda birden fazla nokta kullanılmasını engeller.
olayC(e) fonksiyonu: "C" tuşuna basıldığında çalışır. Görüntülenen değeri ve global veriyi sıfırlar.
d(e) fonksiyonu: Silme tuşuna basıldığında çalışır. Son karakteri görüntülenen değerden siler.

Şimdi Sıra Menü Oluşturma ve Appbar Yapımı.
Kodumuz;

Python:

 def calc(e):
        global global_data
        data = e.control.data
        result.value = global_data + data
        if data == '=':
            if global_data == "":
                result.value = "Değer Giriniz"
            else:
                try:
                    if global_data.startswith("+") and global_data.startswith("-") and global_data.startswith("*") and global_data.startswith("/") and global_data.startswith("."):
                        global_data = "Düzgün şeçim gir"
                        result.value = eval(global_data)
                    else:
                        result.value = eval(global_data)
                except SyntaxError:
                    result.value = "Error"
            global_data = ''
        else:
            global_data += data
        page.update()

    def theme_changed(e):
        page.theme_mode = (
            ft.ThemeMode.DARK
            if page.theme_mode == ft.ThemeMode.LIGHT
            else ft.ThemeMode.LIGHT
        )
        ft.label = (
            "Light theme" if page.theme_mode == ft.ThemeMode.LIGHT else "Dark theme"
        )
        page.update()

    page.theme_mode = ft.ThemeMode.LIGHT

    page.appbar = ft.AppBar(
        leading_width=40,
        title=ft.Text("Calc"),
        center_title=False,
        bgcolor=ft.colors.SURFACE_VARIANT,
        actions=[
            ft.PopupMenuButton(
                ft.Switch(on_change=theme_changed)
            ),
        ],
    )
    page.update()

Hadi Yorumlayalım.
calc(e) fonksiyonu:
Bu fonksiyon, kullanıcının hesap makinesi arayüzündeki tuşlara tıkladığında çağrılır.
e parametresi, etkileşim olayının bilgisini içerir.
global_data değişkeni, kullanıcının girdiği sayısal değeri temsil eder.
data değişkeni, kullanıcının tıkladığı tuşun değerini içerir.
Eğer tıklanan tuş "=" ise, hesaplamayı yapar. Eğer global veri boşsa "Değer Giriniz" mesajını görüntüler. Aksi takdirde, girdiği ifadeyi değerlendirir. Ancak, girişin başındaki işleçler (örneğin, +, -, *, /) hatalıysa, "Düzgün seçim gir" mesajını gösterir. SyntaxError oluşursa "Error" mesajını gösterir ve global veriyi sıfırlar.
"=" tuşuna basılmadıysa, global veriyi ve tıklanan tuşun değerini birleştirir ve sayfa güncellenir.
theme_changed(e) fonksiyonu:
Bu fonksiyon, temayı değiştirmek için kullanılır. Sayfa teması, ışık (LIGHT) ve karanlık (DARK) modları arasında geçiş yapar.
e parametresi, tema değişikliği olayının bilgisini içerir.
AppBar (üst çubuk) üzerinde bir Switch öğesi bulunur ve bu öğeye tıklanıldığında tema değişim fonksiyonu çalışır.
Sayfa Ayarları:
page.theme_mode = ft.ThemeMode.LIGHT: Sayfanın başlangıç teması ışık modu olarak belirlenir.
page.appbar: Sayfanın üst çubuğunu oluşturur. Başlık, tema değiştirme düğmesi ve diğer ayarlar bu çubukta yer alır.
page.update(): Sayfa görünümünü günceller.

Son olarak Tuşları Yerleştirmek Kaldı.
Kodumuz.

Python:

page.add(
        ft.Row(controls=[result], alignment=ft.MainAxisAlignment.END),
        ft.Row(
            spacing=10,
            controls=[
                ft.ElevatedButton("C", data="C",on_click=olayC, style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30)),
                ft.ElevatedButton("%", data="%",on_click=calc,style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30)),
                ft.ElevatedButton("d", data="d",on_click=d, style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30)),
                ft.ElevatedButton("/", data="/",on_click=calc,style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30))
            ]
        ),
        ft.Row(
            controls=[
                ft.ElevatedButton("7", data="7", on_click=olay,style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30)),
                ft.ElevatedButton("8", data="8", on_click=olay,style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30)),
                ft.ElevatedButton("9", data="9",on_click=olay, style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30)),
                ft.ElevatedButton("x", data="*",on_click=calc,style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30)),
            ],
        ),
        ft.Row(
            controls=[
                ft.ElevatedButton("4", data="4", on_click=olay,style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30)),
                ft.ElevatedButton("5", data="5", on_click=olay,style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30)),
                ft.ElevatedButton("6", data="6",on_click=olay, style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30)),
                ft.ElevatedButton("-", data="-",on_click=calc, style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30)),
            ]
        ),
        ft.Row(
            controls=[
                ft.ElevatedButton("1", data="1",on_click=olay, style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30)),
                ft.ElevatedButton("2", data="2",on_click=olay, style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30)),
                ft.ElevatedButton("3", data="3",on_click=olay, style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30)),
                ft.ElevatedButton("+", data="+",on_click=calc, style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30)),
            ]
        ),
        ft.Row(
            controls=[
                ft.ElevatedButton("00", data="00",on_click=olay, style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=28)),
                ft.ElevatedButton("0", data="0",on_click=olay, style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30)),
                ft.ElevatedButton(".", data=".", on_click=nokta,style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30)),
                ft.ElevatedButton("=", data="=",on_click=calc, style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30)),
            ]
        )
    )

    page.update()

ft.app(target=main)

Yorumlayalım.
page.add(): Diyoruz İlk Öncelikle bu bizim sayfamıza ekleyecek
Bu satır, hesap makinesinin üst kısmında yer alan ve hesaplamaların sonucunu gösteren bir metin alanını içerir.
controls parametresi, bu satıra eklenen kontrol elemanlarını belirtir. Burada sadece result adlı metin alanı kontrolü bulunmaktadır.
alignment parametresi, bu satırdaki elemanların hizalanma stilini belirtir. ft.MainAxisAlignment.END, elemanları sağa hizalar.

Python:

ft.Row(
    spacing=10,
    controls=[
        ft.ElevatedButton("C", data="C", on_click=olayC, style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30)),
        ft.ElevatedButton("%", data="%", on_click=calc, style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30)),
        ft.ElevatedButton("d", data="d", on_click=d, style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30)),
        ft.ElevatedButton("/", data="/", on_click=calc, style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30))
    ]
),

Bu satır, hesap makinesinin temel düğmelerini içerir. Her bir düğme, belirli bir işlevi gerçekleştiren veya belirli bir sayıyı temsil eden bir kontrol elemanıdır.
spacing parametresi, düğmeler arasındaki boşluğu belirler.
controls parametresi, bu satıra eklenen kontrol elemanlarını belirtir. Her bir düğme, ft.ElevatedButton sınıfı ile oluşturulur ve özel stil özellikleri (örneğin, şekil, yuvarlaklık, iç boşluk) belirlenir.
data parametresi, düğmeye basıldığında alınacak olan veriyi belirtir. Bu veri, ilgili olay fonksiyonuna iletilir.
on_click parametresi, düğmeye tıklandığında çalışacak olan olay fonksiyonunu belirtir.
ve son olarak Uygulamının Başlama yeri belli edilir target ile.

Okuduğunuz için Teşekkürler.
Github:GitHub - trojanx6/calculator-gui: gui

​

Genişletmek için tıkla ...

invisible blood' Alıntı:

Elinize sağlık hocam

Genişletmek için tıkla ...

LordSUCCESS' Alıntı:

Eline sağlık

Genişletmek için tıkla ...