ゼロからのプログラミングチャレンジ～flet－todoアプリ編～
前に完成していて紹介しようと思っていたのですが、なかなか、紹介する機会がなく、おくれたのですが、fletのドキュメントのチュートリアルのtodoアプリを解説してみたいと思います。
ドキュメントにコードはあるのですが、ところどころ間違っており、コピペだけでは、できず、初心者は躓くかなと思ったので(fletから入る人は初心者じゃない可能性が高いから大丈夫かもしれないけど)、間違っているところを解説したいと思います。
コードは、こんな感じ(初心者が描いたコードなので普通より長くなってたり至らないところがあると思いますが、大目に見てください)
動きの説明ざっと
表示の流れ：main関数→TodoAppクラス起動→self.add_clickedでTaskクラスを生成追加
動作の流れ
①タブの変更→tabs_changed関数で画面をアップデート
②チェックボックスのクリック→self.status_changedで画面をアップデート
順番間違えたけど
タスク部分の動き
①編集ボタン
→テキストフィールドが表示され、タスク部分が非表示になる
→テキストフィールドを入れセーブボタンを押す
→タスク名が変わったタスク部分が表示され、入力画面が非表示に
②削除ボタン
→タスクが消える
チュートリアルで間違っていたところ
①tabs_changed、task_status_changeのところにbefore_update()関数が入っていなかったところ。もう一つくらい入ってなかった気がする
②add_clickedをオーバーライドしたと書いていた（日本語版）だけど、
オーバーライドの意味も違うし、なんかエラーが出ました。
なので、チュートリアルでは、add_clickedが2つ書かれていましたが、それを一つに統一したらうまくいきました。
コピペ用※インデントとか改行とか空白は自分で調整してください。
「import flet as ft
class Task(ft.Column):
def __init__(self,input_text, task_status_change,task_delete):
super().__init__()
self.completed=False
self.text_task=input_text
self.check_box=ft.Checkbox(label=self.text_task,on_change=self.status_changed)
self.edit_button=ft.IconButton(icon=ft.icons.EDIT,on_click=self.edit_clicked)
self.delete_button=ft.IconButton(icon=ft.icons.DELETE,on_click=self.delete_clicked)
self.edit_field=ft.TextField()
self.save_button=ft.IconButton(icon=ft.icons.SAVE,on_click=self.save_clicked)
self.upper_row=ft.Row(
controls=[self.check_box,self.edit_button,self.delete_button]
)
self.lower_row=ft.Row(
controls=[
self.edit_field,
self.save_button
],
visible=False
)
self.task_obj=ft.Column(controls=[self.upper_row,self.lower_row])
self.controls=[self.task_obj]
self.task_delete=task_delete
self.task_status_change=task_status_change
def edit_clicked(self,e):
self.upper_row.visible=False
self.lower_row.visible=True
self.task_obj.update()
#戻るボタンほしい ？(あとででいい)
def delete_clicked(self,e):#削除するボタンの位置を探すのが難しい
self.task_delete(self)
def save_clicked(self,e):
t=self.edit_field.value
self.check_box.label=t
self.edit_field.value=""
self.lower_row.visible=False
self.upper_row.visible=True
self.lower_row.update()
self.upper_row.update()
def status_changed(self, e):
self.completed = self.check_box.value
self.task_status_change()
class TodoApp(ft.Column):
def __init__(self):
super().__init__()
self.items_left=ft.Text("0 items left")
self.header_title=ft.Text(value="Todos", theme_style=ft.TextThemeStyle.HEADLINE_MEDIUM)
self.header=ft.Row(controls=[self.header_title],alignment=ft.MainAxisAlignment.CENTER)
self.text_input=ft.TextField(hint_text="What's to be done ?")
self.add_button=ft.FloatingActionButton(icon=ft.icons.ADD,on_click=self.add_clicked)
self.top_row=ft.Row(controls=[self.text_input,self.add_button])
self.lower_row=ft.Column()
self.filter = ft.Tabs(
selected_index=0,
on_change=self.tabs_changed,
tabs=[ft.Tab(text="all"), ft.Tab(text="active"), ft.Tab(text="completed")],
)
self.footer=ft.Row(
alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
vertical_alignment=ft.CrossAxisAlignment.CENTER,
controls=[
self.items_left,
ft.OutlinedButton(
text="Clear completed", on_click=self.clear_clicked
),
],
)
self.width=600
self.controls=[self.header,self.top_row,self.filter,self.lower_row,self.footer]
# def add_clicked(self,e):
# task=Task(self.text_input.value,self.task_delete)
# self.lower_row.controls.append(task)
# self.text_input.value=""
# self.top_row.update()
# self.lower_row.update()
def task_delete(self,task):
self.lower_row.controls.remove(task)
self.update()
def before_update(self):
status = self.filter.tabs[self.filter.selected_index].text
count = 0
for task in self.lower_row.controls:
task.visible = (
status == "all"
or (status == "active" and task.completed == False)
or (status == "completed" and task.completed)
)
if not task.completed:
count += 1
self.items_left.value=f"{count} active item(s) left"
def tabs_changed(self, e):
self.before_update()
self.update()
def task_status_change(self):
self.before_update()
self.update()
def add_clicked(self, e):
task = Task(self.text_input.value, self.task_status_change, self.task_delete)
self.lower_row.controls.append(task)
self.text_input.value=""
self.top_row.update()
self.lower_row.update()
def clear_clicked(self, e):
for task in self.lower_row.controls[:]:
if task.completed:
self.task_delete(task)
def main(page:ft.Page):
todoapp=TodoApp()
page.add(todoapp)
ft.app(main)」
作ったものを見ると、結構いいので来たなと思いましたが、やっていることは、中学生レベルだなと感じたので、自分で使ってみて、付け足したい機能を挙げていってより良いものを作っていきたいです。(目標であるエンジニアレベルに持っていきたい。今すぐじゃなくてもいいけど)
皆さんんも気分転換に試してみてはいかかでしょうか？
今回はこれで、ここまで読んでくださってありがとうございます！！