具有可调整大小的组件和绑定的 JavaFX 布局是否正确？（包括图像）

Question

我正在创建一个 2x2 网格，其中包含组件。它们将如下图所示：

我不确定正确的布局应该是什么。问题是右下角并没有真正对齐......所以我猜网格布局不起作用（或者可以吗？）。我想我会做一个 BorderPane 并让顶部包含顶部的两个窗格，底部包含底部的两个窗格，然后在其中做另一个 BorderPane 并从那里开始。

1) 这是解决这个问题的好方法（边框布局忽略中心），还是有更好的布局？

下一步：蓝色框将根据全屏大小调整大小。我运行遇到的问题是，在变大之后，当它是 sh运行k 时，黑框（应该始终保持相同的尺寸，不包括那些应该调整大小的蓝色边）

2）有没有办法让黑框适应蓝框的大小？

我的意思是：如果蓝色框垂直增长，右上角的窗格也必须垂直扩展。同样，如果蓝色的缩小，它也必须缩小。这可以通过绑定两个高度来完成吗？由于底部矩形不会展开，有没有办法绑定它，所以如果整个窗格的高度为 x，那么 JavaFX 将为我计算的绑定高度将为 x - bottomFixedHeight，但也不会比我们说的 128（作为任意示例）更小？

注意：我不熟悉多重绑定，我正在尝试 google 虽然可能有一个示例可能会有所帮助。

Answer 1

背景

恕我直言，BorderPane 是您可以用于上述场景的最佳布局。

BorderPane 的 Javadoc 说，

The top and bottom children will be resized to their preferred heights and extend the width of the border pane. The left and right children will be resized to their preferred widths and extend the length between the top and bottom nodes. And the center node will be resized to fill the available space in the middle.

所以使用TOP和BOTTOM并不是一个合适的场景。我建议使用 CENTER 和 BOTTOM。

解决方案

现在我们已经决定使用 BorderPane，接下来让我们决定可用于填充四个 space 的布局。

如上图所示，我们可以使用BorderPane的CENTER和RIGHT来创建上半部分。让我们将 VBox 添加到边框的中心和右侧 space。右侧的 VBox 必须指定 PREF_WIDTH 和 MAX_WIDTH 以确保它不超过提供的 WIDTH。如果你想要 MIN_WIDTH，你也可以提供。
对于BOTTOM，我们可以使用一个HBox，然后添加两个VBox。对于第一个 VBox，因为我们希望它的宽度超过，当重新调整大小时，我们将设置 HBox.hgrow="ALWAYS"。对于右下 VBox，我们将再次像对右上 VBox 和 HBox.hgrow="NEVER".

注意： 您可以将 VBox 替换为您喜欢的布局。 PREF_WIDTH 和 PREF_HEIGHT 用于初始 WIDTH 和 HEIGHT

我使用 scenebuilder 创建了一个示例，输出如图所示

FXML

<BorderPane minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <bottom>
      <HBox prefHeight="100.0" prefWidth="200.0" BorderPane.alignment="CENTER">
         <children>
            <VBox prefHeight="100.0" prefWidth="100.0" style="-fx-border-color: green;" HBox.hgrow="ALWAYS" />
            <VBox minWidth="70.0" prefHeight="200.0" prefWidth="70.0" style="-fx-border-color: black;" HBox.hgrow="NEVER" />
         </children>
      </HBox>
   </bottom>
   <right>
      <VBox minWidth="100.0" prefHeight="200.0" prefWidth="100.0" style="-fx-border-color: red;" BorderPane.alignment="CENTER" />
   </right>
   <center>
      <VBox prefHeight="200.0" prefWidth="100.0" style="-fx-border-color: blue;" BorderPane.alignment="CENTER" />
   </center>
</BorderPane>

作者注： 虽然我不认为绑定在这里很重要，但如果您希望更好地控制，无论如何都可以使用它。

具有可调整大小的组件和绑定的 JavaFX 布局是否正确？（包括图像）

Layout for JavaFX with resizable component and bindings, is this proper? (image included)

javafx

resize

bind

解决方案

具有可调整大小的组件和绑定的 JavaFX 布局是否正确？ （包括图像）

Layout for JavaFX with resizable component and bindings, is this proper? (image included)

javafx

resize

bind

解决方案

具有可调整大小的组件和绑定的 JavaFX 布局是否正确？（包括图像）