изменение размера 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"> 

Точно так же, если вы не хотите, чтобы ваш стол, чтобы растянуть по вертикали, вы можете установить только правый и левый якорь.

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