如何在 JavaFX 2.0 的选项卡中制作可调整大小的 SplitPane（最好使用 SceneBuilder 和/或 FXML）？

Question

这个问题基本上说明了一切，但需要注意的是，我是一般 GUI 设计的新手，尤其是 JavaFX 的新手。要在 SceneBuilder 中重现，请将 TabPane 拖到场景中，然后将 SplitPane 拖到第一个选项卡的 AnchorPane 中。调整（拖动）SplitPane 的大小以匹配选项卡的大小。如果 SplitPane 不是孩子，这不是问题（到目前为止，我只将它作为 Tab 的（孙）孩子进行了测试）。你会有这样的东西：

预览时，如果您尝试通过拖动来扩大窗口大小，SplitPane 不会调整大小：

这是我从 SceneBuilder 获得的 FXML，使用本文顶部描述的过程，可能有一些没有帮助的小改动：

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<TabPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" tabClosingPolicy="UNAVAILABLE" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">
  <tabs>
    <Tab text="Untitled Tab 1">
      <content>
        <AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="0.0" minWidth="0.0" prefHeight="386.0" prefWidth="613.0">
               <children>
                  <SplitPane dividerPositions="0.29797979797979796" maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="358.0" prefWidth="600.0">
                    <items>
                      <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0" />
                      <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="158.0" prefWidth="277.0" />
                    </items>
                  </SplitPane>
               </children></AnchorPane>
      </content>
    </Tab>
    <Tab text="Untitled Tab 2">
      <content>
        <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
      </content>
    </Tab>
  </tabs>
</TabPane>

Answer 1

问题在于您的 SplitPane 是 AnchorPane 的子项。如果您在 AnchorPane 下有一些东西，它会锚定到特定的坐标。为了让孩子占据整个区域，您需要将 AnchorPane 的锚点指定为 zero。

<TabPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" tabClosingPolicy="UNAVAILABLE" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">
  <tabs>
   ....
    <SplitPane dividerPositions="0.29797979797979796" maxHeight="-Infinity" 
               maxWidth="-Infinity" prefHeight="358.0" prefWidth="600.0"
               AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0"
               AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
   ....
   </tabs>
</TabPane>

使用场景构建器，您可以通过以下方式分配 AnchorPane 约束：

1. 选择 AnchorPane 下的子项
2. 移至右侧面板上的布局部分
3. 您将看到一个名为 AnchorPane 约束的部分，只需输入四个部分值并保存