【python】fletを使って簡単なGUIアプリを作る

2023年6月23日

pythonのみを使用してお気軽にGUIアプリを作成できるfletというフレームワークに最近ハマっているので、ご紹介していきたいと思います。

今までは、pySimpleGUIというライブラリを使用してGUIアプリケーションを作成しておりましたが、UIデザインやドキュメントの読みやすさから、今ではfletを主に使用しています。

pyinstallerを使用することで、python環境がない人にもプログラムを配布することができます。

公式ドキュメントはこちら。

Hello, world

とりあえず、必要最低限のコードでアプリケーションを起動させてみましょう。

まずfletをインストールします。

pip install flet

メインのプログラムを作成します。

import flet as ft

def main(page: ft.Page):
    page.add(ft.Text('hello, world.'))

ft.app(target=main)

たったこれだけで、アプリケーションを起動させることができます。

めちゃくちゃ簡単ですよね。

fletでは、Flutterベースのコントロールと呼ばれる部品を作成し、ページに追加していくことでアプリケーションを構築していきます。

上記の例ですと、「ft.Text()」というコントロールをページに追加しています。

コントロールは階層構造にできる

HTMLでいう <div>タグ内に <p> タグを配置できるように、fletでもコントロール内にコントロールを配置することが出来ます。

そもそも、コントロールをどんどん追加していくとどのような挙動になるか見ていきます。

import flet as ft

def main(page: ft.Page):
    # 真四角のコントロールを返す関数（今は無視でよい）
    def item():
        item = ft.Container(
            alignment=ft.alignment.center,
            width=50,
            height=50,
            bgcolor=ft.colors.AMBER,
            border_radius=ft.border_radius.all(5),
        )
        return item

    # ページに真四角のコントロールを追加
    page.add(item(), item(), item())

ft.app(target=main)

このように、ただコントロールを追加していくとこのようになります。

上から順にどんどん追加されていきます。

続いて、Rowというコントロールの中に、四角のコントロールを配置してみます。

import flet as ft

def main(page: ft.Page):
    # 真四角のコントロールを返す関数（今は無視でよい）
    def item():
        item = ft.Container(
            alignment=ft.alignment.center,
            width=50,
            height=50,
            bgcolor=ft.colors.AMBER,
            border_radius=ft.border_radius.all(5),
        )
        return item

    # Rowコントロール内に、四角のコントロールを配置
    row = ft.Row(spacing=10, controls=[item(), item(), item()])

    # ページにRowコントロールを追加
    page.add(row)

ft.app(target=main)

ft.Rowオブジェクトの「controls」引数に、コントロールをリスト形式で渡すことで、ft.Rowの配下にコントロールを格納することができます。

アプリケーションはこのようになります。

四角い要素が横並びになっていますね。

ft.Rowの配下のコントロールは、横並びに配置されます。

このように、コントロールをいくつも階層構造に配置することで、アプリケーションを構築していきます。

こちらのドキュメントに、どんなコントロールがあるか確認できます。

どんなコントロールがあるのか視覚的に分かりやすいですね。

イベント作成

続いて、「ボタンを押したら、何らかの処理を発火させる」というイベントハンドラ的な機能を実装する方法をご紹介していきます。

まずは、ボタンのみをページに追加します。

def main(page: ft.Page):
    # ボタンのコントロール作成
    btn = ft.ElevatedButton(text='PUSH')

    page.add(btn)

ft.app(target=main)

このように、ボタンがページに追加されます。

ただ配置しただけなので、クリックしても何も起きません。

なので、ボタンをクリックした際に起動させる関数を定義します。

def main(page: ft.Page):
    # ボタンをクリックした際に発火する関数
    def handle_click(e):
        page.add(ft.Text('clicked!!!'))
        page.update()

    # ボタンのコントロール
    btn = ft.ElevatedButton(text='PUSH')

    page.add(btn)

ft.app(target=main)

今回は「handle_click」メソッドを追加しました。このメソッドでは、ページに「clicked!!!」というft.Textコントロールを1つ追加します。

ページの内容を変更した際は、忘れずに page.update() メソッドを実行します。

このままでは、関数を追加しただけなので、相変わらずボタンをクリックしても何も起きません。

ボタンをクリックした際に「handle_click」メソッドを起動するように設定してあげる必要があります。ボタンのコントロールの「on_click」引数に、作成したメソッドを渡してあげるだけです。

def main(page: ft.Page):
    # ボタンをクリックした際に発火する関数
    def handle_click(e):
        page.add(ft.Text('clicked!!!'))
        page.update()

    # ボタンのコントロール
    btn = ft.ElevatedButton(text='PUSH', on_click=handle_click)

    page.add(btn)

ft.app(target=main)

再度アプリケーションを実行し、ボタンをクリックしてみます。