我将上部标签的字体大小设置为24px。 我不知道在哪里可以检查元素的实际高度(如果在“场景”构建器中可能的话),但是框的上部(在图像中指定)和下部有多余的空间。
0
。我需要标签的高度等于字体大小。
我的意思是FontSize = Gray space surrounded by blue markers height
。
如何到达?
我也遇到过类似的HTML / CSS问题。
在大多数情况下,不是一个简单但可行的解决方案是使用负边距以及:before
和:after
伪元素。
现在有针对JavaFX的解决方案吗?
通过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>
答案 0 :(得分:4)
标签是“智能”控件,在“皮肤”代码中包括诸如某些内置填充之类的东西,以及用于文本和图形的各种对齐方式和间距选项,并支持通过动态隐藏文本来调整大小。 / p>
如果要对文本布局的方式进行更多控制,则可以使用原始Text节点而不是Labels,然后根据需要自己进行一些其他布局。当然,您将因此失去很多内置功能(请当心……),但有时这可能正是您想要的。
例如,具有以下属性的“文本”节点:
可以在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之类的控件,标题中包含标签,在这种情况下,您必须使用标签。
答案 1 :(得分:3)
只需设置一个负值插图,它将缩小标签上方的空间,例如:
<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>