辞書で定義したデータをもとに flet の ElevatedButton を作成するコード

Python flet

辞書で定義したデータをもとに、flet の ElevatedButton を作成するコードのサンプル

辞書のキーを ElevatedButton のボタンに表示される文字列にしている。 辞書の値は、ElevatedButton の data として定義しておき、event 用の関数で e.control.data と形で受け取っている。

import flet as ft

def main(page: ft.Page):
    def button_click(e):
        column.controls.clear()
        column.controls.append(ft.Text("data:" + e.control.data))
        page.update()

    # 定数設定
    BUTTON_COLOR = ft.colors.TEAL_ACCENT_100
    BGCOLOR = ft.colors.TEAL_500

    # page setting
    page.title = "button example"
    page.window.width = 220
    page.window.height = 220
    page.window.title_bar_hidden = False
    page.window.frameless = False
    page.scroll = ft.ScrollMode.ALWAYS
    page.bgcolor = BGCOLOR

    # ボタンに格納するデータ
    button_data = {
                "minamotono": "yoritomo",
                "minamotono": "yoshitune",
                "坂本      ": "ryoma",
                "西郷      ": "takamori",
                "桂        ": "小五郎",
                "tokugawa": "ieyasu",
                "sugawarano": "michizane",
                "mouri": "motonari",
                "oda": "nobunaga",
               }

    # ボタンデータの読み込みとボタン情報の生成
    column_items = []
    for key in button_data:
        column_items.append(
            ft.Row([
                ft.ElevatedButton(
                    key, data=button_data[key],
                    height=30,
                    width=150,
                    style=ft.ButtonStyle(
                        shape=ft.RoundedRectangleBorder(radius=10)
                    ),
                    bgcolor=BUTTON_COLOR,
                    on_click=button_click)
            ])
        )

    # ボタンをコンテナに登録
    container = ft.Container(
        content=ft.Column(column_items),
        bgcolor=BGCOLOR,
        padding=10,
        adaptive=True
    )

    # これはなくてもよい。ボタンを押した時の検証用に作成
    column = ft.Column()

    # コントロールをページ追加
    page.add(
        ft.Row([container]),
        ft.Row([column])
    )


# ft 処理開始
ft.app(target=main)