Как я могу сделать так, чтобы один элемент в Javafx не перекрывался другим при изменении размера окна?

Question

Я делаю простое UI-приложение на Java. У меня есть Listview и индикатор выполнения под ним. Когда вы впервые запускаете приложение, пользовательский интерфейс в порядке, но когда я изменяю размер окна, список расширяется так, как должен, но маскируется индикатором выполнения, который остается фиксированным в исходной точке вверху и растягивается внизу.

Есть ли способ сделать так, чтобы список и индикатор выполнения масштабировались вверх / вниз пропорционально при изменении размера окна?

Я попытался добавить контейнер между двумя элементами и настроить его всегда вертикально но и это не сработало.

main.f xml

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

Скриншоты:

При первоначальном запуске приложения: Как оно должно выглядеть

Когда я изменяю размер окна, элементы перекрываются: Элементы после изменения размера окна

Answer 1

Как сказал Джеймс, AnchorPane не рекомендуется в этой ситуации. Лично мне нравится использовать VBox и HBox в основном в моих макетах. Они очень полезны, когда узлы нужно ставить в стопку или бок о бок. Я бы использовал GridPane, если и только если узлы нужно было сложить друг с другом. Пример кода ниже.

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.ProgressBar?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>

<VBox prefHeight="500.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>
     <SplitPane dividerPositions="0.3322884012539185" prefHeight="160.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
      <VBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity">
         <children>
            <HBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity" spacing="20.0">
               <children>
                       <TextField fx:id="nameField" maxHeight="-Infinity" maxWidth="-Infinity" prefWidth="100.0" promptText="Enter Name">
                     <HBox.margin>
                        <Insets left="20.0" />
                     </HBox.margin>
                  </TextField>
                       <Button fx:id="saveButton" maxHeight="-Infinity" maxWidth="-Infinity" mnemonicParsing="false" text="Save" />
               </children>
               <VBox.margin>
                  <Insets bottom="5.0" top="10.0" />
               </VBox.margin>
            </HBox>
                <ListView fx:id="names" VBox.vgrow="ALWAYS">
               <VBox.margin>
                  <Insets left="5.0" right="5.0" />
               </VBox.margin>
            </ListView>
            <ProgressBar progress="0.0">
               <VBox.margin>
                  <Insets top="2.0" />
               </VBox.margin>
            </ProgressBar>
         </children>
      </VBox>
         <TabPane fx:id="userPanel" prefHeight="200.0" prefWidth="200.0" />
     </SplitPane>
</VBox>

Answer 2

удалить 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" />