JavaFX GridPane 自动调整大小

Question

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

Grid

我使用外部 HBox，所以我可以像 whatsapp 一样对齐消息...（左对齐和右对齐）。在我的 GridPane 中，我有 2 列，左侧的消息（标签）和右侧的一些其他随机内容（时间戳，一些小图标）。现在我需要的是：GridPane / left Column / Label 的高度应该动态增长/缩小，具体取决于文本消息的长度。此外，最小高度应该是右列的高度。

这是我的单元格 .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 属性设置为Double.MAX_VALUE。这将允许Label 水平增长。

然后将fillWidth 属性添加到第一个ColumnConstraints，它将告诉列扩展其节点以填充列中的所有空间。从这些列约束中删除所有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>