Cấu trúc ứng dụng Flet

Hãy tìm hiểu cách Flet tổ chức một ứng dụng và các thành phần cơ bản.

🏗️ Kiến trúc tổng quan

📄 Page - Cửa sổ chính

Page là container gốc của ứng dụng:


def main(page: ft.Page):
    # Cấu hình page
    page.title = "Tiêu đề cửa sổ"
    page.window.width = 400
    page.window.height = 600
    page.bgcolor = ft.Colors.WHITE
    page.padding = 20
    
    # Căn chỉnh nội dung
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

Các thuộc tính Page thường dùng

Thuộc tính	Mô tả
`title`	Tiêu đề cửa sổ
`bgcolor`	Màu nền
`padding`	Padding trong page
`scroll`	Cho phép scroll
`theme_mode`	Light/Dark mode

🎛️ Controls - Các thành phần UI

Controls là các widget tạo nên giao diện:


# Text
ft.Text("Xin chào", size=20, color=ft.Colors.BLUE)
 
# Button
ft.ElevatedButton("Click me", on_click=handle_click)
 
# TextField
ft.TextField(label="Nhập tên", hint_text="Tên của bạn")
 
# Image
ft.Image(src="https://example.com/image.png", width=200)

Thêm Controls vào Page

Cách 1: page.add() - Thêm vào cuối


page.add(
    ft.Text("Dòng 1"),
    ft.Text("Dòng 2"),
)

Cách 2: page.controls - Truy cập trực tiếp list


page.controls.append(ft.Text("Dòng mới"))
page.update()

📦 Controls lồng nhau

Controls có thể chứa controls con:


page.add(
    ft.Container(
        content=ft.Column([
            ft.Text("Tiêu đề"),
            ft.Row([
                ft.ElevatedButton("Nút 1"),
                ft.ElevatedButton("Nút 2"),
            ])
        ]),
        padding=20,
        bgcolor=ft.Colors.BLUE_100,
    )
)

Cấu trúc:


Container
└── Column
    ├── Text
    └── Row
        ├── ElevatedButton
        └── ElevatedButton

🔄 Entry Point: ft.run()

ft.run() khởi chạy ứng dụng:


# Cơ bản
ft.run(main)
 
# Với tham số
ft.run(
    main,
    view=ft.AppView.WEB_BROWSER,  # Mở trong browser
    port=8080,                     # Port cho web
)

Các view modes

View	Mô tả
`FLET_APP`	Cửa sổ native (mặc định)
`WEB_BROWSER`	Mở trong browser

🎭 Declarative Components (Flet 0.80+)

Flet 0.80 giới thiệu Components - cách viết UI hiện đại hơn:


import flet as ft
 
@ft.component
def Greeting():
    return ft.Container(
        content=ft.Column([
            ft.Text("Xin chào!", size=24),
            ft.Text("Chào mừng đến với Flet", size=16),
        ]),
        padding=20,
    )
 
def main(page: ft.Page):
    page.add(Greeting())
 
ft.run(main)

[!TIP] @ft.component biến hàm thành component có thể tái sử dụng. Chúng ta sẽ học chi tiết ở bài Components & Observables.

📐 Cấu trúc dự án gợi ý (Feature-First)

Tổ chức code theo feature (tính năng), chỉ share những gì thực sự dùng chung:


my-flet-app/
├── main.py                 # Entry point
├── features/               # Các tính năng
│   ├── auth/               # Feature: Authentication
│   │   ├── login_view.py
│   │   ├── register_view.py
│   │   └── auth_state.py
│   ├── home/               # Feature: Home
│   │   ├── home_view.py
│   │   └── home_components.py
│   └── settings/           # Feature: Settings
│       ├── settings_view.py
│       └── theme_picker.py
├── shared/                 # Chỉ những gì THỰC SỰ dùng chung
│   ├── components/         # UI components tái sử dụng
│   │   ├── button.py
│   │   └── input_field.py
│   ├── theme.py            # Theme configuration
│   └── utils.py            # Utility functions
└── assets/                 # Hình ảnh, fonts
    └── logo.png

[!TIP] Feature-first: Mỗi feature chứa toàn bộ code liên quan (views, components, state). Chỉ đưa vào shared/ khi component được dùng bởi 2+ features.

🎯 Tóm tắt

Thành phần	Vai trò
`ft.run(main)`	Khởi chạy app
`Page`	Container gốc, cửa sổ chính
`Controls`	Các widget UI
`@ft.component`	Component tái sử dụng

⏭️ Bước tiếp theo

Nắm vững cấu trúc rồi! Tiếp tục với Layout cơ bản để học cách sắp xếp giao diện.