Bố cục và vị trí

Flow Builder tạo ra các layout responsive. Bạn không kéo thả các phần tử vào tọa độ cụ thể — thay vào đó, bạn lồng chúng vào bên trong các container để tự động sắp xếp các phần tử con.

Container quyết định hướng sắp xếp (dọc hoặc ngang), căn chỉnh và khoảng cách của các phần tử. Từng phần tử có thể tự tinh chỉnh kích thước và margin, hoặc — khi cần — thoát khỏi flow với định vị tuyệt đối (absolute) hoặc cố định (fixed).

Để biết các thuộc tính trực quan như fill, border và hiệu ứng, xem Styles and appearance.

   </TabItem>
    <TabItem value="layout" label="Layout, kích thước & khoảng cách">

Bố cục

Bố cục là công cụ chính để sắp xếp các phần tử trên màn hình. Mỗi container tự động phân bổ các phần tử con theo một tập hợp quy tắc — hướng, căn chỉnh và khoảng cách. Các phần tử bố cục có trong builder bao gồm:

Vertical Container: Sắp xếp các phần tử con từ trên xuống dưới
Horizontal Container: Sắp xếp các phần tử con từ trái sang phải
Divider: Đường phân cách trực quan giữa các phần tử
Carousel: Tập hợp các slide có thể cuộn ngang
Bottom Sheet: Bảng trượt lên từ phía dưới, hiển thị thêm nội dung khi người dùng nhấn vào một nút Containers là các thành phần xây dựng chính của màn hình. Bạn có thể lồng chúng vào nhau để tạo bố cục phức tạp. Mỗi container có mục Layout trong bảng bên phải để kiểm soát cách phân bố các phần tử con.

Để nhóm các phần tử vào một container mới, dùng hành động layer Wrap. Để xóa container và đưa các phần tử con lên cấp trên, dùng Unwrap.

Để biết thêm chi tiết về màn hình và hệ thống phân cấp layer, xem Màn hình và Layer.

Hướng

Free: Không có bố cục tự động. Các phần tử con được đặt vị trí độc lập (hữu ích khi các phần tử con sử dụng định vị tuyệt đối)
Vertical: Các phần tử con xếp chồng từ trên xuống dưới, như các hàng trong một cột
Horizontal: Các phần tử con sắp xếp từ trái sang phải, như các mục trong một hàng

Thứ tự phần tử

Các phần tử con được hiển thị theo thứ tự xuất hiện trong bảng Layers. Trong container dọc, phần tử ở trên cùng trong danh sách sẽ hiển thị ở đầu màn hình. Trong container ngang, phần tử ở trên cùng sẽ hiển thị ở bên trái. Kéo các phần tử trong bảng Layers để sắp xếp lại thứ tự, hoặc sử dụng Move Up và Move Down trong layer actions.

Căn chỉnh

Lưới căn chỉnh xác định vị trí của các phần tử con theo trục ngang của container. Trong container dọc, căn chỉnh kiểm soát vị trí ngang của các phần tử con (trái, giữa, hoặc phải). Trong container ngang, nó kiểm soát vị trí dọc của chúng (trên, giữa, hoặc dưới).

Phân bổ

Phân bổ xác định cách chia không gian giữa các phần tử con dọc theo trục chính:

Gap (mặc định): Khoảng cách cố định tính bằng pixel giữa các phần tử con liền kề
Space Between: Các phần tử con trải đều đến hai cạnh; khoảng cách bằng nhau xuất hiện giữa chúng
Space Around: Không gian đều nhau bao quanh mỗi phần tử con, với khoảng cách nửa kích thước ở hai cạnh
Space Evenly: Không gian bằng nhau trước, giữa và sau tất cả các phần tử con

Cắt nội dung

Cắt bỏ phần nội dung vượt ra ngoài ranh giới của container. Tắt tùy chọn này nếu bạn muốn cho phép tràn (ví dụ: một badge cố tình nhô ra ngoài mép card).

Vị trí

Theo mặc định, vị trí của mỗi phần tử được xác định tự động bởi bố cục của container chứa nó. Toggle Position cho phép bạn đưa phần tử ra khỏi luồng bình thường và định vị nó theo cách thủ công.

Absolute and fixed positioning in action

Tương đối (mặc định)

Phần tử vẫn nằm trong luồng bố cục thông thường. Vị trí của nó được xác định tự động theo quy tắc bố cục của container cha — bạn không thể kéo thả tự do. Dùng Margin để điều chỉnh khoảng cách xung quanh phần tử tương đối.

Dùng định vị tương đối cho phần lớn nội dung: khối văn bản, hình ảnh, thẻ, nút và các mục danh sách.

Tuyệt đối

Phần tử thoát khỏi luồng bố cục thông thường và hiển thị đè lên nội dung khác. Nó không còn ảnh hưởng đến bố cục của các phần tử lân cận.

Khi bạn chọn Absolute, các điều khiển bổ sung sẽ xuất hiện:

