Fletを試す(4) - 画面レイアウトの調査（随時更新）

はじめに

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,
    )