はじめに

Fletで画面レイアウトを作ると、なかなか思ったようなレイアウトにならないことが多いので、
サンプルというかスニペット的なものをまとめることにする。
まとまったものから随時追加していく。

Bootstrapに慣れているとColumnの意味が違うので要注意。
FletのColumnは要素を縦並びにしてくれる役割。Rowは横並び。

前提事項

試した環境
- Windows10
- Python 3.10.8
- Flet 0.3.2

詳細

テーブルレイアウト基本形

表示
メモ
- テーブル状にテキストを配置するときの基本形はこれ
- Container→Column→Row→横並びの中身
- Rowによって横幅いっぱいになるので基本必要
- 1行だったらColumnは要らない
- paddingなどが不要ならContainerは要らないけど、詰まった感じになるのでだいたい要る
ソース

    table = ft.Container(ft.Column([
        ft.Row([
            ft.Text("text1-1"), ft.Text("text1-2"), ft.Text("text1-3"),
        ], alignment=ft.MainAxisAlignment.START),
        ft.Row([
            ft.Text("text1-1"), ft.Text("text1-2"), ft.Text("text1-3"),
        ], alignment=ft.MainAxisAlignment.END),
        ft.Row([
            ft.Text("text1-1"), ft.Text("text1-2"), ft.Text("text1-3"),
        ], alignment=ft.MainAxisAlignment.CENTER),
        ft.Row([
            ft.Text("text3-1"), ft.Text("text3-2"), ft.Text("text3-3"),
        ], alignment=ft.MainAxisAlignment.SPACE_BETWEEN),
        ft.Row([
            ft.Text("text2-1"), ft.Text("text2-2"), ft.Text("text2-3"),
        ], alignment=ft.MainAxisAlignment.SPACE_AROUND),
        ft.Row([
            ft.Text("text1-1"), ft.Text("text1-2"), ft.Text("text1-3"),
        ], alignment=ft.MainAxisAlignment.SPACE_EVENLY),
    ]),
        margin=10,
        padding=10,
        bgcolor=ft.colors.BLACK12,
    )

角が丸いコンテナ

表示
メモ
- テーブルレイアウト基本形ベースでborder_radiusを付けると角が丸くなる
- 角全部を同じく丸めるならborder_radius=10
- 上だけ丸めるとかならborder_radius=ft.BorderRadius(10, 10, 0, 0)
- 普通の丸みなら数値は5～10あたり
ソース

    table1 = ft.Container(ft.Column([
        ft.Row([
            ft.Text("table1"),
        ], alignment=ft.MainAxisAlignment.START),
    ]),
        margin=10,
        padding=10,
        bgcolor=ft.colors.BLACK12,
        border_radius=10,
    )
    table2 = ft.Container(ft.Column([
        ft.Row([
            ft.Text("table2"),
        ], alignment=ft.MainAxisAlignment.START),
    ]),
        margin=10,
        padding=10,
        bgcolor=ft.colors.BLACK12,
        border_radius=ft.BorderRadius(10, 10, 0, 0),
    )
    table3 = ft.Container(ft.Column([
        ft.Row([
            ft.Text("table3"),
        ], alignment=ft.MainAxisAlignment.START),
    ]),
        margin=10,
        padding=10,
        bgcolor=ft.colors.BLACK12,
        border_radius=ft.BorderRadius(0, 0, 10, 10),
    )

カード（中にListTile使用）

表示
メモ
- ↑の基本形をCardに入れただけ
- カード特有のパラメータはelevationしかないので、elevationが要らないならContainerで良い
- 色はデフォルトで使うのが良い。中のContainerに色を付けると角が出るため
- ↓のソースだとwidthを消すと横幅いっぱいになる
ソース

    card = ft.Card(ft.Container(ft.Column([
        ft.ListTile(
            leading=ft.Icon(ft.icons.INFO, size=48),
            title=ft.Text("タイトル"),
            subtitle=ft.Text("サブタイトル"),
            trailing=ft.Text("trailing"),
        ),
        ft.Row([
            ft.VerticalDivider(width=10),
            ft.Column([
                ft.Text("○○○○○○○○○○○"),
                ft.Text("○○○○○○○○○○○"),
                ft.Text("○○○○○○○○○○○"),
            ])
        ]),
        ft.Row([
            ft.TextButton("Close")
        ], alignment=ft.MainAxisAlignment.END),
    ]),
        padding=10,
        width=300,
    ),
        margin=10,
        elevation=5,
    )