5

我知道有很多解决方案可以帮助更改单选按钮或复选框的大小，但我需要一种方法来在我的 .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;
}

截图

4K 1080p 720p

当所有这些都被使用时，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";
}

截图

4K 1080p 720p

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

期待

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

4

2 回答 2

3

不确定我是否回答了 yopur 的问题，我对 javafx 一无所知。

但在纯 CSS 中，这似乎可行：

div {
    margin: 10px;
}

#container1 {
    font-size: 20px;
}

#container2 {
    font-size: 30px;
}

#container3 {
    font-size: 40px;
}

input {
    font-size: inherit;
    width: 0.8em;
    height: 0.8em;
}
<div id="container1">
  <input type="radio" id="r1" name="test" 
         checked>
  <label for="r1">elem 1</label>
  <input type="radio" id="r2" name="test">
  <label for="r2">elem 2</label>
</div>
<div id="container2">
  <input type="radio" id="r21" name="test2" 
         checked>
  <label for="r21">elem 1</label>
  <input type="radio" id="r22" name="test2">
  <label for="r22">elem 2</label>
</div>
<div id="container3">
  <input type="radio" id="r31" name="test3" 
         checked>
  <label for="r31">elem 1</label>
  <input type="radio" id="r32" name="test3">
  <label for="r32">elem 2</label>
</div>

于 2020-04-09T08:10:49.020 回答
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 是唯一能按我想要的方式运行的。

希望这可以帮助任何有类似问题的人！

于 2020-04-13T16:06:12.427 回答