📦 Layout cơ bản

Học cách sắp xếp và tổ chức giao diện với các layout controls của Flet. ⏱️ 15 phút

🎯 Mục tiêu

Nắm vững 3 layout chính: Row, Column, và Container.

📊 Row - Sắp xếp theo hàng ngang

Row xếp các controls theo chiều ngang:

import flet as ft

@ft.component
def RowExample():
    return ft.Row([
        ft.Text("A"),
        ft.Text("B"),
        ft.Text("C"),
    ])

def main(page: ft.Page):
    page.add(RowExample())

ft.run(main)

Kết quả:

Căn chỉnh Row

ft.Row(
    controls=[...],
    alignment=ft.MainAxisAlignment.CENTER,       # Căn giữa theo trục chính (ngang)
    vertical_alignment=ft.CrossAxisAlignment.CENTER,  # Căn giữa theo trục phụ (dọc)
    spacing=10,  # Khoảng cách giữa các controls
)

MainAxisAlignment (trục ngang):

Giá trị	Mô tả
START	Căn trái (mặc định)
CENTER	Căn giữa
END	Căn phải
SPACE_BETWEEN	Cách đều, không padding
SPACE_AROUND	Cách đều, có padding
SPACE_EVENLY	Cách đều hoàn toàn

📐 Column - Sắp xếp theo cột dọc

Column xếp các controls theo chiều dọc:

@ft.component
def ColumnExample():
    return ft.Column([
        ft.Text("Dòng 1"),
        ft.Text("Dòng 2"),
        ft.Text("Dòng 3"),
    ])

Kết quả:

Căn chỉnh Column

ft.Column(
    controls=[...],
    alignment=ft.MainAxisAlignment.CENTER,  # Căn giữa theo trục chính (dọc)
    horizontal_alignment=ft.CrossAxisAlignment.CENTER,  # Căn giữa theo trục phụ (ngang)
    spacing=10,
    scroll=ft.ScrollMode.AUTO,  # Cho phép scroll nếu dài
)

📦 Container - Wrapper với styling

Container bọc một control và thêm styling:

ft.Container(
    content=ft.Text("Hello!"),
    width=200,
    height=100,
    bgcolor=ft.Colors.BLUE_100,
    padding=20,
    margin=10,
    border_radius=10,
    border=ft.border.all(2, ft.Colors.BLUE),
)

Kết quả:

flowchart TD
    subgraph Container["📦 Container"]
        T["Hello!"]
    end
    style Container fill:#bbdefb,stroke:#1976d2,stroke-width:2px

Thuộc tính Container

Thuộc tính	Mô tả
content	Control bên trong
width, height	Kích thước
bgcolor	Màu nền
padding	Padding bên trong
margin	Margin bên ngoài
border_radius	Bo góc
border	Đường viền

🧩 Kết hợp Layouts

import flet as ft

@ft.component
def CardLayout():
    return ft.Container(
        content=ft.Column([
            ft.Text("Header", size=24, weight=ft.FontWeight.BOLD),
            ft.Row([
                ft.Container(
                    content=ft.Text("Card 1"),
                    bgcolor=ft.Colors.RED_100,
                    padding=20,
                    border_radius=8,
                ),
                ft.Container(
                    content=ft.Text("Card 2"),
                    bgcolor=ft.Colors.GREEN_100,
                    padding=20,
                    border_radius=8,
                ),
            ]),
            ft.Text("Footer"),
        ]),
        padding=20,
    )

def main(page: ft.Page):
    page.add(CardLayout())

ft.run(main)

Cấu trúc layout:

flowchart TD
    subgraph Container["Container"]
        subgraph Col["Column"]
            H["Header"]
            subgraph R["Row"]
                C1["Card 1"] ~~~ C2["Card 2"]
            end
            F["Footer"]
        end
    end
    H --> R --> F
    style Container fill:#f5f5f5
    style C1 fill:#ffcdd2
    style C2 fill:#c8e6c9

🔄 expand - Mở rộng để lấp đầy

Dùng expand=True để control chiếm hết không gian còn lại:

ft.Row([
    ft.Container(content=ft.Text("Fixed"), width=100, bgcolor=ft.Colors.RED_100),
    ft.Container(content=ft.Text("Expanded"), expand=True, bgcolor=ft.Colors.BLUE_100),
])

Kết quả:

Hoặc dùng tỷ lệ:

ft.Row([
    ft.Container(content=ft.Text("1"), expand=1, bgcolor=ft.Colors.RED_100),
    ft.Container(content=ft.Text("2"), expand=2, bgcolor=ft.Colors.BLUE_100),
])
# Container 2 chiếm gấp đôi Container 1

🎯 Thực hành

Tạo layout này:

Gợi ý code:

@ft.component
def AppLayout():
    return ft.Column([
        ft.Container(content=ft.Text("HEADER"), bgcolor=ft.Colors.BLUE, padding=10),
        ft.Row([
            ft.Container(content=ft.Text("Sidebar"), width=100, bgcolor=ft.Colors.GREY_300, expand=True),
            ft.Container(content=ft.Text("Content"), expand=3, bgcolor=ft.Colors.GREY_100),
        ], expand=True),
        ft.Container(content=ft.Text("FOOTER"), bgcolor=ft.Colors.BLUE, padding=10),
    ], expand=True)

⏭️ Bước tiếp theo

Đã nắm được layout! Tiếp tục với Controls phổ biến để học các widget UI.