仕事でスクリプトを作成した際に、一緒にPythonのFletライブラリでスクリプト実行用の簡単なUIを作ることが多々あります。
以下に、FletでのUI作成にて使用頻度が高いなぁって思った クラス・インスタンス化の例・プロパティ・メソッド をまとめましたので、よかったらご参照ください。
細かい説明（UIの構築、処理部との結合）等はまた別の記事として投稿します。
かといってリストだけ書いてバイバイも味気ないので、Fletの初期設定用レシピコード（Fletを使用する際のおまじない）を最後に記載します。
■ クラス・インスタンス化の一例
| クラス | 役割 | インスタンス化の一例 |
|---|---|---|
| Page | ページ全体（必須） | main(page: ft.Page) |
| Container | ボックス要素 | container = ft.Container(content=ft.Image("cute_cat.png")) |
| Text | テキストの表示 | text = ft.Text("Bow wow Tool") |
| ElevatedButton | 立体的なボタンの作成 | button = ft.ElevatedButton("Click", on_click=func) |
| Column | 縦並びに配列 | column = ft.Column([ft.Text("Item")]) |
| Row | 横並びに配列 | row = ft.Row([ft.Text("Left")]) |
| TextField | 入力欄の作成 | text_field = ft.TextField(label="What's your favorite song?") |
| Image | 画像の表示 | image = ft.Image(src="so_cute_dog.png") |
| FilePicker | ファイル選択 | file_picker = ft.FilePicker() |
| Checkbox | チェックボックス | checkbox = ft.Checkbox(label="Accept drinking party") |
| Switch | ON/OFFスイッチ | switch = ft.Switch(value=True) # valueにてデフォルト値の設定 |
| Dropdown | ドロップダウンメニュー | dropdown = ft.Dropdown(options=[ft.dropdown.Option("Beer"), # 要カンマ区切りft.dropdown.Option(“Highball“)]) |
■ プロパティの一例
| プロパティ | 説明 |
|---|---|
| content | Containerインスタンス内にて、複数のインスタンス・プロパティを保持する |
| src | 画像のURLまたはローカルパスを指定する |
| width | 表示の幅（ピクセル単位） |
| height | 表示の高さ（ピクセル単位） |
| fit | 画像の表示領域にフィットさせる（例: ft.ImageFit.CONTAIN, ft.ImageFit.COVER） |
| alignment | 配置を指定する（例: ft.alignment.center） |
| bgcolor | 背景色を設定する |
| padding | UI内側に余白を設定する（pixel単位） |
| scale | 画像の拡大・縮小率 |
| visible | 画像を表示・非表示にする（True / False） |
| on_click | クリック時のイベントハンドラーを指定（関数をコールする、ファイル選択ポップアップを出す等） |
| on_hover | ホバー時（マウスカーソルが指定領域に乗った時）のイベントハンドラーを指定（画像拡大する等） |
■ メソッドの一例
| メソッド | 説明 |
|---|---|
| update() | UIの変更を即時反映（必須） |
| add() | PageやColumnに要素を追加 （必須） |
| remove() | PageやColumnから要素を削除 |
| clean() | 指定した要素を削除 |
| insert() | 指定した位置に要素を挿入 |
| show() | 要素を表示（visible=Trueと同じ） |
| hide() | 要素を非表示（visible=Falseと同じ） |
| toggle() | visible(bool)を切り替える（表示・非表示をワンタップで切り替え） |
| open_dialog() | ダイアログを開く （ユーザーに処理を実行していいか確認を求めるときなど） |
| close_dialog() | 開いているダイアログを閉じる（ユーザーの操作が終わった後など） |
| launch_url() | Webページを開く（例：on_click=page.launch_url=”https://wancolab.com/breed/ ”) |
■ Fletの初期設定用レシピコード
python
import flet as ft
class UIName:
def __init__(self, page: ft.Page):
"""Args:
page (ft.Page): Fletのページオブジェクト（UIのルート要素）
JsonImgEditUIクラスのインスタンスの初期化
"""
self.page = page
#--- ここからUIの詳細な設定 ---#
self.page.width = 100
self.page.height = 100
self.example_text = ft.Text("Test")
self.page.add(
ft.Row(
self.example_text)
def main(page: ft.Page): # 実行
UIName(page)
if __name__ == "__main__":
ft.app(target=main)
■ 詳しくは公式ドキュメントで
クラスやメソッド、プロパティについてのより詳細な情報・使用法は公式ドキュメントをご参照ください。
https://flet.dev/docs/
おわり