如何使单选按钮和复选框相对于系统分辨率改变大小？

Question

我知道有很多解决方案可以帮助更改单选按钮或复选框的大小，但是我需要一种方法来在我的 .css 文件或其他一些内联解决方案中使用 em 使大小相对。

我试图让我的控件在 720p、1080p 和 4K 中显示相同的大小。除了 RadioButton 和 CheckBox 之外的所有其他控件都通过将 em 用于任何选择器控件大小来工作。我将在下面为每个控件包含一些相关的代码片段。

RadioButton.css（基本字体大小在另一个文件中定义）

.RadioButton {
    -fx-font-size: 1em;
}

.RadioButton .radio  {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.833333em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.833333em;
    -fx-padding: 0.5em;
}

.RadioButton:focused .radio {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.833333em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.833333em;
    -fx-padding: 0.5em;
}

.RadioButton:hover .radio {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.833333em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.833333em;
    -fx-padding: 0.5em;
}
.RadioButton:armed .radio {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.833333em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.833333em;
    -fx-padding: 0.5em;
}

.RadioButton .dot {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.833333em;
    -fx-padding: 0.4em;
}

.RadioButton:selected .dot {
    -fx-background-insets: 0em;
}

截图

当所有这些都被使用时，RadioButton 会随着分辨率从 4K -> 1080p -> 720p 变大而变得越来越大。这让我觉得仍有一部分控件在使用其内部硬尺寸。我知道通常您只需更改填充值即可实现不同的大小，但正如您所看到的，填充值已经在此处使用 em 设置。

复选框.css

.CheckBox {
    -fx-font-size:  1em;
}

.CheckBox .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
    -fx-padding: 0.5em;
}

.CheckBox:focused .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
}

.CheckBox:hover .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
}

.CheckBox:armed .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
}

.CheckBox .mark {
    -fx-background-insets: 0.083333em 0em 0.083333em 0em, 0em;
    -fx-padding: 0.5em;
    -fx-shape: "M0,4H2L3,6L6,0H8L4,8H2Z";
}

截图

这与 RadioButton 文件非常相似，其中所有值都使用 em 而不是硬值。作为标记一部分的 -fx-shape 是否会导致所有 em 值失败，因为它是一个硬值？

期待

我的最终目标是让单选按钮和复选框在不同的分辨率下完全（非常接近）保持相同的大小。

Answer 1

好吧，我通过使用这篇文章创建的实用程序找到了我自己问题的答案 ，并对其进行了一些更改以满足我的需求。我的大部分代码都很好，但我使用的选择器似乎不适用于这两个。我将把两个修改过的文件放在下面......

单选按钮

.radio-button {
    /*-fx-font-size: 1em;*/
}

.radio-button .radio  {
    -fx-background-insets: 0em;
    -fx-border-insets: 0em;
    -fx-border-radius: 1em;
    -fx-padding: 0.25em;
}

.radio-button .dot {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.833333em;
    -fx-padding: 0.3em;
}

这些是尺寸更改所需的唯一选择器。我还有一些其他选择器用于悬停、聚焦等，但它们仅用于样式，没有大小变化。最大的变化是

.RadioButton -> .radio-button

复选框

.check-box {
    /*-fx-font-size: 1em;*/
}

.check-box .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
    -fx-padding: 0.2em;
}

.check-box .mark {
    -fx-background-insets: 0.083333em 0em 0.083333em 0em, 0em;
    -fx-padding: 0.4em;
    -fx-shape: "M0,4H2L3,6L6,0H8L4,8H2Z";
}

就像 RadioButton 一样，还有其他选择器用于样式，但不用于调整大小。所有悬停、聚焦等选择器都将默认为我在 .box 选择器中使用的默认值。两个 -fx-padding 标签影响标记和框的大小，它们根据我的问题进行了一些更改。不过，就像 RadioButton 一样，主要的变化是从

.CheckBox -> .check-box

我仍然不太明白为什么这会导致任何问题，因为只要正确添加样式表，它们就应该都能工作，但就我而言，.check-box 是唯一一个按照我想要的方式运行的。

希望这对遇到类似问题的人有所帮助！