在java fx中网格布局,javaFX基础知识

javaFX介绍

javafx是用于构建富互联网应用程序的java库。使用javaFX开发的应用程序可以在各种设备上运行，如台式计算机、手机、电脑、平板电脑等。

可以使用javaFX和基于JVM的技术，如java、groovy和jruby。

javaFX的特性

功能

说明

java语言编写

javaFX库都是java编写的，可以用于JVM执行的语言。

FXML

一个类似声明式标记语言HTML，唯一目的是定义用户界面

Scene Builder

可单独或集成到IDE中，用户可访问拖放设计界面，用于开发FXML

Swing互操作性

可以使用Swing Node类嵌入Swing内容，同样可食用FX功能更新Swing

内置UI控件

使用它可以开发一个全功能的应用程序

类似CSS的样式

提供类似样式CSS。

画布和打印API

提供了Canvas，即时模式演示的渲染API。

丰富的API集合

提供了一组丰富的API来开发GUI应用程序，2D和3D图形

集成图形库

为2D和3D图形提供类

图形管道

支持硬件加速图形管道(Prism)的图形，当与图形卡或GPU使用时，提供平滑的图形，如果系统不支持图形卡，则棱镜默认渲染栈

程序界面的介绍

image.png

public final class ButtonDemo extends Application {

@Override

public void start(Stage stage) {

FlowPane main = new FlowPane();

main.getChildren().add(new Button("Java Button"));

..

StackPane pane = new StackPane();

pane.getChildren().add(main);

StackPane.setMargin(main, new Insets(100));

pane.setStyle("-fx-background-color:WHITE");

final Scene scene = new Scene(pane, 800, 200);

scene.getStylesheets().add(ButtonDemo.class.getResource("/css/jfoenix-components.css").toExternalForm());

stage.setTitle("JFX Button Demo");

stage.setScene(scene);

stage.show();

}

public static void main(String[] args) {

launch(args);

}

}

布局

介绍SDK中容器相关类，我们称之为面板。我们可以为每个界面元素设置位置和大小进行手动布局。然而，更简单的使用布局面板。比如行(行)、列(Column)、堆栈(Stack)、瓷砖(Tile)等。当窗口变化时，布局面板根据元素属性重新设置位置和大小。

边框面板(BorderPane)

划分5个区域，每个区域的大小是没有限制，区域不设置内容不显示。多应用经典菜单布局

多输出空间默认分配中间区域，不足根据设置先后顺序覆盖。

例，

BorderPane border =new BorderPane();

HBox hbox=addHBox();

border.setTop(hbox);

border.setLeft(addVBox());

addStackPane(hbox);

border.setCenter(addGridPane());

border.setRight(addFlowpane());

水平盒子(HBox)

将多个节点排列在一行中提供一个简单的方法。

设置内边距(padding)属性可以用于管理节点到HBox边缘的距离。设置间距(spcing)管理元素之间的距离。设置style可改变背景颜色。

public HBox addHBox(){

HBox hbox=new HBox();

hbox.setPadding(new Insets(15,12,15,12));

hbox.setSpacing(10);

hbox.setStyle("-fx-background-color:#336699;");

Button buttonCurrent=new Button("Current");

buttonCurrent.setPrefSize(100,20);

hbox.getChildren().add(buttonCurrent);

return hbox;

}

垂直盒子(VBox)

和HBox和相似，节点排成一列。

设置外边距(Marrgin)属性可以为单个空间周围增加额外的空间。

public VBox addVBox(){

VBox vbox=new VBox();

Hyperlink options[]=new Hyperlink[]{

new Hyperlink("sales"),

new Hyperlink("Marketing")

}

for(int i=0;i<2;i++){

VBox.setMargin(options[i],new Insets(0,0,0,8));

vbox.getChildren().add(options[i]);

}

return vbox;

}

堆栈面板(StackPane)

将所有节点放在一个堆栈中进行布局管理，后添加的覆盖之前的。

可以通过设置对齐属性(Alignment)来控制子节点在StackPane中的位置，会影响所有节点，设置外边距属性(Margin)可以控制在面板中单个子节点的位置。

