javafx - 如何让标签的高度与 JavaFX 中的字体大小相同？

Question

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

行距为0 .

父 VBox 没有顶部填充。

计算所有标签大小。

我需要标签的高度等于字体大小。
我的意思是 FontSize = Gray space surrounded by blue markers height .
如何达到？
我遇到过类似的问题 HTML/CSS。
在那里，对于大多数情况来说，不是简单但可行的解决方案是负边距和 :before和 :after伪元素。
现在有哪些适用于 JavaFX 的解决方案？
再现
🌎 Repository
打开 resources/static/TasksOverview.fxml来自 Scene Builder .

<?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>

Answer 1

标签是“智能”控件，在“皮肤”代码中包括一些内置填充等内容，以及文本和图形的各种对齐和间距选项，并支持通过动态删除文本来调整大小。
如果您想要更多地控制文本布局的发生方式，那么您可以使用原始文本节点而不是标签，然后根据需要自己进行一些额外的布局。当然，这样你会失去很多内置功能(买家当心......)，但有时这可能是你想要的。
例如，具有以下属性的 Text 节点:

字体大小为 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 答案的标签(这通常是我的首选选项......)。
小心，下面是深奥的讨论，准备好忽略它;-)
一个关键部分是设置 boundsType到视觉。默认情况下，文本的边界通常比您实际看到的要多一点，这可以缓解对齐问题，因为这意味着字母“a”和字母“A”的边界是相同的。这种边界是默认的，称为逻辑边界。 VISUAL bounds 使这两个字母的边界不同，所以“a”的边界小于“A”的边界，这使得东西不会占用比绝对需要更多的空间。
例如，使用带有 VISUAL 边界的文本而不是标签，可以去除示例屏幕截图中显示的文本周围的两组额外空白。一组空格由 Label 控件的内部布局算法分配，另一组空格分配给 LOGICAL 边界。
通过应用适当的 CSS 样式表，可以在标签内设置 VISUAL 的边界，但如果你这样做，那么标签仍然不会缩小以适合 VISUAL 边界，因为它似乎被编码为基于逻辑边界工作，至少我尝试过的一些快速测试似乎表明了这一点。因此，在标签中的文本中使用 VISUAL 边界似乎只会使其显示不正确(甚至可能被某些人归类为错误)。如果您在标签内设置带有 Text 的图形，它可能会起作用，但是如果您这样做，标签对您没有多大作用，也可以直接使用 Text 节点(除非您使用像 TitledPane 这样的控件)在标题中包含标签，在这种情况下，您必须使用标签)。