第九节，JavaFX布局总结

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();
    }
}