Fletを触ってみる｜万年筆とわらばんし　ー想いとアイデアをつづるデジタルライフログ

まずはサンプルを真似してみる

Fletを使って人狼GM用アプリをWeb化するにあたり、前回はFletのインストールまで完了したので、まずはFletを触ってみます。

ネットで検索するとそれなりに紹介しているページが出てくるので、色んなページで紹介されている以下のソースをコピペして実行してみます。

import flet as ft

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

    # 値を動的にしたい部分のControlインスタンスを作成
    txt_number = ft.TextField(value="0", text_align=ft.TextAlign.RIGHT, width=100)

    # マイナスボタンクリック時の処理
    def minus_click(e):
        #Controlインスタンスのvalueプロパティに代入
        txt_number.value = str(int(txt_number.value) - 1) 
        #ページを更新。(txt_number.update()としても良い。updateは子要素に伝達する)
        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(target=main)

サンプルのままだと「ft.Icons」の部分が「ft.icons」になっていて動かなかったので、iを大文字に修正して実行成功。簡単ね。