Hướng dẫn và ví dụ JavaFX AnchorPane Layout
Xem thêm các chuyên mục:

Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.


AnchorPane là một bộ chứa (container), nó khá giống với BorderPane. BorderPane chia bề mặt của nó thành 5 vùng riêng biệt để đặt các thành phần con vào đó, trong khi AnchorPane chia bề mặt của nó thành 5 vùng để neo (anchor) thành phần con, chú ý rằng 5 vùng của AnchorPane chỉ là 5 vùng logic, nó không phải là 5 vùng thực sự.

Một thành phần con nằm trong AnchorPane có thể được neo (anchor) vào một hoặc nhiều vùng logic của AnchorPane.
Hình ảnh dưới đây minh họa một thành phần con nằm trong AnchorPane, được neo vào cạnh bên trái và bên phải của AnchorPane. Và khi AnchorPane thay đổi chiều dài (width), chiều dài của thành phần con cũng bị thay đổi theo.

Thành phần con có thể được neo (anchor) vào 4 cạnh của AnchorPane:


BorderPaneDemo.java
package org.o7planning.javafx.anchorpane;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;
public class AnchorPaneDemo extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
AnchorPane root = new AnchorPane();
Button button1 = new Button("(B1) Top + Left + Right");
Button button2 = new Button("(B2) Top + Left + Right");
Button button3 = new Button("(B3) Top + Left + Right");
Button button4 = new Button("(B4) Top + Left + Right + Bottom");
// (B1) Neo vào Top + Left + Right
AnchorPane.setTopAnchor(button1, 40.0);
AnchorPane.setLeftAnchor(button1, 50.0);
AnchorPane.setRightAnchor(button1, 70.0);
// (B2) Neo vào Top + Left + Right
AnchorPane.setTopAnchor(button2, 90.0);
AnchorPane.setLeftAnchor(button2, 10.0);
AnchorPane.setRightAnchor(button2, 320.0);
// (B3) Neo vào Top + Left + Right
AnchorPane.setTopAnchor(button3, 100.0);
AnchorPane.setLeftAnchor(button3, 250.0);
AnchorPane.setRightAnchor(button3, 20.0);
// (B4) Neo vào 4 cạnh của AnchorPane
AnchorPane.setTopAnchor(button4, 150.0);
AnchorPane.setLeftAnchor(button4, 40.0);
AnchorPane.setRightAnchor(button4, 50.0);
AnchorPane.setBottomAnchor(button4, 45.0);
// Thêm vào AnchorPane
root.getChildren().addAll(button1, button3, button2, button4);
Scene scene = new Scene(root, 550, 250);
primaryStage.setTitle("AnchorPane Layout Demo (o7planning.org)");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Chạy ví dụ:

- File/New/Other...




Thêm các thành phần con vào AnchorPane:

Anchor:
Neo thành phần con vào các cạnh của AnchorPane:
