Flet : Getting started : Flet コントロール

作成 : クラスキャット セールスインフォメーション
作成日時 : 05/12/2024

* 本ページは、flet.dev の以下のページを独自に翻訳して、適宜、補足説明したものです ：

• Getting started : Flet controls

* サンプルコードの動作確認はしておりますが、必要な場合には適宜、追加改変しています。
* ご自由にリンクを張って頂いてかまいませんが、sales-info@classcat.com までご一報いただけると嬉しいです。

 

 

 

Flet : Getting started : Flet コントロール

ユーザインターフェイスは コントロール (aka ウィジェット) でできています。コントロールがユーザに可視化されるには、それらは Page または他のコントロールの内側に追加される必要があります。Page は最も上位のコントロールです。コントロールを相互にネストすると、Page をルートとするツリーとして表現できます。

コントロールは単なる通常の Python クラスです。プロパティにマッチするパラメータを使用してコンストラクタによりコントロールのインスタンスを作成します、例えば :

t = ft.Text(value="Hello, world!", color="green")

ページ上にコントロールを表示するには、それをページのコントロール・リストに追加して、ページの変更をブラウザやデスクトップ・クライアントに送信するために page.update() を呼び出します :

import flet as ft

def main(page: ft.Page):
    t = ft.Text(value="Hello, world!", color="green")
    page.controls.append(t)
    page.update()

ft.app(target=main)

 
コントロール・プロパティを変更することができます、そして UI は次の page.update() で更新されます :

t = ft.Text()
page.add(t) # it's a shortcut for page.controls.append(t) and then page.update()

for i in range(10):
    t.value = f"Step {i}"
    page.update()
    time.sleep(1)

幾つかのコントロールは (Page のような) 「コンテナ」コントロールです、これは他のコントロールを含むことができます。例えば、Row コントロールは他のコントールを一つずつ一行に配置することを可能にします :

page.add(
    ft.Row(controls=[
        ft.Text("A"),
        ft.Text("B"),
        ft.Text("C")
    ])
)

あるいは、TextField とその隣りの ElevatedButton :

page.add(
    ft.Row(controls=[
        ft.TextField(label="Your name"),
        ft.ElevatedButton(text="Say my name!")
    ])
)

page.update() は十分にスマートで最後の呼び出しから成された変更のみを送信しますので、ページに 2, 3 の新しいコントロールを追加し、それらの幾つかを削除し、他のコントロールのプロパティを変更し、それからバッチ更新を行うために page.update() を呼び出すことができます、例えば :

for i in range(10):
    page.controls.append(ft.Text(f"Line {i}"))
    if i > 4:
        page.controls.pop(0)
    page.update()
    time.sleep(0.3)

ボタンのような一部のコントロールはユーザ入力に反応する (react) イベントハンドラを持ちます、例えば ElevatedButton.on_click です :

def button_clicked(e):
    page.add(ft.Text("Clicked!"))

page.add(ft.ElevatedButton(text="Click me", on_click=button_clicked))

そして簡単な To-Do のためのより高度なサンプル :

import flet as ft

def main(page):
    def add_clicked(e):
        page.add(ft.Checkbox(label=new_task.value))
        new_task.value = ""
        new_task.focus()
        new_task.update()

    new_task = ft.TextField(hint_text="Whats needs to be done?", width=300)
    page.add(ft.Row([new_task, ft.ElevatedButton("Add", on_click=add_clicked)]))

ft.app(target=main)

 
Info : Flet implements imperative UI model where you “manually” build application UI with stateful controls and then mutate it by updating control properties. Flutter implements declarative model where UI is automatically re-built on application data changes. Managing application state in modern frontend applications is inherently complex task and Flet’s “old-school” approach could be more attractive to programmers without frontend experience.

 

visible プロパティ

すべてのコントロールは visible プロパティを持ちます、これはデフォルトでは true です – コントロールはページ上にレンダリングされます。visible を false に設定すると、コントロール (そしてもしあればそのチルドレンすべて) がページ・キャンバス上でレンダリングされることが完全になくなります。Hidden コントロールは、キーボードやマウスによりフォーカスも選択もできなくなり、それらはどのようなイベントも発生しません。

 

disabled プロパティ

すべてのコントロールは disabled プロパティを持ちます、これはデフォルトで false です – コントロールとそのすべてのチルドレンは有効です。disabled プロパティは殆どの場合 TextField, Dropdown, Checkbox, ボタンのようなデータ入力コントロールで使用されます。但し、disabled は親コントロールに設定できてその値はすべての子に再起的に伝播されます。

例えば、複数の入力コントロールを含むフォームがある場合、各コントロールに個別に disabled プロパティを設定できます :

first_name = ft.TextField()
last_name = ft.TextField()
first_name.disabled = True
last_name.disabled = True
page.add(first_name, last_name)

あるいはフォームコントロールをコンテナ e.g. Column 内に配置できて、そしてカラムを disabled に設定できます :

first_name = ft.TextField()
last_name = ft.TextField()
c = ft.Column(controls=[
    first_name,
    last_name
])
c.disabled = True
page.add(c)

 

ボタン

ボタンは、押されたときにクリックイベントを生成する最も重要な入力コントロールです :

btn = ft.ElevatedButton("Click me!")
page.add(btn)

web ページ上でコントロールにより生成されるすべてのイベントはスクリプトに連続的に送り返されます、ではボタンのクリックにどのように応答するのでしょう？

 

イベントハンドラ

“Counter” app のイベントを持つボタン :

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(target=main)

 

テキストボックス

Flet はフォームを構築するための多くの コントロール を提供しています : TextField, Checkbox, Dropdown, ElevatedButton。

ユーザに名前を尋ねましょう :

import flet as ft

def main(page):
    def btn_click(e):
        if not txt_name.value:
            txt_name.error_text = "Please enter your name"
            page.update()
        else:
            name = txt_name.value
            page.clean()
            page.add(ft.Text(f"Hello, {name}!"))

    txt_name = ft.TextField(label="Your name")

    page.add(txt_name, ft.ElevatedButton("Say hello!", on_click=btn_click))

ft.app(target=main)

 

チェックボックス

Checkbox コントロールは簡単に使える、様々なプロパティやイベント・エミッターを提供しています。

Let’s create a one checkbox ToDo:

import flet as ft


def main(page):
    def checkbox_changed(e):
        output_text.value = (
            f"You have learned how to ski :  {todo_check.value}."
        )
        page.update()

    output_text = ft.Text()
    todo_check = ft.Checkbox(label="ToDo: Learn how to use ski", value=False, on_change=checkbox_changed)
    page.add(todo_check, output_text)

ft.app(target=main)

 

ドロップダウン

import flet as ft


def main(page: ft.Page):
    def button_clicked(e):
        output_text.value = f"Dropdown value is:  {color_dropdown.value}"
        page.update()

    output_text = ft.Text()
    submit_btn = ft.ElevatedButton(text="Submit", on_click=button_clicked)
    color_dropdown = ft.Dropdown(
        width=100,
        options=[
            ft.dropdown.Option("Red"),
            ft.dropdown.Option("Green"),
            ft.dropdown.Option("Blue"),
        ],
    )
    page.add(color_dropdown, submit_btn, output_text)

ft.app(target=main)

以上