public void addStackPane(Hbox hb){

StackPane stack=new StackPane();

Rectangle helpIcon=new Rectangle(30.0,25.0);

helpIcon.setFill(new LinearGradient(0,0,0,1,true,CycleMethod.NO_CYLE,

new Stop[]{

new Stop(0,Color.web("#4977A3")),

new Stop(0.5,Color.web("#B0C6DA")),

new Stop(1,Color.web("#D0E6FA")),}));

helpIcon.setStroke(Color.web("#D0E6FA"));

helpIcon.setArcHeight(3.5);

helpIcon.setArcWidth(3..5);

Text helpText=new Text("?");

stack.getChildren().addAll(helpIcon,helpText);

stack.setAlignment(Pos.CENTER_RIGHT);

StackPane.setMargin(helpText,new Insets(0,10,0,0));

hb.getChildren().add(stack);

HBox.setHgrow(stack,Priority.ALWAYS); //将HBox水平所有剩余空间都给stack

}

网格面板(GridPane)

可以创建基于行和列的网格放置节点。创建表单等其他基于行列组织的界面非常有用。

属性gridLinesVisible被用来显示网格线，调试时非常有用。设置间隙属性(Gap)用来管理行和列之间的距离。设置内边距属性(Padding)来管理节点元素与边缘之间的距离，设置垂直(Vertical)和水平(Horizontal)对齐属性(Alignment)能够控制单元格各空间的对齐方式。当窗口变化时，网格面板的节点会根据其自身的布局设置自动适应大小变化。

public GridPane addGridPane(){

GridPane grid =new GridPane();

grid.setHgap(10);

grid.setVgap(10);

grid.setPadding(new Insets(0,10,0,10));

Text category=new Text("Sales:");

category.setFont(Font.font("Arial",FontWeight.BOLD,20));

grid.add(category,1,0);

...

ImageView imageChart =new ImageView(new Image(LayoutSample.class.getResourceAsStream("grid/1.png")));

grid.add(imageChart,1,2,2,1); //将饼图放在第三行，站第二和第三列

Text servicesPercent =new Text("Services\n20%");

GridPane.setValignment(servicePercent,Vpos.TOP);

grid.add(servicesPercent,3,2);

return grid;

}

流面板(Flowpane)

面板中包括的节点会连续的平铺防止，并且在边界处自动换行(列)。

设置间隙属性(Gap)用于管理行和列之间的距离，设置边距属性(Padding)用于管理节点元素边缘之间的距离。

public FlowPane addFlowPane(){

Flowpane flow = new FlowPane();

flow.setPadding(new Insets(5,0,5,0));

flow.setVgap(4);

flow.setHgap(4);

flow.setPrefWrapLength(170); // 预设FlowPane的宽度

flow.setStyle("-fx-background-color:DAE6F3;");

ImageView pages[] =new ImageView[8];

for(int i=0；i<8;i++){

pages[i]=new ImageView(new Image(LayoutSample.class.getResourceAsStream("graphics/chart_"+(i+1)+".png")));

flow.getChildren().add(pages[i]);

}

return flow;

}

瓷砖面板(TilePane)

和FlowPane很相似。将节点都放在一个网格中，其中网格大小一样的。

使用prefColumns 和prefRows属性可以设定TilePae的首选大小。设置间隙属性(Gap)用来管理行和列之间的间距。设置内边属性(padding)设置管理节点元素间的距离。

TilePane tile=new TilePane();

tile.setPadding(new Insets(5,0,5,0));

tile.setVgap(4);

tile.setHgap(4);

tile.setPrefColumns(2);

tile.setStyle("-fx-background-color:DAE6F3;");

ImageView pages[]=new ImageView[8];

for(int i=0;i<8;i++){

pages[i] =new ImageView(new Image(LayoutSample.class.getResourceAsStream("

grap/char_"+(i+1)+".png")));

tile.getChildren().add(pages[i]);

}

锚点面板(AnchorPane)

可以让节点锚定到面板的顶部、底部、左边、右边或者中间的位置。当窗体变化时，节点会保持与宝典之间的相对位置。一个节点可以锚定一个或多个位置，并个多个节点可以锚定同一个位置。

public AnchorPane addAnchorPane(GridPane grid){

AnchorPane anchorpane =new AnchorPane();

Button buttonSave =new Button("Save");

Button buttonCancel =new Button("Cancel");

HBox hb=new HBox();

hb.setPadding(new Insets(0,10,10,10));

hb.setSpacing(10);

hb.getChildren().add(grid,hb);

AnchorPane.setBottomAnchor(hb,8.0);

AnchorPane.setRightAnchor(hb,5.0);

AnchorPane.setTopAnchor(grid,10.0);

return anchorpane;

}

参考