首页 > 代码库 > [译]JavaFX 2.0+系列教程-使用内置的布局面板(6)-网格面板(GridPane)

[译]JavaFX 2.0+系列教程-使用内置的布局面板(6)-网格面板(GridPane)

[译]JavaFX 2.0+系列教程-使用内置的布局面板(6)-网格面板(GridPane)

网格面板 GridPane 使你可以创建灵活的基于行和列的网格来放置节点。节点可以放在任意一个单元格中。如果你需要的话,你也可以设置一个节点跨越多个单元格(行或者列)。网格面板对于创建表单或者其他以行和列来组织的界面来说是非常有用的。

图 1-8 显示了一个网格面板,它包含了一个图标、标题、子标题、文本和一个饼状图。在图中,属性 gridLinesVisible 被用来设置显示网格线,它能展示出行和列的分隔及其之间的间隙。这个属性在帮你可视化调试网格面板非常有用。

图 1-8 简单的网格面板示例

 

间隙属性(Gap)用来控制行和列之间的间隙。内边距属性(Padding)用来设置节点元素和网格面板边缘的距离。垂直(Vertical)和水平(Horizontal)对齐属性(Alignment)能够控制单元格中的每个控件的对齐方式。

代码片段 例 1-5 创建了如上图所示的网格面板

例 1-5 创建网格面板

public GridPane addGridPane() {    GridPane grid = new GridPane();    grid.setHgap(10);    grid.setVgap(10);    grid.setPadding(new Insets(0, 10, 0, 10));    // 将category节点放在第一行,第二列    Text category = new Text("Sales:");    category.setFont(Font.font("Arial", FontWeight.BOLD, 20));    grid.add(category, 1, 0);     // 将chartTitle节点放在第一行,第三列    Text chartTitle = new Text("Current Year");    chartTitle.setFont(Font.font("Arial", FontWeight.BOLD, 20));    grid.add(chartTitle, 2, 0);    // 将chartSubtitle节点放在第二行,占第二和第三列    Text chartSubtitle = new Text("Goods and Services");    grid.add(chartSubtitle, 1, 1, 2, 1);    // 将House图标放在第一列,占第一和第二行    ImageView imageHouse = new ImageView(      new Image(LayoutSample.class.getResourceAsStream("graphics/house.png")));    grid.add(imageHouse, 0, 0, 1, 2);     // 将左边的标签goodsPercent放在第三行,第一列,居下    Text goodsPercent = new Text("Goods\n80%");    GridPane.setValignment(goodsPercent, VPos.BOTTOM);    grid.add(goodsPercent, 0, 2);     // 将饼图放在第三行,占第二和第三列    ImageView imageChart = new ImageView(     new Image(LayoutSample.class.getResourceAsStream("graphics/piechart.png")));    grid.add(imageChart, 1, 2, 2, 1);     // 将右边的标签servicesPercent放在第三行,第四列,居上    Text servicesPercent = new Text("Services\n20%");    GridPane.setValignment(servicesPercent, VPos.TOP);    grid.add(servicesPercent, 3, 2);    return grid;}

在前几篇中的代码片段 例 1-1 的 setCenter() 方法将上面创建的网格面板添加到了边框面板的中间区域中。整个运行结果如 图 1-9 所示.

图 1-9 将网格面板放在边框面板中的效果

Description of Figure 1-9 follows 

当窗口大小变化时,网格面板中的节点将会根据其自身的布局设置自动的适应大小变化。