Как я могу изменить радиокнопки и флажки в зависимости от разрешения системы? - PullRequest
Новая
       102

Как я могу изменить радиокнопки и флажки в зависимости от разрешения системы?

5 голосов
/ 01 апреля 2020

Я знаю, что существует множество решений, которые помогут изменить размер переключателя или флажка, но мне нужен способ сделать размер относительно относительного, используя em в моем файле. css или в другом встроенном решении. .

Я пытаюсь, чтобы мои элементы управления выглядели одинаково в 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, потому что это жесткое значение?

Ожидание

Моя конечная цель - чтобы переключатели и флажки оставались точно ( очень близко ) к одному и тому же размеру при разных разрешениях.

Ответы [ 2 ]

2 голосов
/ 09 апреля 2020

Не уверен, что если я отвечу на ваш вопрос, я ничего не знаю о 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>
0 голосов
/ 13 апреля 2020

Хорошо. Я нашел ответ на свой вопрос, используя утилиту, созданную этой публикацией , и немного изменив ее в соответствии со своими потребностями. Почти весь мой код был в порядке, но селекторы, которые я использовал, не подходили для этих двух. Я помещу два измененных файла ниже ...

RadioButton 

.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

CheckBox 

.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, использовались другие селекторы для стиля, но не для определения размеров. Все селекторы hover, focus и др. c по умолчанию будут использовать значения по умолчанию, которые я также использовал в селекторе .box. Два тега -fx-padding влияют на размер метки и прямоугольника, и они немного изменились по сравнению с моим вопросом. Главное изменение, как и RadioButton, менялось с

.CheckBox -> .check-box

Я до сих пор не совсем понимаю, почему это может вызвать проблемы, если Таблицы стилей добавляются правильно, они должны оба работать, но в моем случае .check-box был единственным, который работал так, как я хотел.

Надеюсь, это поможет любому с подобными проблемами!

...