JavaFX：节点大小调整未按预期工作答案

【问题标题】：JavaFX: Node re-size is not working as expectedJavaFX：节点大小调整未按预期工作
【发布时间】：2016-07-22 04:44:03
【问题描述】：

我定义了一个带有 8 行 GridPane 的 FXML，它包含以下组件（FXML 和 CSS 定义在本帖末尾给出）：

2 个复选框，
2 个标签，
2 个带有区域和
2 个带有 A 区域的按钮

这里的 Region 用于加载图片，这是通过 CSS 样式完成的。对于上面定义的每组组件（例如 2 个复选框），我采用一个并使用 -fx-font-size 样式增加了它的大小。特别是，我将字体大小定义为 "1.3xDefault_System_Font_Size (12)"。每个组件文本中的(INC)和(DEF)标签，用于描述字号是增大还是保留为默认值。

从上面的截图可以看出，复选框的标签增加了，但盒子本身没有。这同样适用于图像，它们的大小没有增加，但标签大小增加了。

当我更改 .root 中的默认字体大小时，情况会变得更糟：

.root{
    -fx-font-size: 28;
}

在上面的示例中，由于我将默认字体大小从 12 更改为 28，因此我希望所有标签和图像都根据这个新大小更改它们的大小。图像大小由 -fx-background-size 定义，即 4em。

但是，所有标签都正确增加，但图像仅在具有 DEF 标签的节点上正确增加。这同样适用于复选框，它的标签和框在 DEF 上增加，而带有 INC 标记的复选框仅标签大小正确增加并且框保持小。

有没有办法让图像和复选框框正确增加它们的大小？这是一个错误，还是我做错了什么？

FXML：网格窗格

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane stylesheets="@css/Test.css" vgap="5.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ebay.client.controller.SettingsScreenController">
    <children>
        <CheckBox nodeOrientation="RIGHT_TO_LEFT" styleClass="increased_font" text="CheckBox (Inc)" GridPane.rowIndex="1" />
        <CheckBox nodeOrientation="RIGHT_TO_LEFT" text="CheckBox (Def)" GridPane.rowIndex="2" />
        <Label cache="true" styleClass="increased_font" text="Label (Inc)" GridPane.rowIndex="3" />
        <Label cache="true" text="Label (Def)" GridPane.rowIndex="4" />
        <Label cache="true" styleClass="increased_font" text="Label With Image (Inc)" GridPane.rowIndex="5">
            <graphic><Region styleClass="javasuns_logo" /></graphic>
        </Label>
        <Label cache="true" text="Label With Image (Def)" GridPane.rowIndex="6">
            <graphic><Region styleClass="javasuns_logo" /></graphic>
        </Label>
        <Button styleClass="increased_font" text="Button With Image (Inc)" GridPane.rowIndex="7">
            <graphic><Region styleClass="javasuns_logo" /></graphic>
        </Button>
        <Button text="Button With Image (Def)" GridPane.rowIndex="8">
            <graphic><Region styleClass="javasuns_logo" /></graphic>
        </Button>
    </children>
</GridPane>

CSS：Test.css

.increased_font {
    -fx-font-size: 1.3em;
}

.javasuns_logo {
    -fx-font-size: null;
    -fx-pref-height: 2em;
    -fx-pref-width: 4em;
    -fx-background-image: url('../../icons/logo/javasuns.png');
    -fx-background-size: 4em;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
}

【问题讨论】：

标签： css javafx checkbox fxml font-size

【解决方案1】：

我发现当你使用 pref-height 和 pref-width 时，你不能在同一个类中使用 -fx-font-size 导致它“重置” .root -fx-font-size 为默认值值为 12。

我想在某些按钮中设置特定的字体大小，并使用 em 值设置宽度和高度。这是不可能的，所以我在 Button 的元素内创建了一个标签，在这里我可以正确调整标签字体大小。因此，如果我不在同一个类/同一个控件中使用 font-size 和 pref-width/height，它看起来就像在工作。

【讨论】：