JavaFX中的多个布局

Question

我希望按照以下顺序在JavaFX程序中组织我的组件：

当我使用GridPane布局包含菜单栏和工具栏的VBox以及包含文件视图，编辑器和控制台的HBox时，网格窗格禁止您编辑两个不同布局上的单元格宽度。结果：

无论如何绕过这个或者可能是一个不同的布局会让这更容易一些吗？感谢

Answer 1

我发现在Scene Builder中创建类似的布局非常简单。

生成的布局似乎没有任何明显的故障。

使用的层次结构是：

FXML源代码，您可以在Scene Builder中加载它以获得上面屏幕截图中显示的布局。在Scene Builder中，加载文件后，选择View | Show Sample Data。

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

<?import javafx.scene.control.*?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.*?>
<VBox id="StackPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml">
  <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 fx:id="saveAs" mnemonicParsing="false" text="">
          <graphic>
            <ImageView fitHeight="0.0" fitWidth="0.0" mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
              <image>
                <Image url="http://icons8.com/wp-content/uploads/2012/06/save_as.png" />
              </image>
            </ImageView>
          </graphic>
        </Button>
        <Button fx:id="profile" mnemonicParsing="false" text="">
          <graphic>
            <ImageView fitHeight="0.0" fitWidth="0.0" mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
              <image>
                <Image url="http://icons8.com/wp-content/uploads/2011/12/bar.png" />
              </image>
            </ImageView>
          </graphic>
        </Button>
      </items>
    </ToolBar>
    <HBox fx:id="content" prefHeight="-1.0" prefWidth="-1.0" VBox.vgrow="ALWAYS">
      <children>
        <SplitPane fx:id="fileDivider" dividerPositions="0.27424749163879597" focusTraversable="true" maxWidth="-1.0" prefHeight="-1.0" prefWidth="-1.0" HBox.hgrow="ALWAYS">
          <items>
            <TreeView fx:id="fileView" prefHeight="200.0" prefWidth="200.0" />
            <SplitPane fx:id="consoleDivider" dividerPositions="0.6042296072507553" focusTraversable="true" orientation="VERTICAL" prefHeight="-1.0" prefWidth="-1.0">
              <items>
                <TabPane id="tabbedEditor" fx:id="tabbedEditors" prefHeight="200.0" prefWidth="200.0" tabClosingPolicy="UNAVAILABLE">
                  <tabs>
                    <Tab fx:id="hello" text="Hello.java">
                      <content>
                        <TextArea prefWidth="200.0" text="public class Hello {&#10;&#10;}" wrapText="true" />
                      </content>
                    </Tab>
                    <Tab fx:id="untitled" text="Untitled">
                      <content>
                        <TextArea prefWidth="200.0" wrapText="true" />
                      </content>
                    </Tab>
                  </tabs>
                </TabPane>
                <TabPane fx:id="tabbedConsoles" prefHeight="200.0" prefWidth="200.0" tabClosingPolicy="UNAVAILABLE">
                  <tabs>
                    <Tab fx:id="console" text="Console">
                      <content>
                        <TextArea prefWidth="200.0" text="java.lang.NullPointerException&#10;    at Maze.getNumRandOccupants(Maze.java:118)&#10;    at P4TestDriver.testMaze(P4TestDriver.java:995)&#10;    at P4TestDriver.main(P4TestDriver.java:116)" wrapText="true" />
                      </content>
                    </Tab>
                    <Tab fx:id="log" text="Log">
                      <content>
                        <TextArea prefWidth="200.0" wrapText="true" />
                      </content>
                    </Tab>
                  </tabs>
                </TabPane>
              </items>
            </SplitPane>
          </items>
        </SplitPane>
      </children>
    </HBox>
  </children>
</VBox>