JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件

目录

容器组件预览

Accordion

Accordion(empty)

AnchorPane

BorderPane

FlowPane

GridPane

HBox

Pane

ScrollPane

ScrollPane(empty)

SplitPane(empty)

SplitPane(horizontal)

SplitPane(vertical)

StackPane

Tab

TabPane

TabPane(empty)

TextFlow(FX8)

TilePane

TitledPane

TitledPane(empty)

ToolBar

VBox


 

容器组件预览

本章所讲的所有控件都是容器控件,即可以嵌套其他控件,也可以嵌套其他的容器,大多数容器都与布局有关,而明白这些容器的功能便于快捷布局。

所有的容器组件预览如下图所示:

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第1张图片

各个容器控件介绍如下:

  • Accordion:复合标题面板的布局容器,效果查看下图。

  • Accordion(empty):复合标题面板的布局容器,没有Anchor锚布局面板,效果查看下图。

  • AnchorPane:锚布局,组件可以在布局中的任何位置,效果查看下图。

  • BorderPane:边界布局,分为TOP、LEFT、CENTER、RIGHT、BOTTOM五个区域。

  • FlowPane:流布局,从左到右依次排列,放不下时就换行继续排列。

  • GridPane:网格布局,所有控件或容器放到相应的网格中。

  • HBox:水平盒子,里面的控件呈水平排列,和VBox垂直盒子相对应。

  • Pane:所有容器Pane面板类的父类,基本容器面板。

  • ScrollPane:滚动面板容器。

  • ScrollPane(empty):滚动面板容器控件,没有AnchorPane控件,可以自己添加其他容器控件。

  • SplitPane(empty):分割面板。

  • SplitPane(horizontal):水平分割面板容器控件,有一个垂直分隔条。

  • SplitPane(vertical):垂直分割面板容器控件,有一个水平分隔条。

  • StackPane:层叠面板容器,组件层叠放置。

  • Tab:Tab控件,与TabPane一起使用。

  • TabPane:Tab面板,可以切换Tab选项来切换不同的内容。

  • TabPane(empty):没有AnchorPane,可以自己添加容器面板。

  • TextFlow(FX8):也是一个容器控件,一般同Text一起使用。

  • TilePane:类似于FlowPane的容器。

  • TitledPane:折叠容器面板,可以折叠面板内容。

  • TitledPane(empty):没有AnchorPane,可以自己设置容器控件。

  • ToolBar:工具栏控件。

  • VBox:垂直布局容器控件,控件垂直排列。

 

Accordion

一个Accrodion控件的布局如下:

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第2张图片

预览查看效果:

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第3张图片

 

Accordion(empty)

和Accordion组件不同的是没有AnchorPane面板,可以自行添加任何其他容器。

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第4张图片

比如说在TitledPane容器中添加一个VBox容器控件:

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第5张图片

 

AnchorPane

锚点布局容器,里面的控件可以在布局容器中的任何位置。

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第6张图片

里面的控件可以AnchorPane中的任意位置进行拖动。

 

BorderPane

边界布局如下:

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第7张图片

动态演示如下:

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第8张图片

 

FlowPane

流布局,从左向右依次排列控件,无论是普通控件还是容器布局控件,但一行排满了或放不下时就会换行继续从左到右排列显示。

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第9张图片

动态图演示:

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第10张图片

 

GridPane

GridPane是窗格布局,类似于表格,可以在每个空格中放入控件或容器面板。如计算器就可以使用GridPane来进行布局。

动态演示如下:

 

HBox

水平布局,该容器内的所有控件都是水平排列,呈一条水平轴线,即使所有控件的总宽度超过界面窗口的宽度,也不会换行,而是缩短控件宽度。

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第11张图片

动图演示:

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第12张图片

 

Pane

Pane面板是所有其他面板如AnchorPane的父类。

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第13张图片

使用和AnchorPane面板差不多,也可以让组件到处放置。

 

ScrollPane

滚动面板,里面的控件内容如果超过ScrollPane的长度和宽度,那么就会出现滚动条,使多余的内容可以滚动显示。

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第14张图片

动图演示:

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第15张图片

 

ScrollPane(empty)

和上面的ScrollPane的区别就是没有哪个AnchorPane控件,就是可以自己添加其他类型的容器或控件。

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第16张图片

动图演示:

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第17张图片

 

SplitPane(empty)

分割面板,在SplitPane容器内添加其他容器进行分隔显示。

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第18张图片

动图演示:

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第19张图片

 

SplitPane(horizontal)

水平分割面板,即分隔条是垂直的,效果如图:

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第20张图片

 

SplitPane(vertical)

垂直分割面板,即分隔条是水平放置的,效果如图:

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第21张图片

 

StackPane

堆积容器面板,控件是呈堆积放置的,查看下面的动图,可以看到控件是层叠放置的。

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第22张图片

动图演示如下:

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第23张图片

 

Tab

Tab控件是和TabPane面板一起使用的,单个使用没有效果。

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第24张图片

 

TabPane

Tab面板,由Tab控件构成,而AnchorPane的内容面板,放置你要布局的控件。其中可以切换Tab来更换显示不同的内容。

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第25张图片

动图演示:

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第26张图片

通过上面的Tab来切换不同的面板。

 

TabPane(empty)

和上面的TabPane区别就是没由AnchorPane控件,可以自己选择容器。

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第27张图片

动图演示:

 

TextFlow(FX8)

该控件一般用来显示文本的,同Text控件一起使用。

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第28张图片

动图演示:

 

TilePane

TilePane是一个类似于FlowPane的容器。

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第29张图片

 

TitledPane

标题面板布局,点击untitled标题可以折叠面板内容。

而Accordion面板就是复合的TitledPane面板。

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第30张图片

效果演示:

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第31张图片

 

TitledPane(empty)

和上面的TitledPane面板不同的是没有AnchorPane面板,可以自己添加其他容器控件。

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第32张图片

动图演示:

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第33张图片

 

ToolBar

工具栏控件。

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第34张图片

动图演示:

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第35张图片

 

VBox

垂直盒子布局,里面的所有控件都是垂直排列的,呈一条垂直线分布。

JavaFX之Scene Builder详细使用说明之组件篇(1)——容器组件_第36张图片

动图演示:

 

可搜索微信公众号【Java实例程序】或者扫描下方二维码关注公众号获取更多。

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(JavaFX)