使用 JavaFX 构建动态 UI答案

【问题标题】：Building dynamic UI using JavaFX使用 JavaFX 构建动态 UI
【发布时间】：2020-08-18 10:13:23
【问题描述】：

我是 JavaFx 的新手，并尝试使用三个 StackPane 构建以下屏幕，这些 StackPane 可以根据窗口大小动态增长和缩小宽度和高度。我尝试了不同的方法，但无法做到这一点。我也尝试使用 AnchorPane 约束。这是我想要实现的图像和相应的 FXML。这是我在这些窗格之间寻找的约束

左窗格具有最大宽度 (300px) 和最小 150
左右 (2) 堆栈窗格之间的距离应保持不变
右侧顶部和底部堆栈窗格之间的距离应保持不变
左侧顶部堆栈窗格的最大高度为 250 像素

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

【问题讨论】：

您希望 3 个堆栈窗格在窗口大小发生变化时表现如何？
- 左窗格具有最大宽度 (300 像素) 和最小 150 - 左右 (2) 堆栈窗格之间的距离应保持不变 - 堆栈窗格右顶部和底部之间的距离应保持不变 - 左侧顶部堆栈窗格的最大高度为 250 像素
请edit您的问题并添加基本信息。 “左侧和右侧 (2) 堆栈窗格之间的距离应保持恒定 - 右侧顶部和底部堆栈窗格之间的距离应保持恒定”我不清楚。
@c0der 感谢您的指点。将这些详细信息添加到问题中

标签： java javafx

【解决方案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>

您可能需要使用左侧面板的最大宽度

【讨论】：

感谢您的快速更新。我有最大的高度和宽度，但没有按预期工作。我在这些窗格中有不同的结构。我会工作，看看我是否适合这些。再次感谢:)
是的，您当前的结构将无法正常工作。你的结构需要反映这个答案。

【解决方案2】：

感谢大家的帮助。我找到了一种使用 GridPane(root pane)、VBox、Anchor 和 stack panes 的方法。 .这是那个的 fxml

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

一个我添加了这个我的边框在这里是它的样子

【讨论】：