Создание динамического c пользовательского интерфейса с использованием JavaFX

Question

Я новичок в JavaFx и пытаюсь создать следующий экран с тремя StackPane, которые могут динамически увеличиваться и уменьшаться по ширине и высоте в зависимости от размера окна. Я пробовал разные способы, но не смог этого добиться. Я также пытался использовать ограничения AnchorPane. вот изображение того, чего я пытаюсь достичь и соответствующее F XML. Вот ограничения, которые я просматриваю между этими панелями

• Левая панель имеет максимальную ширину (300 пикселей) и минимальное расстояние 150
• между левой и правой (2) панелями стека должно оставаться постоянным
• расстояние между правой верхней и нижней панелями стека должно оставаться постоянным
• левой верхней панелью стека, чтобы иметь максимальную высоту 250px

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

<?import javafx.scene.effect.DropShadow?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.StackPane?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity"
    minHeight="-Infinity" minWidth="-Infinity" prefHeight="437.0"
    prefWidth="736.0" xmlns="http://javafx.com/javafx/11.0.1"
    xmlns:fx="http://javafx.com/fxml/1">
    <children>
        <StackPane layoutX="14.0" layoutY="27.0" prefHeight="405.0"
            prefWidth="223.0" style="-fx-background-color: white;"
            AnchorPane.bottomAnchor="12.0" AnchorPane.leftAnchor="15.0"
            AnchorPane.topAnchor="20.0">
            <effect>
                <DropShadow />
            </effect>
        </StackPane>
        <StackPane layoutX="251.0" layoutY="21.0" prefHeight="119.0"
            prefWidth="470.0" style="-fx-background-color: #ffffff;"
            AnchorPane.leftAnchor="251.0" AnchorPane.rightAnchor="15.0"
            AnchorPane.topAnchor="21.0">
            <effect>
                <DropShadow />
            </effect>
        </StackPane>
        <StackPane layoutX="251.0" layoutY="150.0"
            prefHeight="269.0" prefWidth="470.0"
            style="-fx-background-color: #ffffff;" AnchorPane.bottomAnchor="13.0"
            AnchorPane.leftAnchor="251.0" AnchorPane.rightAnchor="15.0">
            <effect>
                <DropShadow />
            </effect>
        </StackPane>
    </children>
</AnchorPane>

Answer 1

Вам просто нужно установить максимальную ширину и максимальную высоту.

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.effect.DropShadow?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<HBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
    <children>
        <StackPane layoutX="14.0" layoutY="27.0" maxWidth="400.0" prefHeight="405.0" prefWidth="223.0" style="-fx-background-color: white;" AnchorPane.bottomAnchor="12.0" AnchorPane.leftAnchor="15.0" AnchorPane.topAnchor="20.0" HBox.hgrow="ALWAYS">
            <effect>
                <DropShadow />
            </effect>
            <HBox.margin>
                <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
            </HBox.margin>
        </StackPane>
        <VBox maxHeight="1.7976931348623157E308" HBox.hgrow="ALWAYS">
            <children>
                <StackPane layoutX="251.0" layoutY="21.0" maxHeight="1.7976931348623157E308" prefHeight="119.0" prefWidth="470.0" style="-fx-background-color: #ffffff;" AnchorPane.leftAnchor="251.0" AnchorPane.rightAnchor="15.0" AnchorPane.topAnchor="21.0" VBox.vgrow="ALWAYS">
                    <effect>
                        <DropShadow />
                    </effect>
                    <VBox.margin>
                        <Insets bottom="5.0" left="10.0" right="10.0" top="10.0" />
                    </VBox.margin>
                </StackPane>
                <StackPane layoutX="251.0" layoutY="150.0" maxHeight="1.7976931348623157E308" prefHeight="269.0" prefWidth="470.0" style="-fx-background-color: #ffffff;" AnchorPane.bottomAnchor="13.0" AnchorPane.leftAnchor="251.0" AnchorPane.rightAnchor="15.0" VBox.vgrow="ALWAYS">
                    <effect>
                        <DropShadow />
                    </effect>
                    <VBox.margin>
                        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
                    </VBox.margin>
                </StackPane>
            </children>
        </VBox>
    </children>
</HBox>

Возможно, вам придется поиграть с максимальной шириной левой панели

Answer 2

Спасибо всем за помощь. Я нашел способ сделать это, используя GridPane (root панель), VBox, Anchor и панели стека. , Вот f xml для этого

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

<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.effect.DropShadow?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>


<ScrollPane fitToHeight="true" fitToWidth="true" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <content>
      <GridPane hgap="10.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="700.0" minWidth="700.0" style="-fx-border-width: 20px; -fx-border-color: white;">
        <columnConstraints>
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        </columnConstraints>
        <rowConstraints>
          <RowConstraints maxHeight="347.79999389648435" minHeight="10.0" prefHeight="139.0000061035156" vgrow="SOMETIMES" />
          <RowConstraints maxHeight="309.79999389648435" minHeight="10.0" prefHeight="180.00003662109373" vgrow="SOMETIMES" />
          <RowConstraints maxHeight="204.79996337890628" minHeight="10.0" prefHeight="204.79996337890628" vgrow="SOMETIMES" />
        </rowConstraints>
         <children>
            <VBox prefHeight="479.0" prefWidth="274.0" spacing="10.0" style="-fx-background-color: blue; -fx-border-insets: 10;" GridPane.rowSpan="2147483647">
               <effect>
                  <DropShadow />
               </effect>
            </VBox>
            <VBox prefHeight="200.0" prefWidth="100.0" spacing="10.0" GridPane.columnIndex="1" GridPane.columnSpan="2147483647" GridPane.rowSpan="2147483647">
               <children>
                  <AnchorPane prefHeight="178.0" prefWidth="547.0" style="-fx-background-color: green;">
                     <effect>
                        <DropShadow />
                     </effect>
                  </AnchorPane>
                  <StackPane maxHeight="1.7976931348623157E308" prefHeight="403.0" prefWidth="547.0" style="-fx-background-color: yellow;" VBox.vgrow="ALWAYS">
                     <effect>
                        <DropShadow />
                     </effect>
                  </StackPane>
               </children>
            </VBox>
         </children>
      </GridPane>
   </content>
</ScrollPane>

Один, который я добавил, это моя пограничная панель, вот как это выглядело