Layout 使用JavaFX的动态布局参考和指南

我通过场景生成器使用FXML来建立一些JavaFX场景和格式模板。浏览了web和Oracle教程后，我仍然发现，确定布局大小/包装/适合内容等方面的“规则”以及元素和组件之间的间距对我来说是一门黑色艺术。我缺少的是将FXML（和JavaFX）布局放在一起的“布局概述”（缺少一章）。如果你遇到过这样的生物，请分享链接

到目前为止，我只找到了一点点信息。例如：

提供一些关于一个属性、参数或特征的有用信息。似乎没有任何东西能勾勒全局，也没有努力将“字体系列”与（什么是“有效字体”）之间的点联系起来

此外，我正在寻找一些例子，做更多的业务或应用程序类型的工作。更多的真实世界（tm）示例，如数据输入表单，该表单使用文本字段、组合框、单选按钮等获取详细信息。在屏幕上执行“正常”操作，而不仅仅是查看闪亮的图形来显示JavaFX的功能

我认为缺少的主要内容是一个描述，它将不同的JavaFX容器和元素关联起来，并将它们关联在一起，以实现格式化外观、格式化布局和渲染大小的相互关联

请原谅，我举了一个听起来像是批评的例子，这不是故意的，我只是没有找到让我满足一些简单要求的信息：

想要在不同大小的显示器/窗口上工作的动态布局

一些人造橡胶区域需要根据内容调整大小。我所描述的或多或少都符合内容

其他区域可能需要固定宽度或高度（作为约束）

格式布局的其余部分将根据窗口的大小和容量而缩小或增大

我希望FXML中有这样的内容：这样我们就可以有一个包含相同信息（如视图）的布局样式菜单。这样，我们期望以最佳布局匹配显示器

我可以列出我遇到的主要、具体的障碍（下一步）。我接受的是，在我的知识和我正在阅读的关于集装箱工作原理的文章中，存在着差距，min首选的最大宽度和高度是如何工作的？他们如何互动，等等。？现在这个问题可能太大了。我可以举一个例子和一些细节来遵循，并把它留给群众的智慧

示例

  | col-01   |  col-02 | col-03 | col-04   |  col-04 |
  |          |         |        |          |         |
  |  expand  |  fixed  | scale  |  expand  |   fit   |
  |          | percent |conetnet|          | content |
  |          |         |        |          |         |

具体内容：

如果使用GridPane，则SceneBuilder中没有列或行的属性或样式字段。

• 问题：我可以为FXML文件中的网格窗格行和列编码样式吗

百分比在大多数地方无效（）。我们在哪里可以使用百分比而不使用百分比

我希望带有“expand”的列根据显示大小进行增长/收缩

Fit内容不应扩展（或仅适度扩展）

缩放内容应扩展/缩小以适应“剩余空间”，同时我希望内容“适合空间”（通常是图形或其他媒体）

元素的有效CSS样式是什么。

• 不同JavaFX CCS样式的有效值是什么
• 哪些样式（路径）选择器和组合适用于JavaFX

我仍然相信这些约束可以通过JavaFX实现。我希望在FXML中设置布局的“大纲规则”。我觉得FXML应该能够完成所需的工作，前提是我获得了有关如何组合和设置布局以满足deploymed显示约束的信息

我期待着所有这些答案并非都在一个地方。因为这是我第二次（项目）需要了解这些事情。这一次我更希望使用更少的暴力来工作，因为我们需要FXML定义提供的灵活性。我还认为我们很多人都想知道如何做到这一点，但是JavaFX样式与HTML不一样。我先表示感谢

另见：

• ，可能非常有用

---

几乎所有的具体问题都可以通过在网络上使用来回答。请看下面的图片

请注意，与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>

如果我想要一个特别的滚动条是丑陋的，我可以给它一个样式类（说“丑陋”），然后做

（因此css的常规选择规则适用。）

虽然参考资料相当不错，但我确实经常深入研究，看看那里的工作是如何完成的。这是一个有用的资源，Oracle似乎积极鼓励您关注这一点。除了以前的链接之外，您还可以使用

jar xf JAVA_HOME/jre/lib/ext/jfxrt.jar com/sun/javafx/scene/control/skin/modena/modena.css

---

几乎您所有的具体问题都可以通过在上使用来回答。请看下面的图片

请注意，与HTML（CSS用于样式和布局）不同，在JavaFX中，CSS并不是真正用于布局，而是用于应用程序的“外观”。（很明显，这里有一些灰色区域，如边界等，但在我看来，在方法上存在真正的差异。）我认为，一旦你意识到这种差异，CSS值百分比的问题就变得毫无意义了

对于你的具体例子，我不太清楚，所以这可能不完全正确，你可以

.scroll-bar.ugly .track {
  -fx-background-color: purple ;
}

jar xf JAVA_HOME/jre/lib/ext/jfxrt.jar com/sun/javafx/scene/control/skin/modena/modena.css