css - 使用 TitledPane 对 VBox 进行 JavaFX 填充

Question

因为我需要同时拥有多个可折叠的 TitledPanes（默认的 JavaFX Accordion 不支持），所以我在 VBox 中添加了一些 TitledPanes。到目前为止，这工作正常，但我意识到 TitledPanes 的宽度比实际 VBox 的宽度小 10px。

以下 FXML 代码：

<Pane prefHeight="700.0" prefWidth="1000.0" xmlns="http://javafx.com/javafx/8.0.71" xmlns:fx="http://javafx.com/fxml/1">
    <children>
        <VBox prefHeight="700.0" prefWidth="1000.0">
            <children>
                <TitledPane animated="false" text="Pane 1">
                    <content>
                        <AnchorPane prefHeight="300.0" />
                    </content>
                </TitledPane>
                <TitledPane animated="false" text="Pane 2">
                    <content>
                        <AnchorPane prefHeight="300.0" />
                    </content>
                </TitledPane>
            </children>
        </VBox>
    </children>
</Pane>

这会产生这个（见右边的空白）：

添加和适配一个 css 文件后，布局如下所示：

CSS代码：

VBox {
    -fx-padding: 0 -11 0 -1;
}

对我来说，这个解决方案工作正常，但它似乎是一个糟糕的解决方法。我想需要一个更聪明的解决方案？！

提前非常感谢:)

Answer 1

窗格随舞台调整大小，但VBox的宽度不超过 1000px。捕获阶段的宽度约为 1010 像素。

您应该能够省去窗格：

<VBox xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
  <children>
      <TitledPane animated="false" text="Pane 1">
          <content>
              <AnchorPane prefHeight="300.0" />
          </content>
      </TitledPane>
      <TitledPane animated="false" text="Pane 2">
          <content>
              <AnchorPane prefHeight="300.0" />
          </content>
      </TitledPane>
  </children>
</VBox>

或者使用AnchorPane来调整 vbox 的大小，如果由于某种原因需要上面的面板：

<AnchorPane xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
   <children>
        <VBox AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
            <children>
                <TitledPane animated="false" text="Pane 1">
                    <content>
                        <AnchorPane prefHeight="300.0" />
                    </content>
                </TitledPane>
                <TitledPane animated="false" text="Pane 2">
                    <content>
                        <AnchorPane prefHeight="300.0" />
                    </content>
                </TitledPane>
            </children>
        </VBox>
   </children>
</AnchorPane>

Answer 2

谢谢@geh：

将舞台大小调整为场景即可解决问题，无需调整 css：

@Override
public void start( Stage stage ) throws Exception {
    Pane root = (Pane) FXMLLoader.load( getClass().getResource( "root.fxml" ) );
    Scene scene = new Scene( root );
    stage.setScene( scene );
    stage.setResizable( false );
    // the following solved it
    stage.sizeToScene();
    stage.setTitle( "JavaFx Test" );
    stage.show();
}