Series Java Swing Bài 6: FlowLayout: Bố cục dòng chảy tự do.

FlowLayout là Layout Manager đơn giản nhất và trực quan nhất trong Java Swing. Giống như cách bạn viết chữ trên phần mềm Microsoft Word: các thành phần (Component) sẽ được sắp xếp lần lượt từ trái sang phải, khi hết chỗ trên một hàng, chúng sẽ tự động rớt xuống dòng tiếp theo.

Đặc biệt, FlowLayout là bố cục mặc định của JPanel.

1. Ba đặc điểm cốt lõi của FlowLayout

1. Tôn trọng kích thước gốc: Khác với nhiều Layout khác có xu hướng bóp méo hoặc kéo giãn Component cho vừa không gian, FlowLayout luôn tôn trọng kích thước ưu tiên (preferredSize) của Component. Một nút bấm có chữ ngắn sẽ nhỏ, chữ dài sẽ to.

2. Tự động xuống dòng (Wrapping): Khi bạn thay đổi kích thước cửa sổ (kéo hẹp lại), các Component ở cuối hàng sẽ tự động trôi xuống hàng dưới để không bị che khuất.

3. Căn giữa mặc định: Nếu không cấu hình gì thêm, các Component trên cùng một hàng sẽ được đẩy vào giữa hàng đó.

2. Các hàm khởi tạo (Constructors)

FlowLayout cho phép bạn tùy chỉnh vị trí căn lề (Alignment) và khoảng cách giữa các Component (Gap) ngay khi khởi tạo:

• FlowLayout(): Khởi tạo mặc định, căn giữa (CENTER), khoảng cách ngang và dọc giữa các Component là 5 pixel.

• FlowLayout(int align): Chỉ định hướng căn lề.

  • FlowLayout.LEFT: Căn trái.

  • FlowLayout.RIGHT: Căn phải.

  • FlowLayout.CENTER: Căn giữa.

  • FlowLayout.LEADING / TRAILING: Căn theo chiều đọc của ngôn ngữ hệ điều hành (ví dụ tiếng Ả Rập đọc từ phải sang trái thì LEADING sẽ là bên phải).

• FlowLayout(int align, int hgap, int vgap): Cấu hình toàn diện với căn lề, khoảng cách ngang (hgap) và khoảng cách dọc (vgap) tính bằng pixel.

3. Quản lý kích thước với setPreferredSize

Vì FlowLayout không tự kéo giãn Component, nếu bạn muốn một nút bấm to ra theo ý muốn, bạn không thể dùng setSize(). Thay vào đó, bạn phải yêu cầu Layout Manager cấp phát kích thước bằng setPreferredSize().

Java

JButton btn = new JButton("Nút bấm");
// setSize(100, 50) sẽ KHÔNG có tác dụng trong FlowLayout
btn.setPreferredSize(new Dimension(100, 50)); 

4. Source code minh họa

Đoạn code dưới đây tạo một cửa sổ với 6 nút bấm, căn lề trái và có khoảng cách rộng rãi giữa các nút. Bạn hãy chạy thử và thử dùng chuột kéo hẹp cửa sổ lại để xem cách các nút bấm "chảy" xuống dòng.

Java

import javax.swing.*;
import java.awt.*;

public class FlowLayoutDemo extends JFrame {

    public FlowLayoutDemo() {
        setTitle("Demo FlowLayout");
        setSize(400, 200);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLocationRelativeTo(null);

        // Khởi tạo FlowLayout: Căn trái, khoảng cách ngang 15px, dọc 20px
        FlowLayout flowLayout = new FlowLayout(FlowLayout.LEFT, 15, 20);
        setLayout(flowLayout);

        // Thêm các Component có kích thước chữ khác nhau
        add(new JButton("Nút 1"));
        add(new JButton("Nút 2 dài hơn một chút"));
        add(new JButton("Nút 3"));
        add(new JButton("Nút 4"));
        
        // Custom kích thước cho Nút 5
        JButton btn5 = new JButton("Nút 5 Custom");
        btn5.setPreferredSize(new Dimension(150, 40));
        add(btn5);
        
        add(new JButton("Nút 6"));
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> {
            new FlowLayoutDemo().setVisible(true);
        });
    }
}

5. Ứng dụng thực tế: Khi nào nên dùng?

Nên dùng:

• Thiết kế thanh công cụ (Toolbar) chứa một hàng các nút bấm nằm sát nhau.

• Thiết kế khu vực chứa các nút hành động ở góc màn hình (như nhóm nút "OK", "Cancel", "Apply" thường được gom vào một JPanel dùng FlowLayout(FlowLayout.RIGHT)).

Không nên dùng:

• Thiết kế Form nhập liệu (Label nằm cạnh TextField) vì các hàng sẽ không thẳng cột với nhau.

• Giao diện chính của ứng dụng (Main layout), vì nó không có khả năng lấp đầy các khoảng không gian trống khi phóng to toàn màn hình.