如何使Label的高度与JavaFX中的字体大小相同？

如何解决如何使Label的高度与JavaFX中的字体大小相同？

我将上部标签的字体大小设置为24px。我不知道在哪里可以检查元素的实际高度（如果在“场景”构建器中可能的话），但是框的上部（在图像中指定）和下部有多余的空间。

行距为0。
父VBox没有顶部填充。
所有标签尺寸均已计算。

我需要标签的高度等于字体大小。我的意思是FontSize = Gray space surrounded by blue markers height。

如何到达？

我也遇到过类似的HTML / CSS问题。在大多数情况下，不是一个简单但可行的解决方案是使用负边距以及:before和:after伪元素。

现在有针对JavaFX的解决方案吗？

再现

? Repository

通过Scene Builder打开resources/static/TasksOverview.fxml。

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>


<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="640.0" prefWidth="320.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <HBox alignment="CENTER_LEFT">
         <children>
            <CheckBox mnemonicParsing="false" />
            <VBox>
               <children>
                  <Label style="-fx-font-size: 24px;" text="Wake up">
                     <VBox.margin>
                        <Insets />
                     </VBox.margin>
                  </Label>
                  <Label style="-fx-font-size: 14px;" text="... and fly. I need more text to test multiline mode." wrapText="true" />
               </children>
               <HBox.margin>
                  <Insets left="12.0" />
               </HBox.margin>
            </VBox>
         </children>
         <padding>
            <Insets left="12.0" right="12.0" />
         </padding>
      </HBox>
      <HBox alignment="CENTER_LEFT" layoutX="10.0" layoutY="10.0">
         <children>
            <CheckBox mnemonicParsing="false" />
            <VBox>
               <children>
                  <Label style="-fx-font-size: 24px;" text="Wash face">
                     <VBox.margin>
                        <Insets />
                     </VBox.margin>
                  </Label>
                  <Label style="-fx-font-size: 14px;" text="... with cold water." wrapText="true" />
               </children>
               <HBox.margin>
                  <Insets left="12.0" />
               </HBox.margin>
            </VBox>
         </children>
         <padding>
            <Insets left="12.0" right="12.0" />
         </padding>
      </HBox>
   </children>
</VBox>

解决方法

标签是“智能”控件，在“皮肤”代码中包括诸如某些内置填充之类的东西，以及用于文本和图形的各种对齐方式和间距选项，并支持通过动态隐藏文本来调整大小。 / p>

如果要对文本布局的方式进行更多控制，则可以使用原始Text节点而不是Labels，然后根据需要自己进行一些其他布局。当然，您将因此失去很多内置功能（请当心……），但有时这可能正是您想要的。

例如，具有以下属性的“文本”节点：

字体大小为24。
文本的可视区域的顶部，左侧或右侧没有间距。
放置在VBox中时，文字的可视区域下方的边距为3个像素。

可以在FXML中定义如下：

<Text boundsType="VISUAL" text="Visual bounds != Logical bounds">
    <font>
        <Font size="24.0" />
    </font>
    <VBox.margin>
        <Insets bottom="3.0" />
    </VBox.margin>
</Text>

如果您在大量文本上使用此内容，则可以在样式表中设置许多值，而不是FXML（最好使用）。除了要说有一个文本未公开的-fx-bounds-type css属性之外，我这里不会描述如何做。

有时候，比起使用Text节点，通过使用负数插入（通常是我的首选选项）之类的东西来“砍”类似于Matt答案的Label可能更好。

小心，随后进行深奥的讨论，准备忽略它;-）

一个关键部分是将boundsType设置为VISUAL。默认情况下，文本的边界通常比您实际看到的要大一些，这可以简化对齐问题，因为这意味着字母“ a”和字母“ A”的边界相同。这种界限是默认界限，称为逻辑界限。 VISUAL边界使这两个字母的边界不同，因此“ a”的边界小于“ A”的边界，这使材料不会占用超出绝对需要的空间。

例如，使用带有VISUAL边界的Text而不是Label，可以消除出现在示例屏幕截图上的文本周围的两组多余空白。 Label控件的内部布局算法分配了一组空白，而LOGICAL边界分配了另一组空白。

通过应用适当的CSS样式表，可以在标签内将边界设置为VISUAL，但是，如果这样做，标签仍然不会缩小以仅适合VISUAL边界，因为它似乎被编码为基于VISUAL逻辑界限，至少那是我尝试进行的一些快速测试所显示的。因此，在标签中的文本中使用VISUAL边界似乎只会使其显示不正确（某些人甚至会将其归类为bug）。如果您在标签内设置了带有Text的图形，这可能会起作用，但是如果这样做，则标签对您没有多大帮助，也可以直接使用Text节点（除非您使用的是TitledPane之类的控件，标题中包含标签，在这种情况下，您必须使用标签。

只需设置一个负值插图，它将缩小标签上方的空间，例如：

<Insets top="-5.0"/>

完整的FXML

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>


<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="640.0" prefWidth="320.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
    <children>
        <HBox alignment="CENTER_LEFT">
            <children>
                <CheckBox mnemonicParsing="false" />
                <VBox>
                    <children>
                        <Label style="-fx-font-size: 24px;" text="Wake up">
                            <VBox.margin>
                                <Insets top="-5.0"/>
                            </VBox.margin>
                        </Label>
                        <Label style="-fx-font-size: 14px;" text="... and fly. I need more text to test multiline mode." wrapText="true" />
                    </children>
                    <HBox.margin>
                        <Insets left="12.0" />
                    </HBox.margin>
                </VBox>
            </children>
            <padding>
                <Insets left="12.0" right="12.0" />
            </padding>
        </HBox>
        <HBox alignment="CENTER_LEFT" layoutX="10.0" layoutY="10.0">
            <children>
                <CheckBox mnemonicParsing="false" />
                <VBox>
                    <children>
                        <Label style="-fx-font-size: 24px;" text="Wash face">
                            <VBox.margin>
                                <Insets />
                            </VBox.margin>
                        </Label>
                        <Label style="-fx-font-size: 14px;" text="... with cold water." wrapText="true" />
                    </children>
                    <HBox.margin>
                        <Insets left="12.0" />
                    </HBox.margin>
                </VBox>
            </children>
            <padding>
                <Insets left="12.0" right="12.0" />
            </padding>
        </HBox>
    </children>
</VBox>

如何使Label的高度与JavaFX中的字体大小相同？

如何解决如何使Label的高度与JavaFX中的字体大小相同？

再现

解决方法

相关推荐