Hướng dẫn sử dụng JavaFX HBox, VBox Layout

Xem thêm các chuyên mục:

Nhóm thành viên của o7planning đã xây dựng một website tuyệt vời và miễn phí giúp mọi người học tiếng Anh, học từ vựng dễ dàng hơn. Hãy truy cập để học tiếng Anh ngay bây giờ:

1- HBox Layout

HBox là một bộ chứa (container), nó sắp xếp các thành phần con trên một dòng duy nhất.

2- Ví dụ với HBox Layout

HBoxDemo.java
package org.o7planning.javafx.hbox;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.RadioButton;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class HBoxDemo extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        HBox root = new HBox();
       
        root.setSpacing(10);
        root.setPadding(new Insets(15,20, 10,10));
       
        // Button 1
        Button button1= new Button("Button1");
        root.getChildren().add(button1);
       
       
        // Button 2
        Button button2 = new Button("Button2");
        button2.setPrefSize(100, 100);
        root.getChildren().add(button2);
       
        // TextField
        TextField textField = new TextField("Text Field");
        textField.setPrefWidth(110);
         
       
        root.getChildren().add(textField);
       
        // CheckBox
        CheckBox checkBox = new CheckBox("Check Box");
         
        root.getChildren().add(checkBox);
       
        // RadioButton
        RadioButton radioButton = new RadioButton("Radio Button");
        root.getChildren().add(radioButton);
       
        Scene scene = new Scene(root, 550, 250);

        primaryStage.setTitle("HBox Layout Demo");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

   
    public static void main(String[] args) {
        launch(args);
    }
   
}
Chạy ví dụ:

3- VBox Layout

VBox là một bộ chứa (container), nó sắp xếp các thành phần con trên một cột duy nhất.
 

4- Ví dụ với VBox Layout

VBoxDemo.java
package org.o7planning.javafx.vbox;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.RadioButton;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class VBoxDemo extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        VBox root = new VBox();
       
        root.setSpacing(10);
        root.setPadding(new Insets(15,20, 10,10));
       
        // Button 1
        Button button1= new Button("Button1");
        root.getChildren().add(button1);
       
       
        // Button 2
        Button button2 = new Button("Button2");
        button2.setPrefSize(100, 100);
        root.getChildren().add(button2);
       
        // TextField
        TextField textField = new TextField("Text Field");
        textField.setPrefWidth(110);
         
       
        root.getChildren().add(textField);
       
        // CheckBox
        CheckBox checkBox = new CheckBox("Check Box");
         
        root.getChildren().add(checkBox);
       
        // RadioButton
        RadioButton radioButton = new RadioButton("Radio Button");
        root.getChildren().add(radioButton);
       
        Scene scene = new Scene(root, 550, 250);

        primaryStage.setTitle("VBox Layout Demo");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

   
    public static void main(String[] args) {
        launch(args);
    }
   
}
Chạy ví dụ:

5- Thiết kế HBox/VBox Layout với Scene Builder

  • File/New/Other..
Mở HBoxView.fxml với Scene Builder:
Thêm các thành phần con ( Node) vào HBox.

padding & spacing:

Sét đặt kích thước ưu thích cho các thành phần con:

Căn lề (Alignment):

Xem thêm các chuyên mục: