调整窗口大小时,如何使Javafx中的元素不与另一个元素重叠?

我正在用Java开发一个简单的UI应用程序。我有一个Listview和下面的进度条。当您第一次运行该应用程序时,UI很好,但是当我调整窗口大小时,列表视图会扩展它应有的方式,但被进度条遮盖,该进度条固定在顶部的原始点,并在底部延伸。

有没有一种方法可以使调整窗口大小时的列表视图和进度条按比例放大/缩小?

我尝试在两个元素之间添加一个容器,并将其设置为始终垂直生长,但是它也不起作用。

main.fxml

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

<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<VBox prefHeight="400.0" prefWidth="640.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.learning.javaui.Controller">
    <MenuBar VBox.vgrow="NEVER">
        <Menu mnemonicParsing="false" text="File">
            <MenuItem fx:id="quitMenuItem" mnemonicParsing="false" text="Quit" />
        </Menu>
    </MenuBar>
    <AnchorPane VBox.vgrow="ALWAYS">
        <SplitPane dividerPositions="0.3322884012539185" layoutX="77.0" layoutY="79.0" prefHeight="160.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
            <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
                <padding>
                    <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                </padding>
                <GridPane layoutX="20.0" layoutY="10.0" prefHeight="30.0" prefWidth="189.0" AnchorPane.leftAnchor="15.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="5.0">
                    <columnConstraints>
                        <ColumnConstraints hgrow="NEVER" minWidth="50.0" prefWidth="100.0" />
                        <ColumnConstraints hgrow="ALWAYS" maxWidth="-Infinity" />
                        <ColumnConstraints hgrow="ALWAYS" maxWidth="-Infinity" minWidth="10.0" prefWidth="100.0" />
                    </columnConstraints>
                    <rowConstraints>
                        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                    </rowConstraints>
                    <TextField fx:id="nameField" prefHeight="25.0" promptText="Enter Name" GridPane.halignment="LEFT" GridPane.hgrow="ALWAYS" />
                    <Button fx:id="saveButton" mnemonicParsing="false" text="Save" GridPane.columnIndex="2" GridPane.halignment="CENTER" />
                </GridPane>
                <ListView fx:id="names" layoutX="10.0" layoutY="43.0" prefHeight="330.0" prefWidth="200.0" AnchorPane.bottomAnchor="50.0" AnchorPane.leftAnchor="5.0" AnchorPane.rightAnchor="5.0" AnchorPane.topAnchor="40.0" />
            <ProgressBar prefHeight="25.0" prefWidth="160.0" AnchorPane.bottomAnchor="20.0" AnchorPane.leftAnchor="25.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="530.0" />
            </AnchorPane>
            <TabPane fx:id="userPanel" prefHeight="200.0" prefWidth="200.0" />
        </SplitPane>
    </AnchorPane>
</VBox>

屏幕截图:

最初运行应用程序时: How it should look

当我调整窗口大小时,元素重叠: Elements after window is resized

iCMS 回答:调整窗口大小时,如何使Javafx中的元素不与另一个元素重叠?

删除AnchorPane.topAnchor="530.0"

<ProgressBar prefHeight="25.0" prefWidth="160.0" AnchorPane.bottomAnchor="20.0" AnchorPane.leftAnchor="25.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="530.0" />
,

如James所述,在这种情况下不建议使用goal-and-context。我个人喜欢主要在布局中使用AnchorPaneVBox。当节点需要堆叠或并排放置时,它们非常有用。当且仅当节点需要堆叠并排时,我才会使用HBox。下面的示例代码。

GridPane
本文链接:https://www.f2er.com/1803545.html

大家都在问