使用JavaFX20内置布局窗格.docx
- 文档编号:18600262
- 上传时间:2023-08-20
- 格式:DOCX
- 页数:13
- 大小:350.18KB
使用JavaFX20内置布局窗格.docx
《使用JavaFX20内置布局窗格.docx》由会员分享,可在线阅读,更多相关《使用JavaFX20内置布局窗格.docx(13页珍藏版)》请在冰点文库上搜索。
使用JavaFX20内置布局窗格
在JavaFX应用中,当然可以通过指定UI元素的位置和大小属性来手动布局。
不过,更简单的方法是使用布局窗格。
JavaFXSDK提高了多种布局容器类(称为窗格)来方便的建立和管理经典布局,如行、列、堆、拼贴等。
由于窗口是可以改变大小的,所以布局窗格会根据其包含的结点自动修改位置和大小。
本文是JavaFX布局窗格的概览,并为每个窗格提供了小例子。
边框窗格BorderPane
BorderPane布局窗格提供了5块放置结点的区域:
顶部、底部、座部、右部、中部。
Figure1-1 是能用该布局窗格创建的布局类型。
区域可以是任意大小的,如果不需要某一块,可以不定义。
Figure1-1SampleBorderPane
Descriptionof"Figure1-1SampleBorderPane"
边框窗格对于经典布局很有用,像顶部的工具栏,底部的状态栏,左边的导航面板,右边的补充信息,中间的工作区。
Example1-1 创建了一个每个区域是有色矩形的边框窗格。
Example1-1CreateaBorderPane
BorderPanelayout=newBorderPane();layout.setTop(newRectangle(200,50,Color.DARKCYAN));layout.setBottom(newRectangle(200,50,Color.DARKCYAN));layout.setCenter(newRectangle(100,100,Color.MEDIUMAQUAMARINE));layout.setLeft(newRectangle(50,100,Color.DARKTURQUOISE));layout.setRight(newRectangle(50,100,Color.DARKTURQUOISE));
水平盒子HBox
HBox 布局窗格提供了一种简单的方法来把一些列结点放进单行里面。
Figure1-2 是一个HBox 窗格的例子。
Figure1-2SampleHBoxPane
Descriptionof"Figure1-2SampleHBoxPane"
Padding属性用来设置结点和HBox的边缘间距离。
Spacing属性用来设置结点间距离。
style用来改变背景色。
Example1-2 创建了一个工具栏的HBox 窗格,里面有两个按钮。
Example1-2CreateanHBoxPane
HBoxhbox=newHBox();hbox.setPadding(newInsets(15,12,15,12));hbox.setSpacing(10);hbox.setStyle("-fx-background-color:
#336699");ButtonbuttonCurrent=newButton("Current");buttonCurrent.setPrefSize(100,20);ButtonbuttonProjected=newButton("Projected");buttonProjected.setPrefSize(100,20);hbox.getChildren().addAll(buttonCurrent,buttonProjected);BorderPaneborder=newBorderPane();border.setTop(hbox);
Example1-2 中的最后一行创建了一个边框布局,并把HBox加入到顶部区域。
结果见 Figure1-3 .
Figure1-3HBoxPaneinaBorderPane
Descriptionof"Figure1-3HBoxPaneinaBorderPane"
垂直盒子VBox
VBox 布局窗格和HBox 布局很类似,区别仅仅是垂直盒子的结点是组织进一列中。
Figure1-4 是一个VBox窗格的例子。
Figure1-4SampleVBoxPane
Descriptionof"Figure1-4SampleVBoxPane"
Padding属性用来设置结点和VBox的边缘间距离。
Spacing属性用来设置结点间距离。
Example1-3 创建了一个选项列表VBox。
Example1-3CreateaVBoxPane
VBoxvbox=newVBox();vbox.setPadding(newInsets(10,10,10,10));vbox.setSpacing(10);Texttitle=newText("Data");title.setFont(Font.font("AmbleCN",FontWeight.BOLD,14));vbox.getChildren().add(title);Textoptions[]=newText[]{newText("Sales"),newText("Marketing"),newText("Distribution"),newText("Costs")};for(inti=0;i<4;i++){vbox.getChildren().add(options[i]);}border.setLeft(vbox);//AddtoBorderPanefrom Example1-2
Example1-3 中最后一行把VBox窗格加入到了边框布局中的左部。
结果见 Figure1-5 .
Figure1-5VBoxPaneinaBorderPane
Descriptionof"Figure1-5VBoxPaneinaBorderPane"
堆栈窗格StackPane
StackPane布局窗格把所有结点放进一个堆栈中,新结点都在前一个结点上面。
该布局模式可以方便地 在形状和图片上叠加文字或将多种简单形状组合成一个复杂形状。
Figure1-6 是一个帮助图标,是将一个问号放在了具有渐变背景的矩形上面。
Figure1-6SampleStackPane
Descriptionof"Figure1-6SampleStackPane"
Example1-4 为帮助图标创建了堆栈窗格。
Example1-4CreateaStackPane
StackPanestack=newStackPane();RectanglehelpIcon=newRectangle(35.0,25.0);helpIcon.setFill(newLinearGradient(0,0,0,1,true,CycleMethod.NO_CYCLE,newStop[]{newStop(0,Color.web("#4977A3")),newStop(0.5,Color.web("#B0C6DA")),newStop(1,Color.web("#9CB6CF")),}));helpIcon.setStroke(Color.web("#D0E6FA"));helpIcon.setArcHeight(3.5);helpIcon.setArcWidth(3.5);TexthelpText=newText("?
");helpText.setFont(Font.font("AmbleCn",FontWeight.BOLD,18));helpText.setFill(Color.WHITE);helpText.setStroke(Color.web("#7080A0"));stack.getChildren().addAll(helpIcon,helpText);stack.setAlignment(Pos.CENTER_RIGHT);//Right-justifynodesinstackHBox.setHgrow(stack,Priority.ALWAYS);//Givestackanyextraspacehbox.getChildren().add(stack);//AddtoHBoxfromExample1-2
Example1-4 的最后一行把堆栈窗格加入到了HBox 中,并且让它永远在最右边。
结果见Figure1-7 .
Figure1-7StackPaneinanHBoxPane
Descriptionof"Figure1-7StackPaneinanHBoxPane"
网格窗格GridPane
GridPane 布局窗格可以灵活的创建放置结点的行和列的网络。
结点可以放在任何网格细胞中,并且需要时还可以跨细胞。
网格窗格用来创建表格或者是任何用行和列组织的布局。
Figure1-8 是一个包含一个图标、小标题、文本和饼图的网格窗格。
在图中,gridLinesVisible 属性用来设置显示网格线以看出行和列。
该属性对于调试GridPane布局很有用。
Figure1-8SampleGridPane
Descriptionof"Figure1-8SampleGridPane"
Gap属性来控制行和列直接的空间。
padding属性来控制结点和网格窗格边缘的距离。
Example1-5 createsthegridpaneshownin Figure1-8 .
Example1-5CreateaGridPane
GridPanegrid=newGridPane();grid.setHgap(10);grid.setVgap(10);grid.setPadding(newInsets(0,0,0,10));//Categoryincolumn2,row1Textcategory=newText("Sales:
");category.setFont(Font.font("Tahoma",FontWeight.BOLD,20));grid.add(category,1,0);//Titleincolumn3,row1TextchartTitle=newText("CurrentYear");chartTitle.setFont(Font.font("Tahoma",FontWeight.BOLD,20));grid.add(chartTitle,2,0);//Subtitleincolumns2-3,row2TextchartSubtitle=newText("GoodsandServices");grid.add(chartSubtitle,1,1,2,1);//Houseiconincolumn1,rows1-2ImageViewimageHouse=newImageView(newImage(LayoutSample.class.getResourceAsStream("graphics/house.png")));grid.add(imageHouse,0,0,1,2);//Leftlabelincolumn1(bottom),row3TextgoodsPercent=newText("Goods\n80%");GridPane.setValignment(goodsPercent,VPos.BOTTOM);grid.add(goodsPercent,0,2);//Chartincolumns2-3,row3ImageViewimageChart=newImageView(newImage(LayoutSample.class.getResourceAsStream("graphics/piechart.png")));grid.add(imageChart,1,2,2,1);//Rightlabelincolumn4(top),row3TextservicesPercent=newText("Services\n20%");GridPane.setValignment(servicesPercent,VPos.TOP);grid.add(servicesPercent,3,2);border.setCenter(grid);//AddtoBorderPanefrom Example1-2
Example1-5 的最后一行把网格布局放到了边框布局的中间。
结果见Figure1-9 .
Figure1-9GridPaneinaBorderPane
Descriptionof"Figure1-9GridPaneinaBorderPane"
由于窗口大小的变化,网格成功的结点会根据布局限制重置大小。
流窗格FlowPane
FlowPane布局窗格中的结点会连续放置在窗格的边界集中。
结点可以垂直流向 (columns)或水平流向(rows)。
垂直流向窗格具有较高的分界线,水平流向窗格具有较宽的分界线。
Figure1-10 是一个使用了数字图标的水平窗格例子。
相反,垂直流向窗格中,第一列会包含1到4,第二列包含5到8。
Figure1-10SampleHorizontalFlowPane
Descriptionof"Figure1-10SampleHorizontalFlowPane"
Gap属性来控制行和列直接的空间。
padding属性来控制结点和网格窗格边缘的距离。
Example1-6 创建了一些列图标的水平流窗格。
Example1-6CreateaFlowPane
FlowPaneflow=newFlowPane();flow.setPadding(newInsets(5,0,5,0));flow.setVgap(4);flow.setHgap(4);flow.setPrefWrapLength(170);//preferredwidthallowsfortwocolumnsflow.setStyle("-fx-background-color:
DAE6F3");ImageViewpages[]=newImageView[8];for(inti=0;i<8;i++){pages[i]=newImageView(newImage(LayoutSample.class.getResourceAsStream("graphics/chart_"+i+".png")));flow.getChildren().add(pages[i]);}border.setRight(flow);//AddtoBorderPanefrom Example1-2
Example1-6 把流窗格放到了边框窗格的右部。
结果是Figure1-11 .
Figure1-11FlowPaneinaBorderPane
Descriptionof"Figure1-11FlowPaneinaBorderPane"
瓦片窗格TilePane
瓦片窗格和流窗格很类似,TilePane 布局窗格中的所有结点都大小相同,放在网格中。
结点可以水平放置(inrows)或垂直放置(incolumns)。
水平放置的瓦片在宽度宽度方向而垂直的在高度方向。
使用prefColumns和prefRows属性来设置瓦片窗格的首选大小。
Gap属性来控制行和列直接的空间。
padding属性来控制结点和网格窗格边缘的距离。
Example1-7 创建了一个水平瓦片窗格,其效果和Figure1-10 相同。
Example1-7CreateaTilePane
TilePanetile=newTilePane();tile.setPadding(newInsets(5,0,5,0));tile.setVgap(4);tile.setHgap(4);tile.setPrefColumns
(2);tile.setStyle("-fx-background-color:
DAE6F3");ImageViewpages[]=newImageView[8];for(inti=0;i<8;i++){pages[i]=newImageView(newImage(LayoutSample.class.getResourceAsStream("graphics/chart_"+i+".png")));tile.getChildren().add(pages[i]);}
锚窗格AnchorPane
AnchorPane 布局窗格用来在窗格的上下左右中固定结点。
当窗口大小改变时,结点会维持它们原来的相对位置。
一个结点可以赋予多个位置,一个位置也可以赋予多个结点。
Figure1-12 是一个锚窗格,网格窗格在顶部,有两个按钮的HBox窗格在底部偏右。
Figure1-12SampleAnchorPane
Descriptionof"Figure1-12SampleAnchorPane"
Example1-8 照上面创建了一个锚窗格。
Example1-8CreateanAnchorPane
AnchorPaneanchorpane=newAnchorPane();ButtonbuttonSave=newButton("Save");ButtonbuttonCancel=newButton("Cancel");HBoxhbox=newHBox();hbox.setPadding(newInsets(0,10,10,10));hbox.setSpacing(10);hbox.getChildren().addAll(buttonSave,buttonCancel);anchorpane.getChildren().addAll(grid,hbox);//Addgridfrom Example1-5AnchorPane.setBottomAnchor(hbox,8.0);AnchorPane.setRightAnchor(hbox,5.0);AnchorPane.setTopAnchor(grid,10.0);border.setCenter(anchorpane);//AddtoBorderPanefromExample1-2
Example1-8 最后一行把锚窗格放在了边框窗格中间,取代了先前的结点。
结果见Figure1-13 .
Figure1-13AnchorPaneinaBorderPane
Descriptionof"Figure1-13AnchorPaneinaBorderPane"
当窗口大小改变时,结点会维持它们原来的相对位置。
Figure1-14 在按钮在底部,当窗口变低时,按钮也向上移动了。
Figure1-14ResizedAnchorPane
Descriptionof"Figure1-14ResizedAnchorPane"
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 使用 JavaFX20 内置 布局