史上最直观的JavaFx布局讲解(超多图)BorderPane、StackPane、GridPane、AnchorPane等

史上最直观的JavaFx布局讲解(超多图)

  • 前言
  • 1、BorderPane
  • 2、HBox
  • 3、VBox
  • 4、StackPane
  • 5、GridPane
  • 6、FlowPane
  • 7、SplitPane
  • 8、Accordion
  • 9、TabPane
  • 10、AnchorPane
  • 后记

前言

代码是给机器看的,不是给人看的,可是代码表达灵活

我们直接使用可视化工具,等学会了再用代码来写

可视化工具:SceneBuilder
下载地址:https://gluonhq.com/products/scene-builder/

史上最直观的JavaFx布局讲解(超多图)BorderPane、StackPane、GridPane、AnchorPane等_第1张图片
直接下载就可以了

1、BorderPane

提供了5个放置节点的区域:top, bottom, left, right, 和 center

史上最直观的JavaFx布局讲解(超多图)BorderPane、StackPane、GridPane、AnchorPane等_第2张图片
在Containers中就可以找到BorderPane
史上最直观的JavaFx布局讲解(超多图)BorderPane、StackPane、GridPane、AnchorPane等_第3张图片

拖拽到黑灰色部分即可

史上最直观的JavaFx布局讲解(超多图)BorderPane、StackPane、GridPane、AnchorPane等_第4张图片

此时我们随便拖拽一个按钮都会出现五个位置,BorderPane就是可以放到5个敌方的

2、HBox

可以先delete刚才的,再拖进其他面板,就上具体操作的图了

HBox横的一个一个摆

史上最直观的JavaFx布局讲解(超多图)BorderPane、StackPane、GridPane、AnchorPane等_第5张图片

3、VBox

HBox竖的一个一个摆

史上最直观的JavaFx布局讲解(超多图)BorderPane、StackPane、GridPane、AnchorPane等_第6张图片

4、StackPane

StackPane后来居上,新放的东西会覆盖原来的东西

史上最直观的JavaFx布局讲解(超多图)BorderPane、StackPane、GridPane、AnchorPane等_第7张图片

5、GridPane

GridPane一格一格的放,可以设置行和列

史上最直观的JavaFx布局讲解(超多图)BorderPane、StackPane、GridPane、AnchorPane等_第8张图片

6、FlowPane

FlowPane会一行一行的摆,放不下就拐到下一行

史上最直观的JavaFx布局讲解(超多图)BorderPane、StackPane、GridPane、AnchorPane等_第9张图片

7、SplitPane

SplitPane能用鼠标拖动的面板

史上最直观的JavaFx布局讲解(超多图)BorderPane、StackPane、GridPane、AnchorPane等_第10张图片

8、Accordion

Accordion可以翻的页面

史上最直观的JavaFx布局讲解(超多图)BorderPane、StackPane、GridPane、AnchorPane等_第11张图片

9、TabPane

TabPane一个一个的标签

史上最直观的JavaFx布局讲解(超多图)BorderPane、StackPane、GridPane、AnchorPane等_第12张图片

10、AnchorPane

AnchorPane我们可以看到,每个页面里面都有AnchorPane,意思就跟随外面的移动,外面的往左,里面的就往左,外面的往右,里面的就往右

史上最直观的JavaFx布局讲解(超多图)BorderPane、StackPane、GridPane、AnchorPane等_第13张图片

后记

加油ヾ(◍°∇°◍)ノ゙!!!

你可能感兴趣的:(极致通俗)