python flet でconter を実行してみる

公式には、以下のようにあるので、

flet create --template counter <project-name>

適当に、自分の環境で、以下のようにしてみた（user-nameは、ご自身の環境のものになります）

C:\Users\user-name\first-flet-app> flet create --template counter counter

すると、C:\Users\user-name\first-flet-app　にcounter フォルダーができているので、その中のmain.pyを実行すれば、簡単なカウンターが実行できる

import flet as ft

def main(page: ft.Page):
page.title = “Flet counter example”
page.vertical_alignment = ft.MainAxisAlignment.CENTER

txt_number = ft.TextField(value="0", text_align="right", width=100)

def minus_click(e):
    txt_number.value = str(int(txt_number.value) - 1)
    page.update()

def plus_click(e):
    txt_number.value = str(int(txt_number.value) + 1)
    page.update()

page.add(
    ft.Row(
        [
            ft.IconButton(ft.icons.REMOVE, on_click=minus_click),
            txt_number,
            ft.IconButton(ft.icons.ADD, on_click=plus_click),
        ],
        alignment=ft.MainAxisAlignment.CENTER,
    )
)
ft.app(main)

このPythonコードは、Fletというライブラリを使ってシンプルなカウンターアプリケーションを作成しています。以下に、コードの各部分とその役割をわかりやすく説明します。

1. ライブラリのインポート

import flet as ft

fletライブラリをftという短縮名でインポートしています。Fletは、PythonでWebアプリケーションやデスクトップアプリケーションを簡単に作成できるフレームワークです。

2. メイン関数の定義

def main(page: ft.Page):
    ...

mainという関数を定義しています。この関数は、Fletアプリケーションのメインページを設定し、ユーザーインターフェース（UI）を構築します。
page: ft.Pageは、この関数がFletのページオブジェクトを引数として受け取ることを示しています。

3. ページの設定

    page.title = "Flet counter example"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

ページのタイトルを「Flet counter example」に設定しています。これは、ブラウザのタブやウィンドウのタイトルバーに表示されます。
ページ内のコンテンツを垂直方向の中央に配置するように設定しています。

4. テキストフィールドの作成

    txt_number = ft.TextField(value="0", text_align="right", width=100)

txt_numberというテキストフィールドを作成しています。このフィールドはカウンターの現在の値を表示します。
初期値は”0″で、テキストは右揃え、幅は100ピクセルに設定されています。

5. ボタンのクリックイベントハンドラーの定義

    def minus_click(e):
        txt_number.value = str(int(txt_number.value) - 1)
        page.update()

    def plus_click(e):
        txt_number.value = str(int(txt_number.value) + 1)
        page.update()

minus_click: マイナスボタンがクリックされたときに呼び出されます。現在の値を1減らし、テキストフィールドを更新します。
plus_click: プラスボタンがクリックされたときに呼び出されます。現在の値を1増やし、テキストフィールドを更新します。
page.update()は、ページ全体を再描画して変更を反映させるために使用されます。

6. UIコンポーネントの配置

    page.add(
        ft.Row(
            [
                ft.IconButton(ft.icons.REMOVE, on_click=minus_click),
                txt_number,
                ft.IconButton(ft.icons.ADD, on_click=plus_click),
            ],
            alignment=ft.MainAxisAlignment.CENTER,
        )
    )

ページに一つの**Row（行）**を追加しています。この行には3つの要素が含まれています：
1. マイナスボタン (ft.IconButton(ft.icons.REMOVE, on_click=minus_click)): アイコンとしてマイナス記号を表示し、クリック時にminus_click関数を呼び出します。
2. テキストフィールド (txt_number): 現在のカウント値を表示します。
3. プラスボタン (ft.IconButton(ft.icons.ADD, on_click=plus_click)): アイコンとしてプラス記号を表示し、クリック時にplus_click関数を呼び出します。
alignment=ft.MainAxisAlignment.CENTERにより、これらの要素が水平方向に中央揃えされます。