如何让我的 StackPane 占据窗口的整个垂直高度？答案

【问题标题】：How can I make my StackPane take up the full vertical height of the window?如何让我的 StackPane 占据窗口的整个垂直高度？
【发布时间】：2017-08-09 14:04:23
【问题描述】：

我正在尝试使位于主 BorderPane 的 <left> 元素中的 StackPane 占据窗口的整个垂直高度，即使在调整大小时也是如此。我怎样才能做到这一点？这是我到目前为止所得到的：

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

<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.Group?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.*?>

<VBox prefWidth="800.0" prefHeight="600.0" xmlns="http://javafx.com/javafx/8.0.112" xmlns:fx="http://javafx.com/fxml/1">
    <VBox alignment="TOP_CENTER">
        <ToolBar minHeight="50.0" prefHeight="50.0" prefWidth="800.0" stylesheets="@style.css" GridPane.rowIndex="1">
            <ImageView fitHeight="35.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true">
                <Image url="@react-toolbar-logo.png"/>
            </ImageView>
        </ToolBar>
        <MenuBar fx:id="menuBar" prefHeight="0.0" prefWidth="0.0"/>
    </VBox>

    <BorderPane xmlns:fx="http://javafx.com/fxml">

        <left>
            <StackPane prefWidth="230">
                <ListView fx:id="listView"/>
            </StackPane>
        </left>
        <right>
            <StackPane>
                <ScrollPane>
                    <Group fx:id="selectionGroup">
                        <ImageView fx:id="mainImageView"/>
                    </Group>
                </ScrollPane>
            </StackPane>
        </right>

    </BorderPane>
</VBox>

【问题讨论】：

窗口的全高还是BorderPane的全高？与 top_center 对齐的 VBox 将阻止您执行前者（除非您重新组织事物）。

标签： java javafx fxml borderpane

【解决方案1】：

堆栈窗格（以及随之而来的ListView：我不确定您为什么需要将ListView 包裹在StackPane 中）已经填满了边框的整个高度窗格。你可以看到这个，例如通过更改边框窗格的背景颜色。问题是边框窗格没有增长以填充周围VBox 中的所有可用空间。

如果您想让BorderPane 填充剩余空间，请将其VBox.vgrow 属性设置为ALWAYS：

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

<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.Group?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.*?>
<?import java.lang.Double?>

<VBox prefWidth="800.0" prefHeight="600.0" xmlns="http://javafx.com/javafx/8.0.112" xmlns:fx="http://javafx.com/fxml/1">

    <VBox alignment="TOP_CENTER">
        <ToolBar minHeight="50.0" prefHeight="50.0" prefWidth="800.0" GridPane.rowIndex="1">
            <ImageView fitHeight="35.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true">
                <Image url="@react-toolbar-logo.png"/>
            </ImageView>
        </ToolBar>
        <MenuBar fx:id="menuBar" prefHeight="0.0" prefWidth="0.0"/>

    </VBox>

    <BorderPane VBox.vgrow="ALWAYS">

        <left>
            <StackPane prefWidth="230">
                <ListView fx:id="listView" />
            </StackPane>

        </left>
        <right>
            <StackPane>
                <ScrollPane>
                    <Group fx:id="selectionGroup">
                        <ImageView fx:id="mainImageView"/>
                    </Group>
                </ScrollPane>
            </StackPane>
        </right>

    </BorderPane>

</VBox>

【讨论】：

【解决方案2】：

绑定对应的值。如果您想让孩子始终填充其父母的大小，则可以将孩子的prefHeightProperty 绑定到其父母的heightProperty。这在 java 代码中是可能的，比如

child.prefHeightProperty().bind(parent.heightProperty);

或在 fxml 中，如

<ListView fx:id="listView" prefHeight="${listView.parent.width}"/>

查看Oracle's description about bindings…

【讨论】：

绑定属性来调整布局对我来说似乎总是一个技巧。直接使用布局窗格的属性或子节点上的设置来影响布局。
虽然它可能看起来很老套，但在许多情况下它可能完全符合您的要求。你是对的，@James_D，黑客攻击的可能性可能会更少。
不过，请想想幕后发生的事情。在布局过程中，列表视图父级的高度可能由其首选项高度决定，而首选项高度由其子节点的首选项高度决定。如果您将子节点的首选项高度绑定到父节点的高度，那么您实际上是在违背 JavaFX 中执行布局的方式，充其量，并且可能会产生无限递归或布局的风险，在每个布局过程中都会发生变化，最坏的情况是.
另外，在这种情况下它不会有任何区别，因为列表视图/堆栈窗格的增长实际上并不是问题:)。

【解决方案3】：

这听起来你想像这样重组你的布局，但我认为你可能需要明确你所追求的。

<BorderPane xmlns:fx="http://javafx.com/fxml">
    <left>
        <StackPane> ... </StackPane>
    </left>
    <right>
        <StackPane> ... </StackPane>
    </right>
    <top>
        <VBox>
            <ToolBar> ... </ToolBar>
            <MenuBar> ... </MenuBar>
        <VBox>
    </top>
</BorderPane>

【讨论】：

James_D 的回答最终解决了我的垂直拉伸要求。 :)，但这比我所拥有的要干净得多。我将顶部组件移到了 BorderPane 中。谢谢。