如何让我的StackPane占据窗户的整个垂直高度?

问题描述:

我试图让位于我的主BorderPane的<left>元素中的StackPane占用窗口的整个垂直高度,即使其大小已调整。我怎样才能做到这一点?这是我迄今得到的:如何让我的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> 
+1

的*窗口*或的全高* BorderPane *的全高?与top_center对齐的VBox将阻止你做前者(除非你重新组织)。 – Michael

栈窗格(并因此ListView:我不知道为什么你需要用一个StackPaneListView)已经填充边界窗格的整个高度。你可以看到这个,例如通过更改边框窗格的背景颜色。问题在于边框窗格没有增长以填充周围的所有可用空间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> 
+0

这解决了我的问题。非常感谢你。 – santafebound

绑定相应的值。如果您想让孩子始终填写其父母的大小,则可以将孩子的prefHeightProperty绑定到其父母的heightProperty。 这是可能在Java代码中一样

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

或类似

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

退房Oracle's description about bindings…

+1

绑定属性来调整布局总是看起来像对我来说是一个黑客。直接使用布局窗格的属性或子节点上的设置来影响布局。 –

+0

尽管它可能看起来很骇人,但它可能正是在许多情况下做你想要的。你说得对,@James_D,可能不太可能。 – deHaar

+0

但是,想想幕后发生的事情。在布局过程中,列表视图父项的高度很可能取决于其前缀高度,该高度取决于其子节点的前缀高度。如果将子节点的前缀高度绑定到父节点的高度,那么实际上,您真的在与JavaFX中的布局执行方式相反,并且可能会在每个布局过程中创建无限递归或布局,并且可能会在最坏情况下。 –

FXML就像你要调整你的布局,像这样的声音 ,但我认为你可能需要澄清你究竟是什么。

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

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