首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

(通译)第二十九回 使用JavaFX2.0内置布局窗格

2012-08-28 
(翻译)第二十九回 使用JavaFX2.0内置布局窗格原文地址http://download.oracle.com/javafx/2.0/layout/buil

(翻译)第二十九回 使用JavaFX2.0内置布局窗格

原文地址http://download.oracle.com/javafx/2.0/layout/builtin_layouts.htm

?

?

在JavaFX应用中,当然可以通过指定UI元素的位置和大小属性来手动布局。不过,更简单的方法是使用布局窗格。JavaFX SDK提高了多种布局容器类(称为窗格)来方便的建立和管理经典布局,如行、列、堆、拼贴等。由于窗口是可以改变大小的,所以布局窗格会根据其包含的结点自动修改位置和大小。

本文是JavaFX布局窗格的概览,并为每个窗格提供了小例子。


Description of "Figure 1-1 Sample Border Pane"

?

边框窗格对于经典布局很有用,像顶部的工具栏,底部的状态栏,左边的导航面板,右边的补充信息,中间的工作区。

Example 1-1 创建了一个每个区域是有色矩形的边框窗格。

?


Description of "Figure 1-2 Sample HBox Pane"

Padding属性用来设置结点和HBox的边缘间距离。Spacing属性用来设置结点间距离。style用来改变背景色。

Example 1-2 创建了一个工具栏的HBox窗格,里面有两个按钮。

?


Description of "Figure 1-3 HBox Pane in a Border Pane"


Description of "Figure 1-4 Sample VBox Pane"

Padding属性用来设置结点和VBox的边缘间距离。Spacing属性用来设置结点间距离。

Example 1-3创建了一个选项列表VBox。

?Example 1-3 中最后一行把VBox窗格加入到了边框布局中的左部。结果见Figure 1-5.


Description of "Figure 1-5 VBox Pane in a Border Pane"


Description of "Figure 1-6 Sample Stack Pane"

?

Example 1-4 为帮助图标创建了堆栈窗格。

?


Description of "Figure 1-7 Stack Pane in an HBox Pane"


Description of "Figure 1-8 Sample Grid Pane"

?

Gap属性来控制行和列直接的空间。padding属性来控制结点和网格窗格边缘的距离。

Example 1-5 creates the grid pane shown in Figure 1-8.


Description of "Figure 1-9 Grid Pane in a Border Pane"

由于窗口大小的变化,网格成功的结点会根据布局限制重置大小。


Description of "Figure 1-10 Sample Horizontal Flow Pane"

?

Gap属性来控制行和列直接的空间。padding属性来控制结点和网格窗格边缘的距离。Example 1-6 创建了一些列图标的水平流窗格。

?


Description of "Figure 1-11 Flow Pane in a Border Pane"


Description of "Figure 1-12 Sample Anchor Pane"

?

Example 1-8 照上面创建了一个锚窗格。


Description of "Figure 1-13 Anchor Pane in a Border Pane"

当窗口大小改变时,结点会维持它们原来的相对位置。 Figure 1-14 在按钮在底部,当窗口变低时,按钮也向上移动了。


Description of "Figure 1-14 Resized Anchor Pane"

热点排行