/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package mystackpane;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
/**
*
* @author liulufei
*/
public class MyStackPane extends Application {
@Override
public void start(Stage primaryStage) {
//浮动布局,从左到右从上到下
FlowPane pane = new FlowPane();
//堆叠式布局,后方的会隐藏先放的
//StackPane pane = new StackPane();
//向窗格里添加按钮
pane.getChildren().add(new Button("click me"));
pane.getChildren().add(new Button("No click me"));
//生成一个新的场景
Scene scene = new Scene(pane, 200, 200);
//设置标题
primaryStage.setTitle("pane Example");
//设置场景
primaryStage.setScene(scene);
//显示
primaryStage.show();
}
/**
* @param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
1.StackPane 的用途
StackPane中的节点是一个堆叠在一个上,利用这种特点我们可以把一张图片做背景图,其它结点,例如:按钮,把按钮放在图片上。
package com.mycompany.teststackpane;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
/**
* JavaFX App
*/
public class App extends Application {
@Override
public void start(Stage stage) {
stage.setTitle("测试StackPane");
StackPane root = new StackPane();
Scene scene = new Scene(root);
//放一个背景图片
Image image = new Image("file:/Users/liulufei/NetBeansProjects/myImage/src/main/java/com/mycompany/myimage/test.gif",
500D,500D,true,false);
ImageView imageView = new ImageView(image);
root.getChildren().add(imageView);
//放一个按钮
Button btn = new Button("按钮");
root.getChildren().add(btn);
stage.setScene(scene);
stage.show();
}
}
效果图
stackPane的用途2:通过StackPane 创建特殊的图形,使图形之间彼此堆叠组成新的背景图片
package com.mycompany.teststackpane;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
/**
* JavaFX App
*/
public class App extends Application {
@Override
public void start(Stage stage) {
stage.setTitle("测试StackPane");
StackPane root = new StackPane();
Scene scene = new Scene(root);
//放一个背景图片
Image image = new Image("file:/Users/liulufei/NetBeansProjects/myImage/src/main/java/com/mycompany/myimage/test.gif",
500D,500D,true,false);
ImageView imageView = new ImageView(image);
root.getChildren().add(imageView);
// //放一个按钮
// Button btn = new Button("按钮");
// root.getChildren().add(btn);
for(int i = 0; i < 8 ; i++)
{
Rectangle rectangle = new Rectangle(50,200);
rectangle.setStroke(Color.BLACK);
rectangle.setFill(Color.RED);
rectangle.setRotate(i*45);
root.getChildren().add(rectangle);
}
stage.setScene(scene);
stage.show();
}
}
效果图
2.FlowPane
如果改变窗口大小最右边的就被挤下去了
在缩小中间的也被挤下去了
2.1FolowPane中常用的属性
alignment - 对齐方式-使布局与宽度或者高度对齐
orientation - 布局 水平或者垂直优先
hgap - 节点之间的水平间隙
vgap - 节点之间的垂直间隙
如果使用另一个FlowPane的构造函数
FlowPane flowPane = new FlowPane(Orientation.VERTICAL);
则默认是垂直浮动
以上两个示例中有很大一部分空白。这是因为,默认情况下,alignment属性设置为Pos.TOP _ LEFT。
Pos还有很多种对齐方式
使用Pos.BOTTOM_CENTER效果
还可以通过构造函数设置行宽和间距
//节点之间的水平间隙为10像素,垂直间隙为20像素
FlowPane flowPane = new FlowPane(10,20);
//既包括对齐点,又包括水平间隙和行距
FlowPane flowPane = new FlowPane(Orientation.VERTICAL, 10,20);
浮动布局的问题
浮动布局会由于用户调整窗口大小从而导致布局发生错乱。为了解决这个问题,Stage类中有一个resizable属性,它可以禁用用户调整窗口大小。
//禁止用户调整窗口大小,从而防止内容发生错乱
stage.setResizable(false);
3.GridPane布局
网格布局
网格窗格布局管理器为程序员要放置的节点提供了一个位置网格。网格窗格对象没有严格的行和列数,但是知道哪些对象已放置在网格中,因此可以相应地调整布局。将节点添加到“网格窗格”对象后,必须确定它们在网格中的位置。这可以通过默认设置或调用方法设置位置来完成。
package com.mycompany.testgridpane;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.GridPane;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
/**
* JavaFX App
*/
public class App extends Application {
@Override
public void start(Stage stage) {
GridPane gridPane = new GridPane();
Scene scene = new Scene(gridPane);
Circle circle1 = new Circle(30);
Circle circle2 = new Circle(30);
Circle circle3 = new Circle(30);
Circle circle4 = new Circle(30);
gridPane.add(circle1, 0, 0);
gridPane.add(circle2, 0, 1);
gridPane.add(circle3, 0, 2);
gridPane.add(circle4, 1, 1);
stage.setScene(scene);
stage.show();
}
}
效果
有关此代码的一些重要点:
1.水平和垂直维度上的网格位置都像Java数组一样从位置0开始。
2.我们并未将节点放置在所有可能的位置,有些位置是空的。
3.我们不必在窗格对象上调用get Children()即可添加节点。从网格窗格对象直接调用add()方法。
package com.mycompany.testgridpane;
import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.geometry.Pos;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.layout.GridPane;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
/**
* JavaFX App
*/
public class App extends Application {
@Override
public void start(Stage stage) {
GridPane gridPane = new GridPane();
Scene scene = new Scene(gridPane);
Circle circle1 = new Circle(30);
Circle circle2 = new Circle(50);
Circle circle3 = new Circle(30);
Circle circle4 = new Circle(30);
gridPane.add(circle1, 0, 0);
gridPane.add(circle2, 0, 1);
gridPane.add(circle3, 0, 2);
gridPane.add(circle4, 1, 1);
//设置居中点
gridPane.setAlignment(Pos.CENTER);
//设置circle1的在方格中的对齐点
gridPane.setHalignment(circle1,HPos.RIGHT);
//设置circle2的在方格中的对齐点
gridPane.setValignment(circle2,VPos.BOTTOM);
//设置水平间隙
gridPane.setHgap(20);
//设置垂直间隙
gridPane.setVgap(50);
stage.setScene(scene);
stage.show();
}
}
效果图
BorderPane