前言:
现时同学们对“javafx网格布局”可能比较关怀,大家都想要知道一些“javafx网格布局”的相关知识。那么小编也在网络上汇集了一些关于“javafx网格布局””的相关知识,希望看官们能喜欢,各位老铁们快快来了解一下吧!布局类的介绍
在JavaFX中,布局类用于管理和组织用户界面上的控件和容器。JavaFX提供了一系列布局类,每个类都有不同的排列方式和特性,以适应各种布局需求。以下是一些常用的JavaFX布局类及其主要特性:
布局类的特性
Pane类:
特性: Pane是所有布局类的基类,它允许自由排列子节点,没有特定的布局规则。可以通过设置子节点的坐标来定位它们。Pane的子类包括AnchorPane、BorderPane等。
FlowPane类:
特性: FlowPane按照水平或垂直流动的方式排列子节点。可以通过设置水平和垂直间距来调整子节点之间的间隔。适用于自适应大小的控件。
import javafx.application.Application;import javafx.scene.Scene;import javafx.scene.control.Button;import javafx.scene.layout.FlowPane;import javafx.stage.Stage;public class FlowPaneExample extends Application { @Override public void start(Stage primaryStage) { // 创建FlowPane布局 FlowPane flowPane = new FlowPane(); flowPane.setHgap(10); // 设置水平间距 flowPane.setVgap(10); // 设置垂直间距 // 向FlowPane中添加按钮 for (int i = 1; i <= 10; i++) { Button button = new Button("Button " + i); flowPane.getChildren().add(button); } // 创建场景 Scene scene = new Scene(flowPane, 300, 200); // 设置舞台 primaryStage.setTitle("FlowPane Example"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); }}
在这个示例中,通过创建FlowPane布局,并设置水平和垂直的间距,然后向FlowPane中添加了10个按钮。这些按钮会按照水平方向流动排列,当空间不足时会自动换行。
通过调用setHgap和setVgap方法,可以调整按钮之间的水平和垂直间距。FlowPane的弹性布局使得它适用于需要自适应大小、自动换行的场景,例如标签、按钮等。
HBox类:
特性: HBox按照水平方向排列子节点,子节点之间的间距是固定的。适用于横向排列的控件,如按钮、标签等。
import javafx.application.Application;import javafx.scene.Scene;import javafx.scene.control.Button;import javafx.scene.layout.HBox;import javafx.stage.Stage;public class HBoxExample extends Application { @Override public void start(Stage primaryStage) { // 创建HBox布局 HBox hbox = new HBox(10); // 设置水平间距为10 // 向HBox中添加按钮 for (int i = 1; i <= 5; i++) { Button button = new Button("Button " + i); hbox.getChildren().add(button); } // 创建场景 Scene scene = new Scene(hbox, 300, 200); // 设置舞台 primaryStage.setTitle("HBox Example"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); }}
在这个示例中,通过创建HBox布局,设置水平方向上的按钮之间的间距为10,然后向HBox中添加了5个按钮。这些按钮会按照水平方向排列,间距为10。
通过调用HBox的构造函数,可以设置水平方向上子节点的默认间距。通过getChildren().add(...)方法,可以向HBox中添加子节点,这些子节点将会按照水平方向排列。 HBox布局是一个简单而常用的布局,适用于需要水平排列控件的场景,如工具栏、按钮等。
VBox类:
特性: VBox按照垂直方向排列子节点,子节点之间的间距是固定的。适用于纵向排列的控件,如按钮、标签等。
import javafx.application.Application;import javafx.scene.Scene;import javafx.scene.control.Button;import javafx.scene.layout.VBox;import javafx.stage.Stage;public class VBoxExample extends Application { @Override public void start(Stage primaryStage) { // 创建VBox布局 VBox vbox = new VBox(10); // 设置垂直间距为10 // 向VBox中添加按钮 for (int i = 1; i <= 5; i++) { Button button = new Button("Button " + i); vbox.getChildren().add(button); } // 创建场景 Scene scene = new Scene(vbox, 200, 300); // 设置舞台 primaryStage.setTitle("VBox Example"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); }}
在这个示例中,通过创建VBox布局,设置垂直方向上的按钮之间的间距为10,然后向VBox中添加了5个按钮。这些按钮会按照垂直方向排列,间距为10。
通过调用VBox的构造函数,可以设置垂直方向上子节点的默认间距。通过getChildren().add(...)方法,可以向VBox中添加子节点,这些子节点将会按照垂直方向排列。 VBox布局是一个简单而常用的布局,适用于需要垂直排列控件的场景,如侧边栏、列表等。
BorderPane类:
特性: BorderPane将界面划分为上、下、左、右和中五个区域,每个区域可以放置不同的控件。通常用于构建包含顶部菜单栏、底部状态栏等的界面。
import javafx.application.Application;import javafx.scene.Scene;import javafx.scene.control.Button;import javafx.scene.layout.BorderPane;import javafx.stage.Stage;public class BorderPaneExample extends Application { @Override public void start(Stage primaryStage) { // 创建BorderPane布局 BorderPane borderPane = new BorderPane(); // 向BorderPane的各个区域添加按钮 Button topButton = new Button("Top"); BorderPane.setMargin(topButton, new javafx.geometry.Insets(10, 0, 0, 0)); // 设置上边距 borderPane.setTop(topButton); Button bottomButton = new Button("Bottom"); BorderPane.setMargin(bottomButton, new javafx.geometry.Insets(0, 0, 10, 0)); // 设置下边距 borderPane.setBottom(bottomButton); Button leftButton = new Button("Left"); BorderPane.setMargin(leftButton, new javafx.geometry.Insets(0, 10, 0, 0)); // 设置左边距 borderPane.setLeft(leftButton); Button rightButton = new Button("Right"); BorderPane.setMargin(rightButton, new javafx.geometry.Insets(0, 0, 0, 10)); // 设置右边距 borderPane.setRight(rightButton); Button centerButton = new Button("Center"); borderPane.setCenter(centerButton); // 创建场景 Scene scene = new Scene(borderPane, 300, 200); // 设置舞台 primaryStage.setTitle("BorderPane Example"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); }}
在这个示例中,通过创建BorderPane布局,然后分别向其顶部、底部、左侧、右侧和中心区域添加按钮。使用BorderPane.setMargin(...)方法设置各个按钮的边距,以增加布局的美观性。
BorderPane布局是一种常用的布局,适用于需要将界面划分为上、下、左、右和中心五个区域的场景,如主窗口布局、应用程序框架等。
GridPane类:
特性: GridPane将界面划分为网格,每个网格可以放置一个子节点。通过设置行和列的约束,可以实现复杂的布局。适用于表格状的界面。
import javafx.application.Application;import javafx.geometry.Insets;import javafx.scene.Scene;import javafx.scene.control.Button;import javafx.scene.layout.GridPane;import javafx.stage.Stage;public class GridPaneExample extends Application { @Override public void start(Stage primaryStage) { // 创建GridPane布局 GridPane gridPane = new GridPane(); gridPane.setHgap(10); // 设置水平间距 gridPane.setVgap(10); // 设置垂直间距 gridPane.setPadding(new Insets(10)); // 设置内边距 // 向GridPane中添加按钮 for (int i = 0; i < 3; i++) { for (int j = 0; j < 3; j++) { Button button = new Button("Button " + (i * 3 + j + 1)); GridPane.setRowIndex(button, i); // 设置按钮的行索引 GridPane.setColumnIndex(button, j); // 设置按钮的列索引 gridPane.getChildren().add(button); } } // 创建场景 Scene scene = new Scene(gridPane, 300, 200); // 设置舞台 primaryStage.setTitle("GridPane Example"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); }}
在这个示例中,通过创建GridPane布局,并设置水平和垂直方向上的间距,以及内边距。然后使用两个嵌套的循环向GridPane中添加9个按钮,这些按钮将会按照3x3的网格布局排列。
通过GridPane.setRowIndex(...)和GridPane.setColumnIndex(...)方法,可以设置每个按钮在网格中的行和列索引。GridPane布局是一种适用于表格状界面的布局方式,非常灵活且可用于各种复杂布局需求。
StackPane类:
特性: StackPane按照堆栈的方式排列子节点,最后添加的子节点会显示在最顶层。适用于需要层叠效果的界面。
import javafx.application.Application;import javafx.scene.Scene;import javafx.scene.control.Button;import javafx.scene.layout.StackPane;import javafx.stage.Stage;public class StackPaneExample extends Application { @Override public void start(Stage primaryStage) { // 创建StackPane布局 StackPane stackPane = new StackPane(); // 向StackPane中添加按钮 Button button1 = new Button("Button 1"); Button button2 = new Button("Button 2"); Button button3 = new Button("Button 3"); stackPane.getChildren().addAll(button1, button2, button3); // 创建场景 Scene scene = new Scene(stackPane, 300, 200); // 设置舞台 primaryStage.setTitle("StackPane Example"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); }}
在这个示例中,通过创建StackPane布局,并向其中添加了三个按钮。这些按钮将按照堆栈的方式排列,最后添加的按钮会显示在最顶层。
StackPane布局是一种简单而常用的布局方式,适用于需要将多个控件层叠在一起的场景,例如用于创建按钮组、图层叠加等。
TilePane类:
特性: TilePane将子节点按照平铺的方式排列,可以设置水平和垂直间距。适用于需要规律排列的控件。
import javafx.application.Application;import javafx.scene.Scene;import javafx.scene.control.Button;import javafx.scene.layout.TilePane;import javafx.stage.Stage;public class TilePaneExample extends Application { @Override public void start(Stage primaryStage) { // 创建TilePane布局 TilePane tilePane = new TilePane(); tilePane.setHgap(10); // 设置水平间距 tilePane.setVgap(10); // 设置垂直间距 // 向TilePane中添加按钮 for (int i = 1; i <= 9; i++) { Button button = new Button("Button " + i); tilePane.getChildren().add(button); } // 创建场景 Scene scene = new Scene(tilePane, 300, 200); // 设置舞台 primaryStage.setTitle("TilePane Example"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); }}
在这个示例中,通过创建TilePane布局,并设置水平和垂直方向上的间距,然后向TilePane中添加了9个按钮。这些按钮将按照平铺的方式排列,当空间不足时会自动换行。
TilePane布局是一种常用的布局方式,适用于需要规律排列的场景,例如展示图标、缩略图等。
AnchorPane类:
特性: 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 AnchorPaneExample extends Application { @Override public void start(Stage primaryStage) { // 创建AnchorPane布局 AnchorPane anchorPane = new AnchorPane(); // 向AnchorPane中添加按钮 Button button = new Button("Click me!"); AnchorPane.setTopAnchor(button, 10.0); // 设置按钮距离上边界的距离 AnchorPane.setLeftAnchor(button, 20.0); // 设置按钮距离左边界的距离 AnchorPane.setBottomAnchor(button, 10.0); // 设置按钮距离下边界的距离 AnchorPane.setRightAnchor(button, 20.0); // 设置按钮距离右边界的距离 anchorPane.getChildren().add(button); // 创建场景 Scene scene = new Scene(anchorPane, 300, 200); // 设置舞台 primaryStage.setTitle("AnchorPane Example"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); }}
在这个示例中,通过创建AnchorPane布局,并向其中添加一个按钮。使用AnchorPane.setTopAnchor(...), AnchorPane.setLeftAnchor(...), AnchorPane.setBottomAnchor(...), 和 AnchorPane.setRightAnchor(...) 方法,可以设置按钮相对于AnchorPane边界的位置。
AnchorPane布局是一种适用于需要相对定位的场景,通过设置子节点相对于父容器的边界的距离,实现对子节点位置的精确控制。
以上就是我们经常用到的布局类,后续使用的时候会详细说明。
标签: #javafx网格布局 #javafx pane布局 #javafx布局技巧 #javafx布局详解 #java动态布局