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

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

flowchart TD
    subgraph "Ứng dụng Flet"
        A["ft.run(main)"] --> B["Page"]
        B --> C1["Control 1"]
        B --> C2["Control 2"]
        C2 --> C3["Child Control"]
        B --> C4["Control 3"]
    end

    style A fill:#3776ab,color:white
    style B fill:#0175C2,color:white

📄 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.