如何手动设置 TitlePane 高度或使其适应其内容

How to manually set TitlePane height or make it adapt to its content

我想要这样的布局:

多个带标题的窗格,每个窗格都有不同的内容。

问题是默认情况下,并非所有 titledPane 内的元素都是可见的 (ScreenShot1, the HBox with ChoiceBox, Label and Spinner aren't visible), and if I try to specify a prefHeight for the TitledPane (which is not recommended by the docs) a blank space remain when the titled pane is closed (ScreenShot2)。

如何使带标题的窗格适应其内容或指定首选高度而不在关闭时创建空格?

代码如下:

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ChoiceBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.Spinner?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TitledPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<StackPane prefHeight="989.0" prefWidth="1240.0" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <AnchorPane StackPane.alignment="TOP_LEFT">
         <children>
            <SplitPane dividerPositions="0.55" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
              <items>
                <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
                     <children>
                        <ScrollPane fitToWidth="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                           <content>
                              <VBox>
                                 <children>
                                  <TitledPane alignment="TOP_LEFT" contentDisplay="TOP" nodeOrientation="LEFT_TO_RIGHT" text="TITLED PANE 1">
                                       <content>
                                          <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
                                             <children>
                                                <VBox prefHeight="200.0" prefWidth="100.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
                                                   <children>
                                                      <TableView minHeight="200.0" prefHeight="171.0" prefWidth="297.0">
                                                         <columns>
                                                            <TableColumn prefWidth="87.0" text="C1" />
                                                            <TableColumn minWidth="0.0" prefWidth="63.0" text="C2" />
                                                         </columns>
                                                      </TableView>
                                                      <HBox prefHeight="100.0" prefWidth="200.0">
                                                         <children>
                                                            <ChoiceBox prefWidth="150.0" />
                                                            <Label text="some label" />
                                                            <Spinner />
                                                         </children>
                                                      </HBox>
                                                   </children>
                                                </VBox>
                                             </children>
                                          </AnchorPane>
                                       </content>
                                  </TitledPane>
                                  <TitledPane alignment="TOP_LEFT" contentDisplay="TOP" nodeOrientation="LEFT_TO_RIGHT" text="TITLED PANE 2">
                                       <content>
                                          <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
                                             <children>
                                                <TableView layoutX="14.0" layoutY="14.0" prefHeight="171.0" prefWidth="297.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
                                                   <columns>
                                                      <TableColumn prefWidth="87.0" text="C1" />
                                                      <TableColumn minWidth="0.0" prefWidth="63.0" text="C2" />
                                                   </columns>
                                                </TableView>
                                             </children>
                                          </AnchorPane>
                                       </content>
                                  </TitledPane>
                                  <TitledPane alignment="TOP_LEFT" contentDisplay="TOP" nodeOrientation="LEFT_TO_RIGHT" text="TITLED PANE 3">
                                       <content>
                                          <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
                                             <children>
                                                <TableView layoutX="14.0" layoutY="14.0" prefHeight="171.0" prefWidth="297.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
                                                   <columns>
                                                      <TableColumn prefWidth="87.0" text="C1" />
                                                      <TableColumn minWidth="0.0" prefWidth="63.0" text="C2" />
                                                   </columns>
                                                </TableView>
                                             </children>
                                          </AnchorPane>
                                       </content>
                                  </TitledPane>
                                    <TitledPane alignment="TOP_LEFT" contentDisplay="TOP" nodeOrientation="LEFT_TO_RIGHT" text="TITLED PANE 4">
                                       <content>
                                          <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="480.0">
                                             <children>
                                                <TableView layoutX="14.0" layoutY="14.0" prefHeight="171.0" prefWidth="297.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
                                                   <columns>
                                                      <TableColumn prefWidth="87.0" text="C1" />
                                                      <TableColumn minWidth="0.0" prefWidth="63.0" text="C2" />
                                                   </columns>
                                                </TableView>
                                             </children>
                                          </AnchorPane>
                                       </content>
                                    </TitledPane>
                                 </children>
                              </VBox>
                           </content>
                        </ScrollPane>
                     </children>
                  </AnchorPane>
                <AnchorPane minHeight="0.0" minWidth="0.0" />
              </items>
            </SplitPane>
         </children>
         <padding>
            <Insets bottom="80.0" />
         </padding>
      </AnchorPane>
      <VBox alignment="CENTER" maxHeight="80.0" style="-fx-background-color: grey;" StackPane.alignment="BOTTOM_CENTER">
         <children>
            <Button mnemonicParsing="false" text="FIXED BUTTON">
               <font>
                  <Font size="24.0" />
               </font>
            </Button>
         </children>
      </VBox>
   </children>
</StackPane>

我觉得你只要把VBox作为第一个TitledPane的内容节点就行了。在 Scene Buider 中用鼠标右键单击 AnchorPane 并选择 "Unwrap"。 FXML 的部分应该如下所示:

<TitledPane alignment="TOP_LEFT" contentDisplay="TOP" nodeOrientation="LEFT_TO_RIGHT" text="TITLED PANE 1">
    <content>
          <VBox prefHeight="200.0" prefWidth="100.0"> <!-- VBox direct content node instead of AnchorPane -->
              <children>
                  <TableView minHeight="200.0" prefHeight="171.0" prefWidth="297.0">
                      <columns>
                          <TableColumn prefWidth="87.0" text="C1" />
                          <TableColumn minWidth="0.0" prefWidth="63.0" text="C2" />
                      </columns>
                  </TableView>
                  <HBox prefHeight="100.0" prefWidth="200.0">
                      <children>
                          <ChoiceBox prefWidth="150.0" />
                          <Label text="some label" />
                          <Spinner />
                      </children>
                  </HBox>
              </children>
          </VBox>
    </content>
</TitledPane>

我将所有东西都设置为 USE_COMPUTER_SIZE,然后将 TableViews 最大宽度设置为 MAX_VALUE,将最大高度设置为 200。希望这对你有用!


<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ChoiceBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.Spinner?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TitledPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<StackPane prefHeight="989.0" prefWidth="1240.0" xmlns="http://javafx.com/javafx/15.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <AnchorPane StackPane.alignment="TOP_LEFT">
         <children>
            <SplitPane dividerPositions="0.55" minWidth="-Infinity" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
              <items>
                <AnchorPane>
                     <children>
                        <ScrollPane fitToWidth="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                           <content>
                              <VBox>
                                 <children>
                                  <TitledPane alignment="TOP_LEFT" contentDisplay="TOP" nodeOrientation="LEFT_TO_RIGHT" text="TITLED PANE 1">
                                       <content>
                                          <AnchorPane>
                                             <children>
                                                <VBox alignment="CENTER" spacing="2.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
                                                   <children>
                                                      <TableView maxHeight="200.0" maxWidth="1.7976931348623157E308">
                                                         <columns>
                                                            <TableColumn maxWidth="1.7976931348623157E308" prefWidth="87.0" text="C1" />
                                                            <TableColumn maxWidth="1.7976931348623157E308" minWidth="0.0" prefWidth="63.0" text="C2" />
                                                         </columns>
                                                      </TableView>
                                                      <HBox alignment="CENTER_LEFT" spacing="2.0">
                                                         <children>
                                                            <ChoiceBox prefWidth="150.0" />
                                                            <Label text="some label" />
                                                            <Spinner />
                                                         </children>
                                                         <VBox.margin>
                                                            <Insets />
                                                         </VBox.margin>
                                                      </HBox>
                                                   </children>
                                                </VBox>
                                             </children>
                                          </AnchorPane>
                                       </content>
                                  </TitledPane>
                                  <TitledPane alignment="TOP_LEFT" contentDisplay="TOP" nodeOrientation="LEFT_TO_RIGHT" text="TITLED PANE 2">
                                       <content>
                                          <AnchorPane>
                                             <children>
                                                <TableView layoutX="14.0" layoutY="14.0" maxHeight="200.0" maxWidth="1.7976931348623157E308" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
                                                   <columns>
                                                      <TableColumn prefWidth="87.0" text="C1" />
                                                      <TableColumn minWidth="0.0" prefWidth="63.0" text="C2" />
                                                   </columns>
                                                </TableView>
                                             </children>
                                          </AnchorPane>
                                       </content>
                                  </TitledPane>
                                  <TitledPane alignment="TOP_LEFT" contentDisplay="TOP" nodeOrientation="LEFT_TO_RIGHT" text="TITLED PANE 3">
                                       <content>
                                          <AnchorPane>
                                             <children>
                                                <TableView layoutX="14.0" layoutY="14.0" maxHeight="200.0" maxWidth="1.7976931348623157E308" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
                                                   <columns>
                                                      <TableColumn prefWidth="87.0" text="C1" />
                                                      <TableColumn minWidth="0.0" prefWidth="63.0" text="C2" />
                                                   </columns>
                                                </TableView>
                                             </children>
                                          </AnchorPane>
                                       </content>
                                  </TitledPane>
                                    <TitledPane alignment="TOP_LEFT" contentDisplay="TOP" nodeOrientation="LEFT_TO_RIGHT" text="TITLED PANE 4">
                                       <content>
                                          <AnchorPane>
                                             <children>
                                                <TableView layoutX="14.0" layoutY="14.0" maxHeight="200.0" maxWidth="1.7976931348623157E308" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
                                                   <columns>
                                                      <TableColumn prefWidth="87.0" text="C1" />
                                                      <TableColumn minWidth="0.0" prefWidth="63.0" text="C2" />
                                                   </columns>
                                                </TableView>
                                             </children>
                                          </AnchorPane>
                                       </content>
                                    </TitledPane>
                                 </children>
                              </VBox>
                           </content>
                        </ScrollPane>
                     </children>
                  </AnchorPane>
                <AnchorPane />
              </items>
            </SplitPane>
         </children>
         <padding>
            <Insets bottom="80.0" />
         </padding>
      </AnchorPane>
      <VBox alignment="CENTER" maxHeight="80.0" style="-fx-background-color: grey;" StackPane.alignment="BOTTOM_CENTER">
         <children>
            <Button mnemonicParsing="false" text="FIXED BUTTON">
               <font>
                  <Font size="24.0" />
               </font>
            </Button>
         </children>
      </VBox>
   </children>
</StackPane>