在JavaFX / FXML中创建灵活的3盒布局的最佳方法

Question

我想在JavaFX / FXML中创建灵活的3盒布局。图片描述的最好，如下所示：

如您所见，主要部分应包含三个可调整大小的框。所有这些盒子都应该有一个首选尺寸。

因此代码如下所示（简化代码）。

<BorderPane>
  <top>
    <VBox>
      <!-- menubar stuff -->
    </VBox>
  </top>
  <center>
    <!-- ACTUAL CONTENT HERE -->
  </center>
  <bottom>
    <!-- toolbar stuff -->
  </bottom>
</BorderPane>

这里最好的方法是什么？两个嵌套的SplitPane s？

Answer 1

  

这里最好的方法是什么？两个嵌套的SplitPanes？

是的，我会这样做。

要获得上面的模拟布局，请尝试在SceneBuilder 1.1 early access中打开以下fxml。

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<BorderPane id="BorderPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="400.0" xmlns:fx="http://javafx.com/fxml">
  <bottom>
    <Label alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" style="-fx-background-color: linear-gradient(to bottom, paleturquoise, azure, paleturquoise);&#10;" text="(56, 32)" textAlignment="LEFT" BorderPane.alignment="CENTER" />
  </bottom>
  <center>
    <SplitPane dividerPositions="0.3492462311557789" focusTraversable="true" prefHeight="160.0" prefWidth="200.0">
      <items>
        <SplitPane id="SplitPane" dividerPositions="0.6088328075709779" orientation="VERTICAL">
          <items>
            <TabPane prefHeight="200.0" prefWidth="200.0" side="BOTTOM" tabClosingPolicy="UNAVAILABLE">
              <tabs>
                <Tab text="A">
                  <content>
                    <TilePane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: lavender;&#10;" />
                  </content>
                </Tab>
                <Tab text="B">
                  <content>
                    <TilePane prefHeight="200.0" prefWidth="200.0" />
                  </content>
                </Tab>
                <Tab text="C">
                  <content>
                    <TilePane prefHeight="200.0" prefWidth="200.0" />
                  </content>
                </Tab>
                <Tab text="D">
                  <content>
                    <TilePane prefHeight="200.0" prefWidth="200.0" />
                  </content>
                </Tab>
                <Tab text="E">
                  <content>
                    <TilePane prefHeight="200.0" prefWidth="200.0" />
                  </content>
                </Tab>
              </tabs>
            </TabPane>
            <TreeView prefHeight="200.0" prefWidth="200.0" />
          </items>
        </SplitPane>
        <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="80.0" prefWidth="50.0" style="-fx-background-color: palegreen;" />
      </items>
    </SplitPane>
  </center>
  <top>
    <VBox prefHeight="-1.0" prefWidth="-1.0">
      <children>
        <MenuBar>
          <menus>
            <Menu mnemonicParsing="false" text="File">
              <items>
                <MenuItem mnemonicParsing="false" text="Close" />
              </items>
            </Menu>
            <Menu mnemonicParsing="false" text="Edit">
              <items>
                <MenuItem mnemonicParsing="false" text="Delete" />
              </items>
            </Menu>
            <Menu mnemonicParsing="false" text="Help">
              <items>
                <MenuItem mnemonicParsing="false" text="About" />
              </items>
            </Menu>
          </menus>
        </MenuBar>
        <ToolBar>
          <items>
            <Button mnemonicParsing="false" style="-fx-graphic: url('http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-9/24/open-file-icon.png');" text="" />
            <Button mnemonicParsing="false" style="-fx-graphic: url('http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-7/24/Save-icon.png');" text="" />
          </items>
        </ToolBar>
      </children>
    </VBox>
  </top>
</BorderPane>