Các trường Offset (T, L, R, B): Đặt khoảng cách tính bằng pixel từ phần tử đến từng cạnh của container cha
Lưới Anchor: Nhấp vào một điểm trên lưới 3×3 để chọn góc, cạnh hoặc tâm của container cha mà phần tử neo vào
Anchor ngang (Left / Center / Right) và Anchor dọc (Top / Center / Bottom): Các dropdown điều khiển cùng điểm neo như lưới
Z-index: Trường số điều khiển thứ tự xếp chồng của phần tử so với các phần tử cùng cấp. Phần tử có giá trị cao hơn sẽ hiển thị phía trên Sử dụng định vị tuyệt đối (absolute positioning) cho các lớp phủ trang trí, badge, nút đóng và icon đặt chồng lên hình ảnh.

Để kéo giãn một phần tử có định vị tuyệt đối theo toàn bộ chiều rộng của phần tử cha, hãy đặt anchor ngang về Left, sau đó thêm offset Right bằng 0. Phần tử sẽ được ghim vào cả hai cạnh.

Cố định

Phần tử bỏ qua hoàn toàn container cha và ghim vào màn hình. Nó vẫn hiển thị trong khi người dùng cuộn — nội dung trang di chuyển bên dưới nó. Định vị cố định (Fixed) sử dụng các điều khiển giống như Absolute (offset, lưới neo, Z-index). Tất cả các offset đều tính tương đối so với vùng an toàn (safe area) của màn hình thay vì so với phần tử cha. Ví dụ: offset bằng 0 từ phía dưới sẽ giữ phần tử nằm phía trên thanh home indicator. Để đo offset từ các cạnh vật lý của màn hình, hãy bật tùy chọn Bỏ qua vùng an toàn. Sử dụng định vị cố định cho các phần tử cần nổi trên nội dung có thể cuộn thay vì chiếm không gian — ví dụ như nút đóng hoặc khôi phục dạng nổi, banner cố định ở trên cùng, nút cuộn lên đầu trang, và thanh điều hướng. Đối với khu vực hành động ở cuối trang, hãy dùng Footer thay thế.

Bỏ qua vùng an toàn

Vùng an toàn là phần màn hình tránh khỏi notch, thanh trạng thái và thanh điều hướng phía dưới. Theo mặc định, các phần tử được định vị sẽ nằm trong vùng này.

Chọn hộp kiểm Ignore safe area bên dưới bộ chọn loại vị trí để đo offset của phần tử từ các cạnh vật lý của màn hình. Khi đó, phần tử có thể mở rộng ra phía sau notch và thanh điều hướng phía dưới.

Bảng Position với một phần tử Fixed được chọn và hộp kiểm Ignore safe area

Sử dụng cách này để hiển thị media toàn màn hình: đặt vị trí của hình ảnh hoặc video thành Fixed, đặt cả bốn offset về 0 và chọn Ignore safe area. Media sẽ phủ kín toàn bộ màn hình, từ cạnh này đến cạnh kia.

Tùy chọn này chỉ hoạt động với kiểu định vị absolute và fixed. Với các phần tử relative, nó bị vô hiệu hóa, và khi chuyển phần tử về Relative thì cài đặt này sẽ bị xóa.

Kích thước

Mỗi phần tử đều có điều khiển Width và Height. Nhấn vào dropdown để chọn chế độ kích thước:

Fill: Phần tử giãn ra để chiếm toàn bộ không gian còn lại trong phần tử cha. Giá trị pixel hiển thị là kết quả đã được tính toán.
Hug: Phần tử thu nhỏ vừa khít với nội dung bên trong. Giá trị pixel hiển thị là kết quả đã được tính toán.
Fixed: Phần tử sử dụng đúng giá trị pixel bạn chỉ định, bất kể kích thước phần tử cha hay nội dung. Đây là chế độ duy nhất dành cho các phần tử có vị trí tuyệt đối hoặc cố định.

Các chế độ kích thước Fill, Hug và Fixed

Khoảng cách

Đặt giá trị khoảng cách riêng cho từng cạnh của phần tử.

Margin: Khoảng cách giữa phần tử và các phần tử lân cận. Không vượt ra ngoài ranh giới của container cha, bất kể giá trị là bao nhiêu.
Padding: Khoảng cách giữa ranh giới của phần tử và nội dung bên trong nó.

Các phần tử văn bản chỉ có margin. Màn hình chỉ có padding. Cả hai đều khả dụng cho các container và các phần tử khác có nội dung con.

Thứ tự xếp chồng

Position panel for an absolute element with the Z-index field set to 99

Các phần tử Relative không bao giờ chồng lên nhau — mỗi container sắp xếp các phần tử con theo thứ tự tuần tự. Việc chồng chéo chỉ xảy ra khi một phần tử thoát khỏi luồng thông thường với vị trí Absolute hoặc Fixed.

Khi các phần tử chồng lên nhau, các phần tử con xuất hiện sau trong bảng Layers sẽ được hiển thị phía trên các phần tử xuất hiện trước — kể cả khi phần tử sau là relative còn phần tử trước là absolute. Các phần tử Absolute và Fixed có trường Z-index để kiểm soát chi tiết hơn: giá trị cao hơn sẽ hiển thị trên cùng. Phần tử Relative không có Z-index — thứ tự layer là yếu tố duy nhất quyết định thứ tự chồng lên nhau.

Dùng các thao tác layer Move up và Move down để thay đổi thứ tự phần tử.