当前位置: 首页 > 知识库问答 >
问题:

JavaFX GridPane自动调整大小

楚泳
2023-03-14

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

网格

我使用外部HBox,所以我可以像whatsapp一样对齐消息。。。(左右对齐)。在我的GridPane中,我得到了两列,消息(标签)在左侧,其他一些随机的东西在右侧(时间戳,一些小图标)。现在我需要的是: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>

共有1个答案

艾焱
2023-03-14

标签中删除prefWidthprefHeight属性,并将maxWidth属性设置为Double。最大值。这将允许标签水平增长。

然后将一个fillWidth属性添加到第一个GonnConstraint,这将告诉列扩展其节点以填充列中的所有空间。从这些列约束中删除所有prefWidthminWidthmaxWidth属性,以允许它们动态调整大小。

通常,硬编码尺寸会阻止调整尺寸。您可能需要从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>

 类似资料:
  • Android最近增加了根据视图大小以及最小和最大文本大小调整TextViews文本大小的支持。 https://developer.Android.com/guide/topics/ui/look-and-feel/autosizing-textView.html 不幸的是,他们不支持EditTexts,那么EditText还有其他的替代方案吗?

  • 我在使用gmap组件时遇到了一个小问题:当我试图使组件可调整大小时(即在CSS的帮助下将地图的高度和宽度都设置为100%),组件会收缩,地图本身也会变得不可见。但如果设置了固定的高度/宽度,则组件工作良好。有没有一种方法可以自动调整GMAP的大小?

  • 所以,我试图在JavaFX中显示一个棋盘。我将不得不执行不同的操作和绘制一些瓷砖,所以我选择使用画布为每个瓷砖和一个网格窗格为我以网格的方式排列它们。 不幸的是,我有一些问题与网格瓷砖的大小;我想让我的整个棋盘自动适应它的大小来适应场景。因此,我在GridPane的height和width属性中添加了一个ChangeListener,它负责调整瓷砖的大小。这只在窗口变大时起作用,当窗口缩小到更小的

  • 问题内容: 我一直试图(徒劳地)建立一个页面,当我更改窗口大小时,其元素将重新调整大小。我可以在CSS中使用它来处理图像,但是没有问题,但是我似乎无法在文本上完成相同的操作,而且我不确定在CSS中是否有可能。而且我似乎找不到能完成此任务的jQuery脚本。 当用户调整窗口大小时,我实质上希望页面能够动态流畅地缩放,而无需用户调用页面缩放。通过css在我的img div上这可以正常工作,但对于文本则

  • 我是一个新的android开发和我正在尝试创建和应用程序与网格菜单,菜单。 当前依赖项:compile fileTree(目录:“libs”,include:['*.jar'])testCompile“junit:junit:4.12”编译组:“org.apache.httpcomponents”,名称:“httpclient-android”,版本:“4.3.5.1”编译组:“cz.mseber

  • 问题内容: 我在一个网格中嵌套了两个网格。不幸的是,右边的嵌套网格设置行的高度,以使左边和右边的网格都具有相同的高度,额外的空间在class的div之间共享。如何设置右侧嵌套网格的行以调整内容的大小,使其与左侧嵌套行的高度相同? 问题答案: 您可以尝试 参考 您也可以只使用或