fletによるGUIアプリの作成【簡単】

１．fletでGUIアプリケーションの作成

デスクトップアプリのようなものを作成するのがゴールになります。

わりと簡単にできたので、わかりやすく説明していきたいと思います。

２． fletが良さそう

tkinterと比較するとコード量が少なく、記述がシンプルになるというメリットがあるようです。外観も洗練されていて、オシャレな感じになっていますね。

３．バッチファイルの作成

バッチファイルで仮想環境を作っていきます。

python_flet.bat

mkdir python_flet
cd python_flet
python -m venv env

cd env
Scripts\python.exe -m pip install --upgrade pip

Scripts\pip install flet

４．画面の作成

とりあえずこれだけで、起動・終了ができます。エラーが起きていないことと、タイトルが表示されていることを確認します。

外部ライブラリfletを読み込んでいます。

読み込んだfletをflet.app(target=main)として呼び出ます。このとき、main関数側にpageオブジェクトが渡されます。

呼び出されたmain関数はfletからpageオブジェクトを受けとり、関数内でその記述内容を変更していきます。例えば、page.title = "はじめてのアプリ"で、タイトルのテキストが変更されます。

要するに、外部ライブラリを読み込んで新たなプログラムとして定義しているということです。

example01.py

# 外部ライブラリfletの読み込み
import flet

# ５．main関数の定義
def main(page):
    # アプリタイトルを表示する
    page.title = 'はじめてのアプリ'

    # ページ(画面)を作成
    page.add()

# ６．外部ライブラリの呼び出し、定義済みのmain関数を渡す
flet.app(target=main)

(1) ボタンの追加

ボタンにも色々あるのですが、現在はflet.ElevatedButtonが推奨されているようです。

enter_button = flet.ElevatedButton("決定") とすることで、「enter_button」という変数としてボタンを定義します。ボタンを作るためのもともとのデータはライブラリの中にあるので、「flet.ElevatedButton("決定")」として呼び出しています。

これで「flet.ElevatedButton」が「enter_button」という名前として使えるようになりました。

page.add()で追加したボタンを画面上に追加（表示）します。

また、プログラムは上から順番に実行されるので、「enter_button」のように先に定義してを使います。

example02.py

import flet

def main(page):
    page.title = 'はじめてのアプリ'

    # 決定ボタンの初期化
    enter_button = flet.ElevatedButton("決定")

    # ページにボタンを追加
    page.add(
        enter_button
    )

flet.app(target=main)

(2) テキストとテキストフィールドを追加

ひとまず、同じように色々な部品を配置していきます。

hello_text = flet.Text("こんにちは")　のように、flet.Textはテキストを表示します。
表示のみで編集することはできませんが、プログラムで表示を変更することはできます。

text_field = flet.TextField(label="名前を入力",value="デフォルトの値")のように、flet.TextFieldはユーザーが何かしらの入力ができるフィールドになります。

また、label=""の部分にこのテキストフィールド自体についての説明や、デフォルトの値を設定することができます。

page.add()内に、カンマ区切りで記述していきます。

example03.py

import flet

def main(page):
    page.title = 'Flet App'

    enter_button = flet.ElevatedButton("決定")

    # テキストの初期化
    hello_text = flet.Text("こんにちは")

    # テキストフィールドの初期化
    text_field = flet.TextField(label="名前を入力",value="デフォルトの値")

    # ページにボタンとテキストフィールドを追加
    page.add(
        hello_text,
        text_field,
        enter_button
    )

flet.app(target=main)

ボタンクリック時の動作を追加

ここから実際に処理を伴うプログラムを記述していきます。

内容としては以下のような感じになります。

ユーザーがテキストフィールドに名前を入力し、決定ボタンを押すと、「◯◯さん、こんにちは」というテキストを返し、hello_textのテキストを書き換えます。

書き換えただけでは、画面は変わらないのでpage.update()を行うことで画面を更新します。

画面に表示された名前が任意の名前に変更されていることを確認します。

example04.py

import flet

def main(page):
    page.title = 'Flet App'

    # ボタンクリック時の動作を記述
    def enter_click(e):
        hello_text.value = text_field.value + "さん、こんにちは。"
        page.update()

    # ボタンクリック時に行う処理を指定
    enter_button = flet.ElevatedButton("決定", on_click=enter_click)

    hello_text = flet.Text("こんにちは")

    text_field = flet.TextField(label="名前を入力",value="デフォルトの値")

    page.add(
        hello_text,
        text_field,
        enter_button
    )

flet.app(target=main)

まとめ

何かの足しになれば幸いです。