如何让我的 StackPane 占据 window 的整个垂直高度？

Question

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

<?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>

Answer 1

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

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

或像

这样的 fxml

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

查看 Oracle's description about bindings…

Answer 2

听起来你想像这样重组你的布局，但我认为你可能需要明确说明你想要的是什么。

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

Answer 3

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

如果想让BorderPane填满剩下的space，设置它的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>

如何让我的 StackPane 占据 window 的整个垂直高度？

How can I make my StackPane take up the full vertical height of the window?

java

javafx

fxml

borderpane