Zenn
🔦

PythonのFletを触ってみる

2023/02/03に公開
Flet
tech

噂の（？）Fletを触ってみました。
https://flet.dev/docs/tutorials/python-todo
チュートリアルを参考にメモアプリを作成。
特筆することがないぐらい簡単にできました、すごい。

Twitter風なメモアプリにしたかったので、
下に追加するのではなく上にCheckboxが追加されるようにしたかった。
日本語の資料が思ったより少なかったので困ったなぁと思って眺めてたのですが
self.tasks.controls.append(ft.Checkbox(label=self.new_task.value))
ふと、appendの部分insertしたら上に追加されるのでは？と思って
self.tasks.controls.insert(0,ft.Checkbox(label=self.new_task.value))
としたら上に追加されました。　すごい。

テキストの折り返しがしたい


ウィンドウサイズをある程度変更したかったけれどもexpandに手こずってしまった。
いまだにexpandがよくわからないので、基礎的なcolumnやrowの挙動を確認しながら
試行錯誤した内容を記録しておく。

横幅600pxのカラムを入れる

columnの中にテキストを3つ並べる

self.sample_text = ft.Text("テキスト", bgcolor=ft.colors.BLUE_600,)

return ft.Column(
    width=600,
    controls=[
        self.sample_text, 
        self.sample_text, 
        self.sample_text
    ],
)

縦に3つ並ぶ

columnの中にRowを入れてRowの中にテキストを3つ並べる

return ft.Column(
    width=600,
    controls=[
        ft.Row(
            controls=[
                self.sample_text, 
                self.sample_text, 
                self.sample_text
            ],
        )
    ],
)

横に3つならぶ

だが、これは長文が入ると悲しいことになってしまう。

コンテンツの幅

幅にあわせて改行して欲しいので、Rowにexpendを入れる

return ft.Column(
    width=600,
    controls=[
        ft.Row(
            expand=True,
            controls=[
                self.sample_text, self.sample_text2, self.sample_text
            ],
        )
    ],
)

？！？！？！
消えた

テキストにexpand=Trueにする

どうやらTextに個別にexpandを指定する必要があるようだった。

self.sample_text = ft.Text("テキスト", bgcolor=ft.colors.BLUE_600,expand=True)

return ft.Column(
    width=600,
    controls=[
        ft.Row(
            controls=[
                self.sample_text,
                self.sample_text2,
                self.sample_text,
            ],
        )
    ],
)


self.sample_text = ft.Text("テキスト", bgcolor=ft.colors.BLUE_600,expand=1)
self.sample_text2 = ft.Text("一つだけテキストがとても長い文章があると、こんな感じでどんどんと伸びていってしまう", bgcolor=ft.colors.BLUE_600,expand=5)
return ft.Column(
    width=600,
    controls=[
        ft.Row(
            controls=[
                self.sample_text,
                self.sample_text2,
                self.sample_text,
            ],
        )
    ],
)

数字でバランスも指定できる

チェックボックスのテキストは改行されない

ところでToDoアプリの方は元がチェックボックスが使用されているのだが、
この方法ではなぜか改行されなかった・・

のでテキストを無理やり突っ込む方法で回避した。

self.display_checkbox = ft.Checkbox(label="今回はなしにした")
self.display_text = ft.Text("テキスト", expand=True)

self.display_view = ft.Row(
    alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
    vertical_alignment=ft.CrossAxisAlignment.CENTER,
    controls=[
        ft.Row(
            expand=True,
            spacing=0,
            controls=[
                self.display_checkbox,
                self.display_text
            ],
        ),
    ]
)

Discussion