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

# はじめに

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

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

# 前提事項

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

# 詳細

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

- 表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273897/a8d4d845-d87b-1ab6-7c2c-519825c76213.png)

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

- ソース
```python
    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,
    )
```

## 角が丸いコンテナ

- 表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273897/82c5cf58-0285-7100-f9b7-d95af2659157.png)

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

- ソース
```python
    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使用）

- 表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273897/c33577ac-a754-39de-5c20-4cffe88ff4af.png)

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

- ソース
```python
    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,
    )
```