openplanning

Hướng dẫn và ví dụ JavaFX HBox, VBox Layout

  1. HBox Layout
  2. Ví dụ với HBox Layout
  3. VBox Layout
  4. Ví dụ với VBox Layout
  5. Thiết kế HBox/VBox Layout với Scene Builder

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):

Các hướng dẫn lập trình JavaFX

Show More