java基础：10.3 Java FX之布局面板

JavaFX 提供了多种类型的面板，用于在一个容器中组织节点。

每个面板包含一个列表用于容纳面板中的节点，可以通过面板的getChildrenO 方法得到。

使用add(node)方法或者addAll(node1,node2,...)方法把节点添加到面板。

i) FlowPane

水平或者垂直放置节点的方式。

1.设置面板

    FlowPane flowpane = new FlowPane();
    flowpane.setPadding(new Insets(30, 15, 20, 15));
    flowpane.setHgap(30);  // Horizontal spacing between nodes
    flowpane.setVgap(50);  // Vertical spacing between nodes

2.添加节点。

    flowpane.getChildren().addAll(new Label("first name:"),new TextField(),new Label("MI:"));
    TextField tfMi = new TextField();
    tfMi.setPrefColumnCount(1);
    flowpane.getChildren().addAll(tfMi,new Label("last name:"),new TextField());
    flowpane.getChildren().addAll(bt_yes, bt_no,circle1,label);  

3 将面板加人到场景中，将场景设置到舞台中并显示该舞台

    primaryStage.setTitle("ShowFlowPane");
    primaryStage.setScene(scene1);     // place the scene in the stage
    primaryStage.show();

4 结果

假设希望将对象tfMi 加人到一个面板10 次；是否会有10 个文本域出现在面板中呢？不会，像文本域这样的节点只能加到一个面板中一次。将一个节点加入到一个面板中多次或者不同面板中将引起运行时错误。

一个节点只能放在一个面板中。因此，面板和节点的关系是组合关系。

ii) GridPane

GridPane 将节点布局在一个网格（矩阵）中。节点放在一个指定的列和行索引中。

    GridPane gridpane = new GridPane();
    gridpane.setAlignment(Pos.CENTER);   //居中对齐
    gridpane.setPadding(new Insets(11.5,12.5,13.5,14.5));
    gridpane.setHgap(6);
    gridpane.setVgap(6);
    
    gridpane.add(new Label("First name :"), 0, 0);  // columnindex, rowindex
    gridpane.add(new TextField(), 1, 0);
    gridpane.add(new Label("MI :"), 0, 1);
    gridpane.add(new TextField(), 1, 1);    
    gridpane.add(new Label("Last name :"), 0, 2);
    gridpane.add(new TextField(), 1, 2);
    Button btAdd = new Button("Add name");
    gridpane.add(btAdd, 1, 3);
    GridPane.setHalignment(btAdd, HPos.RIGHT);

iii)  BorderPane

BorderPane 可以将节点放置在五个区域：顶部、底部、左边、右边以及中间，分别使用setTop(node)、setBottom(node)、setLeft(node)、setRight(node)和setCenter(node)方法.

public class MyJavaFX extends Application {
	
    @Override // Override the start method in the Application class
    public void start(Stage primaryStage) {     //set a primary stage
    
    BorderPane borderpane = new BorderPane();
    borderpane.setTop(new CustomPane("Top"));
    borderpane.setRight(new CustomPane("right"));
    borderpane.setLeft(new CustomPane("left"));
    borderpane.setCenter(new CustomPane("Center"));
    
    
    Scene scene1 = new Scene(borderpane, 500, 500);   // create a scene   
    primaryStage.setTitle("ShowBorderdPane");
    primaryStage.setScene(scene1);     // place the scene in the stage
    primaryStage.show();
    
    }
}
    
    
    class CustomPane extends StackPane{
    	public CustomPane (String title) {
    		getChildren().add(new Label(title));
    		setStyle("-fx-border-color:red");
    		setPadding(new Insets(12,13,14,15));
    	}
}

结果

iv)  HBox 和 VBox

HBox 将它的子节点（ children) 布局在单个水平行中。VBox 将它的子节点布局在单个垂直列中。回忆下FlowPane 可以将它的子节点布局在多行或者多列中，但是一个HBox 或者VBox 只能把子节点布局在一行或者一列中

// FlowPane example code 

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.stage.Stage;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.FontPosture;
import javafx.scene.text.FontWeight;
import javafx.geometry.Insets;

public class MyJavaFX extends Application {
	
    @Override // Override the start method in the Application class
    public void start(Stage primaryStage) {     //set a primary stage
    
    FlowPane flowpane = new FlowPane();
    flowpane.setPadding(new Insets(30, 15, 20, 15));
    flowpane.setHgap(30);  // Horizontal spacing between nodes
    flowpane.setVgap(50);  // Vertical spacing between nodes
    
    // create 2 button
    Button bt_yes = new Button("yes");
    bt_yes.setPrefSize(100, 20);
    bt_yes.setRotate(30);     
    bt_yes.setStyle("-fx-border-color:blue;");
    
    Button bt_no = new Button("NO!!!");
    bt_no.setPrefSize(100, 20);
    bt_no.setRotate(-30);
   
    // create a circle
    Circle circle1 = new Circle();
    circle1.setRadius(50);
    circle1.setStroke(Color.KHAKI);
    circle1.setFill(Color.AQUAMARINE);
    
    // create label node   
    Label label = new Label("world");
    label.setFont(Font.font("Times New Roman",FontWeight.BOLD,FontPosture.ITALIC,20));
    
    //text node
    flowpane.getChildren().addAll(new Label("first name:"),new TextField(),new Label("MI:"));
    TextField tfMi = new TextField();
    tfMi.setPrefColumnCount(1);
    flowpane.getChildren().addAll(tfMi,new Label("last name:"),new TextField());
    flowpane.getChildren().addAll(bt_yes, bt_no,circle1,label);  
        
    
    // create a scene ,and add the scene to stage
    Scene scene1 = new Scene(flowpane, 500, 500);   // create a scene   
    primaryStage.setTitle("ShowFlowPane");
    primaryStage.setScene(scene1);     // place the scene in the stage
    primaryStage.show();
   }
}

// gridpane example code
public class MyJavaFX extends Application {
	
    @Override // Override the start method in the Application class
    public void start(Stage primaryStage) {     //set a primary stage
 
    GridPane gridpane = new GridPane();
    gridpane.setAlignment(Pos.CENTER);   //居中对齐
    gridpane.setPadding(new Insets(11.5,12.5,13.5,14.5));
    gridpane.setHgap(6);
    gridpane.setVgap(6);
    
    gridpane.add(new Label("First name :"), 0, 0);  // columnindex, rowindex
    gridpane.add(new TextField(), 1, 0);
    gridpane.add(new Label("MI :"), 0, 1);
    gridpane.add(new TextField(), 1, 1);    
    gridpane.add(new Label("Last name :"), 0, 2);
    gridpane.add(new TextField(), 1, 2);
    Button btAdd = new Button("Add name");
    gridpane.add(btAdd, 1, 3);
    GridPane.setHalignment(btAdd, HPos.RIGHT);

    Scene scene1 = new Scene(gridpane, 500, 500);   // create a scene   
    primaryStage.setTitle("ShowGridPane");
    primaryStage.setScene(scene1);     // place the scene in the stage
    primaryStage.show();
    
    }
}