Layout cơ bản trong Flet

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ả:

Row layout - các phần tử xếp theo chiều ngang

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

Row alignment - các cách căn chỉnh Row

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ả:

Column layout - các phần tử xếp theo chiều dọc

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ả:

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:

🔄 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:

App Layout - Header, Sidebar, Content, Footer

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.