JavaFX GridPane 自动调整大小

Question

我是 JavaFX 新手，目前我尝试构建一个小型聊天窗口。为此，我为 ListView 设置了以下自定义单元格布局。

Grid

我使用外部 HBox，因此我可以像 Whatsapp... 那样对齐消息(左右对齐)。在我的 GridPane 中，我有 2 列，左侧是消息(标签)，右侧是一些其他随机内容(时间戳、一些小图标)。现在我需要的是:GridPane/左列/标签的高度应该动态增长/收缩，具体取决于文本消息的长度。此外，最小高度应该是右列的高度。

这是我的单元格 .fxml:

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

<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>

<HBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="50" minWidth="-Infinity" prefWidth="580.0" styleClass="theme-presets inbox-entry" xmlns="http://javafx.com/javafx/null" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <GridPane prefHeight="100.0" prefWidth="452.0">
        <columnConstraints>
          <ColumnConstraints hgrow="ALWAYS" maxWidth="359.0" minWidth="10.0" prefWidth="351.0" />
          <ColumnConstraints hgrow="SOMETIMES" maxWidth="103.0" minWidth="0.0" prefWidth="101.0" />
        </columnConstraints>
        <rowConstraints>
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="ALWAYS" />
        </rowConstraints>
         <children>
            <Label fx:id="labelMessage" alignment="TOP_LEFT" prefHeight="100.0" prefWidth="286.0"  wrapText="true" />
            <AnchorPane prefHeight="100.0" prefWidth="133.0" GridPane.columnIndex="1">
               <children>
                  <ImageView fx:id="imageViewEncrypted" fitHeight="33.0" fitWidth="33.0" layoutX="4.0" layoutY="23.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../images/key.png" />
                     </image>
                  </ImageView>
                  <ImageView fx:id="imageViewSigned" fitHeight="42.0" fitWidth="33.0" layoutX="4.0" layoutY="50.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../images/doublecheck.png" />
                     </image>
                  </ImageView>
                  <Label fx:id="labelTime" layoutX="4.0" layoutY="6.0" prefHeight="17.0" prefWidth="76.0" text="Label" />
               </children>
            </AnchorPane>
         </children>
      </GridPane>
   </children>
</HBox>

编辑:这是工作版本

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

<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>

<HBox maxHeight="-Infinity" maxWidth="-Infinity" prefWidth="580.0" styleClass="theme-presets inbox-entry" xmlns="http://javafx.com/javafx/null" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <GridPane prefWidth="452.0">
        <columnConstraints>
          <ColumnConstraints hgrow="SOMETIMES" maxWidth="350" />
          <ColumnConstraints hgrow="SOMETIMES" />
        </columnConstraints>
        <rowConstraints>
          <RowConstraints fillHeight="true" vgrow="ALWAYS" />

        </rowConstraints>
         <children>
            <Label fx:id="labelMessage" alignment="TOP_LEFT" maxHeight="Infinity" text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." wrapText="true" />
            <AnchorPane GridPane.columnIndex="1">
               <children>
                  <ImageView fx:id="imageViewEncrypted" fitHeight="33.0" fitWidth="33.0" layoutX="43.0" layoutY="-2.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../images/key.png" />
                     </image>
                  </ImageView>
                  <ImageView fx:id="imageViewSigned" fitHeight="42.0" fitWidth="33.0" layoutX="80.0" layoutY="-2.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../images/doublecheck.png" />
                     </image>
                  </ImageView>
                  <Label fx:id="labelTime" layoutX="4.0" layoutY="6.0" prefHeight="17.0" prefWidth="76.0" text="Label" />
               </children>
            </AnchorPane>
         </children>
      </GridPane>
   </children>
</HBox>

Answer 1

从 Label 中删除 prefWidth 和 prefHeight 属性，并将 maxWidth 属性设置为 双倍.MAX_VALUE。这将允许Label水平增长。

然后向第一个 ColumnConstraints 添加一个 fillWidth 属性，该属性将告诉列展开其节点以填充列中的所有空间。从这些列约束中删除所有 prefWidth、minWidth 和 maxWidth 属性，以允许它们动态调整大小。

一般来说，对尺寸进行硬编码将阻止调整大小。您可能需要从 fxml 中删除其他硬编码大小。

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

<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>

<HBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="50" minWidth="-Infinity" prefWidth="580.0" styleClass="theme-presets inbox-entry" xmlns="http://javafx.com/javafx/null" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <GridPane prefHeight="100.0" prefWidth="452.0">
        <columnConstraints>
          <ColumnConstraints hgrow="ALWAYS" fillWidth="true" />
          <ColumnConstraints hgrow="SOMETIMES" />
        </columnConstraints>
        <rowConstraints>
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="ALWAYS" />
        </rowConstraints>
         <children>
            <Label fx:id="labelMessage" alignment="TOP_LEFT" maxWidth="Infinity"  wrapText="true" />
            <AnchorPane  GridPane.columnIndex="1">
               <children>
                  <ImageView fx:id="imageViewEncrypted" fitHeight="33.0" fitWidth="33.0" layoutX="4.0" layoutY="23.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../images/key.png" />
                     </image>
                  </ImageView>
                  <ImageView fx:id="imageViewSigned" fitHeight="42.0" fitWidth="33.0" layoutX="4.0" layoutY="50.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../../images/doublecheck.png" />
                     </image>
                  </ImageView>
                  <Label fx:id="labelTime" layoutX="4.0" layoutY="6.0" prefHeight="17.0" prefWidth="76.0" text="Label" />
               </children>
            </AnchorPane>
         </children>
      </GridPane>
   </children>
</HBox>