JavaFX-Layout篇（一）

Working With Layouts in JavaFX

About This Tutorial

(关于布局篇指导)

The JavaFX SDK provides layout panes that support severaldifferent styles of layouts. This

JavaFx 开发包（SDK）提供了很多不同种类类型的布局方式，

tutorial provides information on using these panes tocreate graphical user interfaces for your

这些指导在为编写JavaFX应用程序布局面板时提供了良好的图形使用接口（GUI）。

JavaFX applications.

An intermediate（中级的，中间的） level ofJava language programming skills is assumed（被承担的，假冒的）.

要求具有一定的中级水平的java编程方法

This tutorial contains the following topics（主题，论题）:

这部分知道包括一下几个主题

• Using Built-In Layout Panes - Describes the built-in layout panes and provides an
• 使用Built-In Layout Panes（内建布局面板）描述了内建布局并提供了相应的
• example of each pane.
• 例子
•  
• Tips for Sizing and Aligning Nodes - Provides examples of overriding the default size
  翻译一般，如有错误请大家随时提出。
• 布局大小提示以及节点校准-提供例子复写默认的布局大小
• and position of nodes.
• 以及节点的位置

Expand the Table of Contents in the sidebar for a moredetailed list of topics.

 

1 UsingBuilt-In Layout Panes

A JavaFX application can manually lay out the UI by setting theposition and size properties for

一个JavaFX应用程序能够人为地为每一个UI元素通过设置位置坐标以及其大小的属性对其在面板内进行布

each UI element. However, an easier option is to make use oflayout panes. The JavaFX SDK

局。然而，一个更容易的选择可以用来对其进行布局，JavaFXSDK（开发包）提供了很多种布局容器类

 provides several layoutcontainer classes, called panes, for the easy setup and management of

叫做panes，能够简单地设置和

classic layouts such as rows, columns, stacks, tiles, andothers. As a window is resized, the

运用经典的布局方式例如行、列、栈、方块等等，对于窗口的大小重新设置，布局面板会自动的重新配置

layout pane automatically repositions and resizes the nodes thatit contains according to the

以及重新根据属性的设置为节点的大小进行重新调整，

properties for the nodes.This section provides an overview and asimple example of each of the

这一章节提供了一个全面的预览和一些每一个布局类的简单例子能够帮助我们学习。

layout panes provided with JavaFX.

BorderPane（边框布局）

The BorderPane layoutpane provides five regions in which to place nodes: top, bottom, left,

BorderPane布局提供了五个区域方位，其分别是top(顶部)、bottom(底部)、left(左面)、right(右面)

right, and center. Figure1-1 shows the type of layout that you can create with a border pane.

和center（中间）,例子1-1为我们展示了创建这种BorderPane

 The regions can be anysize. If your application does not need one of the regions, you do not

这些区域可以为仁矣大小，假如你的应用程序不需要其中一个区域，你不需要去定义它们。

 need to define it.

Figure1-1 Sample Border Pane

Description of"Figure 1-1 Sample Border Pane"

A border pane is useful for the classic look of a tool bar atthe top, a status bar at the bottom,

以下是一个经典的面板布局，工具栏位于顶端，一个静态的bar在低端，

a navigation panel on the left, additional information on theright, and a working area in the

一个导航条在面板左边，在右边添加上信息，而且工作区域位于中间。

 center.

Example1-1 creates a border pane with a colored rectangle in each region.

Example1-1 Create a Border Pane

BorderPane layout = new BorderPane();

layout.setTop(new Rectangle(200, 50, Color.DARKCYAN));

layout.setBottom(new Rectangle(200, 50, Color.DARKCYAN));

layout.setCenter(new Rectangle(100, 100, Color.MEDIUMAQUAMARINE));

layout.setLeft(new Rectangle(50, 100, Color.DARKTURQUOISE));

layout.setRight(new Rectangle(50, 100, Color.DARKTURQUOISE));

HBox

The HBox layoutpane provides an easy way for arranging a series of nodes in a single

HBox布局面板提供了一种十分容易的方式去单个的布置一系列节点。

Row.

Figure1-2 shows an example of an HBox pane.