FlowPane(水平流动,自动换行布局)
HBox(水平布局,不换行)
VBox
(垂直布局,不换行)
BorderPane (顶部,底部,左侧,右侧,中心,如下实例图)
GridPane(网格布局)
ScrollPane(滚动条,布局)
TitledPane
(登录框,表单常用,自行看效果,代码)
Accordion (手风琴,导航卡,下拉框布局)
推荐社区(布局总结):https://cloud.tencent.com/developer/article/1386264?from=14588
1- FlowPane布局
FlowPane
是一个容器。它在一行上排列连续的子组件,并且如果当前行填满了以后,则自动将子组件向下推到下一行。
实列:
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.FlowPane;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
FlowPane root = new FlowPane();
root.setHgap(10);
root.setVgap(20);
root.setPadding(new Insets(15,15,15,15));
// 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("FlowPane Layout Demo");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
二:HBox(水平布局)
示例2:以下代码向HBox添加了四个矩形,设置了HBox约束,并演示了HBox布局控件的许多间距属性。矩形节点不可调整大小。
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class Main extends Application {
public static void main(String[] args) {
Application.launch(args);
}
@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("");
Group root = new Group();
Scene scene = new Scene(root, 300, 250, Color.WHITE);
HBox hbox = new HBox(8);// space
Button button1 = new Button("Add ");
Button button2 = new Button("Remove ");
HBox.setHgrow(button1, Priority.ALWAYS);
HBox.setHgrow(button2, Priority.ALWAYS);
button1.setMaxWidth(Double.MAX_VALUE);
button2.setMaxWidth(Double.MAX_VALUE);
hbox.getChildren().addAll(button1, button2);
hbox.setPrefWidth(400);
root.getChildren().add(hbox);
primaryStage.setScene(scene);
primaryStage.show();
}
}
//更多请阅读:https://www.yiibai.com/javafx/javafx_hbox.html
三:VBox(垂直布局)
VBox布局将子节点堆叠在垂直列中。新添加的子节点被放置在上一个子节点的下面。默认情况下,VBox尊重子节点的首选宽度和高度
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(final Stage stage) {
stage.setTitle("HTML");
stage.setWidth(500);
stage.setHeight(500);
Scene scene = new Scene(new Group());
VBox vbox = new VBox(8); // spacing = 8
vbox.getChildren().addAll(new Button("Cut"), new Button("Copy"), new Button("Paste"));
scene.setRoot(vbox);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
四:BorderPane 布局
实例:
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class Main extends Application {
public static void main(String[] args) {
Application.launch(args);
}
@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("BorderPane Test");
BorderPane bp = new BorderPane();
bp.setPadding(new Insets(10, 20, 10, 20));
Button btnTop = new Button("Top");
bp.setTop(btnTop);
Button btnLeft = new Button("Left");
bp.setLeft(btnLeft);
Button btnCenter = new Button("Center");
bp.setCenter(btnCenter);
Button btnRight = new Button("Right");
bp.setRight(btnRight);
Button btnBottom = new Button("Bottom");
bp.setBottom(btnBottom);
Scene scene = new Scene(bp, 300, 200);
primaryStage.setScene(scene);
primaryStage.show();
}
}
五:GridPane
通常用于布局:第一列上的只读标签的输入表单和第二列上的输入字段。
GridPane可以在行,列或单元格级别指定约束。
例如,我们可以设置包含输入文本字段的第二列,以在窗口调整大小时调整大小。
+------------------------+
| [label ] [ field ] |
| [label ] [ field ] |
| [ button ] |
+------------------------+
实例:
import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class Main extends Application {
public static void main(String[] args) {
Application.launch(args);
}
@Override
public void start(Stage primaryStage) {
BorderPane root = new BorderPane();
Scene scene = new Scene(root, 380, 150, Color.WHITE);
// @ w WW .yII b a I .c O m
GridPane gridpane = new GridPane();
gridpane.setPadding(new Insets(5));
gridpane.setHgap(5);
gridpane.setVgap(5);
ColumnConstraints column1 = new ColumnConstraints(100);
ColumnConstraints column2 = new ColumnConstraints(50, 150, 300);
column2.setHgrow(Priority.ALWAYS);
gridpane.getColumnConstraints().addAll(column1, column2);
Label fNameLbl = new Label("First Name");
TextField fNameFld = new TextField();
Label lNameLbl = new Label("Last Name");
TextField lNameFld = new TextField();
Button saveButt = new Button("Save");
// First name label
GridPane.setHalignment(fNameLbl, HPos.RIGHT);
gridpane.add(fNameLbl, 0, 0);
// Last name label
GridPane.setHalignment(lNameLbl, HPos.RIGHT);
gridpane.add(lNameLbl, 0, 1);
// First name field
GridPane.setHalignment(fNameFld, HPos.LEFT);
gridpane.add(fNameFld, 1, 0);
// Last name field
GridPane.setHalignment(lNameFld, HPos.LEFT);
gridpane.add(lNameFld, 1, 1);
// Save button
GridPane.setHalignment(saveButt, HPos.RIGHT);
gridpane.add(saveButt, 1, 2);
root.setCenter(gridpane);
primaryStage.setScene(scene);
primaryStage.show();
}
}
六:ScrollPane
可滚动条。
实例:
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
Group root = new Group();
Scene scene = new Scene(root, 500, 200);
stage.setScene(scene);// => w w W .Y I I B A I .c O M
Rectangle rect = new Rectangle(200, 200, Color.RED);
ScrollPane s1 = new ScrollPane();
s1.setPannable(true);
s1.setPrefSize(120, 120);
s1.setContent(rect);
root.getChildren().add(s1);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
七:TitledPane
标题窗格是具有标题的面板,窗格可以打开和关闭。我们可以添加节点(如UI控件或图像)和一组元素到窗格。
实例:
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.TitledPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class Main extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage stage) {
Scene scene = new Scene(new Group(), 450, 250);
TitledPane titledPane = new TitledPane("我的标题", new CheckBox("确定?"));
titledPane.setCollapsible(false);// remove closing action
titledPane.setAnimated(false);// stop animating
HBox hbox = new HBox(10);
hbox.setPadding(new Insets(20, 0, 0, 20));
hbox.getChildren().setAll(titledPane);
Group root = (Group) scene.getRoot();
root.getChildren().add(hbox);
stage.setScene(scene);
stage.show();
}
}
下拉框实例:
package fx.com;
import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.NodeOrientation;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TitledPane;
import javafx.scene.image.ImageView;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class Main4 extends Application{
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage arg0) throws Exception {
// TODO 自动生成的方法存根
Group group=new Group();
Scene scene=new Scene(group);
VBox vBox = new VBox(new Button("Button1"), new Button("Button2"), new Button("Button3"));
TitledPane titledPane1 = new TitledPane("TitledPane1", vBox);
//图标方位
titledPane1.setNodeOrientation(NodeOrientation.RIGHT_TO_LEFT);
VBox vBox2 = new VBox(new Button("Button4"), new Button("Button5"), new Button("Button6"));
TitledPane titledPane2 = new TitledPane();
titledPane2.setText("TitledPane2");
titledPane2.setContent(vBox2);
//默认是否展开
titledPane2.setExpanded(true);
//禁用动画
titledPane2.setAnimated(false);
//禁用点击展开收起
titledPane2.setCollapsible(true);
//设置图标
titledPane2.setGraphic(new ImageView("image\\stash.png"));
//展开收起监听
titledPane2.expandedProperty().addListener(new ChangeListener<Boolean>() {
@Override
public void changed(ObservableValue<? extends Boolean> observable, Boolean oldValue, Boolean newValue) {
System.out.println("observable = " + observable + ", oldValue = " + oldValue + ", newValue = " + newValue);
}
});
group.getChildren().addAll(vBox,titledPane2);
arg0.setHeight(800);
arg0.setWidth(800);
arg0.setScene(scene);
arg0.show();
}
}
八:Accordion
可以使用手风琴(accordion)控件对标题窗格进行分组。
实例:
import javafx.application.Application;
import javafx.beans.value.ObservableValue;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Accordion;
import javafx.scene.control.Button;
import javafx.scene.control.TitledPane;
import javafx.stage.Stage;
public class Main extends Application {
public static void main(String[] args) {
Application.launch(args);
}
@Override
public void start(Stage primaryStage) {
Group g = new Group();
Scene scene = new Scene(g, 550, 250);
TitledPane t1 = new TitledPane("T1", new Button("B1"));
TitledPane t2 = new TitledPane("T2", new Button("B2"));
TitledPane t3 = new TitledPane("T3", new Button("B3"));
Accordion accordion = new Accordion();
accordion.getPanes().addAll(t1, t2, t3);
accordion.expandedPaneProperty()
.addListener((ObservableValue<? extends TitledPane> ov, TitledPane old_val, TitledPane new_val) -> {
if (new_val != null) {
System.out.println(accordion.getExpandedPane().getText());
}
});
g.getChildren().add(accordion);
// copyright wW W.YI I BA i.c O m
primaryStage.setScene(scene);
primaryStage.show();
}
}