在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>