Mục lục
Hướng dẫn sử dụng JavaFX HBox, VBox Layout
Xem thêm các chuyên mục:
-
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):
-