如何手动设置 TitlePane 高度或使其适应其内容
Posted
技术标签:
【中文标题】如何手动设置 TitlePane 高度或使其适应其内容【英文标题】：How to manually set TitlePane height or make it adapt to its content 【发布时间】：2021-08-04 19:09:29 【问题描述】：我想要这样的布局：
多个标题窗格，每个窗格都有不同的内容。
问题是，默认情况下，titledPane 中的所有元素都不是可见的（ScreenShot1，带有 ChoiceBox、Label 和 Spinner 的 HBox 不可见），如果我尝试为 TitledPane 指定 prefHeight（即docs 不推荐）关闭标题窗格时会保留一个空格（ScreenShot2）。
如何使标题窗格适应其内容或指定preferredHeight 而不会在关闭时创建空格？
代码如下：
<?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>
【问题讨论】：
我的猜测是在TableView 上设置了最高高度。
【参考方案1】：
我认为你只需要将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>
【讨论】：
没想到这么简单。谢谢！【参考方案2】：我将所有东西都设置为USE_COMPUTER_SIZE，然后将TableViews max-width 设置为MAX_VALUE，将 max-height 设置为 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>
【讨论】：
谢谢！它有效，但 Anko 的回答更简洁，因为我只需要删除一个节点。以上是关于如何手动设置 TitlePane 高度或使其适应其内容的主要内容，如果未能解决你的问题，请参考以下文章