使用 JavaFX 进行动态布局的参考和指南
wil*_*ill 1 layout javafx javafx-2 fxml javafx-8
我通过 Scene Builder 使用 FXML 来建立一些 JavaFX 场景和格式化模板。浏览了网络和 Oracle 教程后，我仍然发现确定布局大小/换行/适合内容/等的“规则”。元素和组件之间的间距对我来说 90% 是一种魔法。我缺少的是“布局概述”（缺少章节），它将 FXML（和 JavaFX）布局放在一起。如果您遇到过这种生物，请分享链接。
到目前为止，我只找到了少量信息。例如：
提供有关某一属性、参数或特征的一些有用信息。似乎没有任何内容概述大局，也没有努力将“字体系列”与（什么是）“有效字体”之间的点联系起来？
另外，我正在寻找一些可以完成更多业务或应用程序类型工作的示例。更多真实世界的示例，例如数据输入表单，其中包含文本字段、组合框、单选按钮等详细信息。在屏幕上执行“正常”操作，而不仅仅是查看闪亮的图形来显示 JavaFX 可能执行的操作。
我认为缺少的主要内容是有关不同 JavaFX 容器和元素的描述，以及将它们关联在一起以实现彼此相关的格式化外观、格式化布局、渲染大小。
请原谅我举了一个听起来像是批评的例子，这并不是为了我只是没有找到让我满足一些简单要求的信息：
- 想要一个适用于不同尺寸的显示器/窗口的动态布局。
- 某些屏幕区域需要根据内容调整大小。或多或少就是我所说的“适合内容”。
- 其他区域可能需要固定宽度或高度（作为约束）。
- 格式化布局的其余部分将根据窗口的大小和容量缩小或增大。
- 我希望在 FXML 中做到这一点：这样我们就可以拥有一个具有相同信息的布局样式菜单（如views）。这样我们就期望将显示与最佳布局相匹配。
我可以列出我遇到的主要的、具体的障碍（接下来）。我接受的是，我的知识和我正在阅读的关于容器如何工作的知识存在差距，最小-首选-最大宽度和高度如何工作？他们如何互动等等？就目前而言，这个问题可能太大了。我可以举一个例子和一些可以遵循的细节，并将其留给群众的智慧......
例子
| col-01 | col-02 | col-03 | col-04 | col-04 |
| | | | | |
| expand | fixed | scale | expand | fit |
| | percent |conetnet| | content |
| | | | | |
规格：
- 如果我使用 GridPane，则 SceneBuilder 中的列或行没有属性或样式字段。
- 问题：我可以在 FXML 文件中为 GridPane 行和列编写样式吗？
- 百分比在大多数地方无效（Java CSS 参考）。哪里可以用百分比，哪里可以不使用百分比。
- 我希望带有“ expand ”的列根据显示尺寸增大/缩小。
- 适合的内容不应扩展（或仅适度扩展）。
- 缩放内容应该扩展/收缩以适应“剩余空间”，同时我希望内容“适合空间”（通常是图形或其他媒体）
- 元素的有效 CSS 样式是什么。
- 不同 JavaFX CCS 样式的有效值是什么？
- 哪种样式（路径）选择器和组合适用于 JavaFX？
我仍然相信这些限制对于 JavaFX 是可行的。我希望在 FXML 中设置布局的“大纲规则”。我认为只要我获得有关如何组合和设置布局以满足部署的显示约束的信息，FXML 就应该能够完成所需的工作。
我期待所有这些答案不会全部集中在一个地方。因为这是我第二次（项目），我需要了解这些事情。这次我更愿意用更少的暴力来完成工作，因为我们希望 FXML 定义提供灵活性。我还认为我们很多人都想知道如何做到这一点，但 JavaFX 样式与 HTML 不同。我预先致谢。
也可以看看：
- FXML Guice可能非常有用。
几乎所有具体问题都可以通过使用ColumnConstraints上的来回答GridPane。查看官方教程中的“使用布局”章节。
请注意，与 HTML（其中 CSS 用于样式和布局）不同，在 JavaFX 中 CSS 并不是真正用于布局，而只是用于应用程序的“外观”。（显然，这里存在一些灰色区域，例如边框等，但在我看来，方法上确实存在差异。）我认为，一旦您意识到这种差异，CSS 值的百分比问题就变成了一个有争议的问题。
对于您的具体示例，并且就在我的脑海中，所以这可能不完全正确，您可以执行以下操作：
<GridPane>
<columnConstraints>
<ColumnConstraints hgrow="ALWAYS">
<maxWidth><Double fx:constant="POSITIVE_INFINITY" /></maxWidth>
</ColumnConstraints>
<ColumnConstraints percentWidth="20"/>
<ColumnConstraints hgrow="SOMETIMES" fillWidth="true"/>
<ColumnConstraints hgrow="ALWAYS">
<maxWidth><Double fx:constant="POSITIVE_INFINITY" /></maxWidth>
</ColumnConstraints>
<ColumnConstraints hgrow="NEVER" />
</columnConstraints>
<!-- Nodes... -->
</GridPane>
在 SceneBuilder 中（屏幕截图来自 2.0，但这也适用于 1.1），单击列的“标题选项卡”，在右侧的布局下，您将能够设置该列的列约束。在此屏幕截图中，选择了第 1 列（其“标题选项卡”为黄色）：
对于你的具体问题 6，关于 css 样式，一旦你弄清楚它是如何布局的，我发现CSS 参考对此非常明确。它列出了它们的类型和值，然后列出了节点、可以与它们一起使用的属性以及它们的类型。选择器是标准的 css 选择器，有一些伪类不受支持（在参考介绍中记录）。
参考文献中没有明确说明的一件事是每个节点的“子结构”部分列出了 css 类。因此，例如，ScrollBar（具有 css 类滚动条）在其子结构下作为 StackPane 列出了“track”。StackPane 被列为定义一个属性-fx-alignment并继承 的所有属性Pane，而后者又继承 的所有属性Region，例如-fx-background-color。所以如果我想要非常丑陋的滚动条，我可以这样做
.scroll-bar .track {
-fx-background-color: purple ;
}
如果我想要一个特定的滚动条丑陋，我可以给它一个样式类（说“丑陋”）并执行
.scroll-bar.ugly .track {
-fx-background-color: purple ;
}
（因此适用 css 的通常选择规则。）
虽然参考资料非常好，但我经常深入研究默认样式表源代码，看看那里的工作是如何完成的。这是一个有用的资源，Oracle 似乎积极鼓励您查看此资源。与之前的链接一样，您可以使用以下命令从 jfxrt.jar 文件中提取它：
jar xf JAVA_HOME/jre/lib/ext/jfxrt.jar com/sun/javafx/scene/control/skin/modena/modena.css