Fletを使ってみよう！ - ToDoリスト（簡易）

簡単なアプリ的なものを作ってみましょう。

Build multi-platform apps in Python powered by Flutter | Flet

公式サイトを見ながら実行してみましょう！

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)

おさらいしながら理解していきます。

import flet as ft

def main(page):

//  何らかの処理

ft.app(target=main)

まず、"import"でfletを読み込みます。
使いやすいように"as"をつけて短く"ft"と書いて使えるように名前を定義します。

そして"main"関数の定義

def main(page):

最後に実行する命令

ft.app(target=main)

となります。今回のコードは

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

最初にクリックしたときの動作を書きています。

page.add()で画面を表示します。この場合は"ft.Checkbox"とあるのでチェックボックス、その後に新しい名前"new_task.value"を追加します。新しい名前については後で書きます、入力欄より値を取得します。

ボタンを押した時点で上記の値の取得して次に

new_task.value = ""

追加した新しい名前が入っていた変数を""として空欄に戻す命令。続いて

new_task.focus()

ということで"new_task"が入れる入力欄にフォーカス、すぐに入力できる状態にする命令。

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.ElevatedButton)を画面上に表示する命令となります。

これを実行すると

"Whats needs to be done?"と書かれている入力欄に自分の好きな言葉を入れてボタンを押すと

と追加されます。