使 AnchorPane 可根据其父项调整大小

Question

我有一列有 3 行。每行包含一个图像。此列是 GridPane 的子列。如您在以下 FXML 中所见：

<GridPane GridPane.columnIndex="1">
    <columnConstraints>
      <ColumnConstraints hgrow="SOMETIMES" maxWidth="7.0" minWidth="0.0" prefWidth="0.0" />
      <ColumnConstraints hgrow="SOMETIMES" maxWidth="30.0" minWidth="10.0" prefWidth="30.0" />
    </columnConstraints>
    <rowConstraints>
      <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
      <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
      <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
    </rowConstraints>
    <children>
       <ImageView fitHeight="31.0" fitWidth="29.0" onMousePressed="#addNewUser" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.rowIndex="0">
            <image>
              <Image url="@/views/add.png" />
            </image>
      </ImageView>
      <ImageView fitHeight="31.0" fitWidth="29.0" onMousePressed="#removeUser" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.rowIndex="1">
            <image>
              <Image url="@/views/remove.png" />
            </image>
      </ImageView>
      <ImageView fitHeight="31.0" fitWidth="29.0" onMousePressed="#editUser" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.rowIndex="2">
            <image>
              <Image url="@/views/edit.png" />
            </image>
      </ImageView>
   </children>
</GridPane>

根据我的理解 GridPane 具有固定大小，不会根据父级的大小进行相应更改。（如果我错了，请随时纠正我）。因此我需要用可以调整大小的 AnchorPane 包裹它们。所以我添加了它并得到了以下内容：

        <children>
            <AnchorPane prefHeight="1000.0" prefWidth="900.0" style="-fx-background-color:red" >
                <GridPane GridPane.columnIndex="1">
                    <columnConstraints>
                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="7.0" minWidth="0.0" prefWidth="0.0" />
                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="30.0" minWidth="10.0" prefWidth="30.0" />
                    </columnConstraints>
                    <rowConstraints>
                        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                    </rowConstraints>
                    <children>
                        <ImageView fitHeight="31.0" fitWidth="29.0" onMousePressed="#addNewUser" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.rowIndex="0">
                            <image>
                                <Image url="@/views/add.png" />
                            </image>
                        </ImageView>
                        <ImageView fitHeight="31.0" fitWidth="29.0" onMousePressed="#removeUser" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.rowIndex="1">
                            <image>
                                <Image url="@/views/remove.png" />
                            </image>
                        </ImageView>
                        <ImageView fitHeight="31.0" fitWidth="29.0" onMousePressed="#editUser" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.rowIndex="2">
                            <image>
                                <Image url="@/views/edit.png" />
                            </image>
                        </ImageView>
                    </children>
                </GridPane>
            </AnchorPane>
        </children>
    </GridPane>
</children>

现在的结果是所有这 3 个都粘在一起，根本没有调整大小的迹象。为了调试我已将 AnchorPane 的背景设置为红色，它显示高度和宽度都符合应有的水平，但所有这些图像仍然相互粘连。知道我该如何解决这个问题吗？

Answer 1

您的 AnchorPane 占据了所有可用位置，但它的子项没有。这是默认行为，您可以通过将所有锚点显式设置为零来更改它。

<GridPane GridPane.columnIndex="1"
          AnchorPane.topAnchor="0" AnchorPane.rightAnchor="0"
          AnchorPane.bottomAnchor="0" AnchorPane.leftAnchor="0">

同样，如果您不希望 table 垂直拉伸，您可以只设置左右锚点。

<GridPane GridPane.columnIndex="1" AnchorPane.rightAnchor="0" AnchorPane.leftAnchor="0">

使 AnchorPane 可根据其父项调整大小

making AnchorPane resizeable based on its parent

java

javafx

responsiveness