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

Question

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

到目前为止，我只找到了很少的信息。例如：

• JavaFX引用
• JavaFX Javadocs
• Java CSS参考

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

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

1. 想要一个能在不同大小的显示器/窗口上工作的动态布局。
2. 某些screne区域需要根据内容调整大小。或多或少是我所说的，适合内容。
3. 其他区域可能需要固定宽度或高度（作为约束）。
4. 格式化布局的其余部分将根据窗口的大小和容量缩小或增大。
5. 我想在FXML中使用这个：这样我们就可以有一个具有相同信息（视图）的布局样式菜单。这样，我们期望将display与最佳布局相匹配。

我可以列出我遇到的主要的，具体的障碍（下一个）。我接受的是，在我的知识和我读到的关于containter如何工作的知识中，有差距，最小首选最大宽度和高度是如何工作的？他们如何互动等等？现在这个问题可能太大了。我可以举一个例子和一些细节来遵循，让人们的智慧来决定...

例

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

具体情况：

• 如果使用网格窗格，则SceneBuilder中没有列或行的属性或样式字段。
  
  • 问题：我可以为FXML文件中的网格窗格行和列编码样式吗？
  • 不同JavaFX CCS样式的有效值是什么？
  • 哪些样式（路径）选择器和组合适用于JavaFX？

  我仍然相信这些约束是可以用JavaFX实现的。我希望我的布局的“大纲规则”在FXML中设置。我认为只要我得到关于如何组合和设置布局以满足部署的显示约束的信息，FXML就应该能够完成所需的工作。

  • FXML Guice可能非常有用。

Answer 1

在网格窗格上使用columnconstraints可以回答您几乎所有的特定问题。请查看官方教程中的“使用布局工作”一章。

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

.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