Как изменить положение метки RadioButton?

Question

По умолчанию RadioButton s имеют текстовую метку справа от кнопки. Я хочу, чтобы метка появилась ниже кнопки. Я нашел old discussion on the Oracle forums, но решения невелики или просто не работают.

Я могу создать пользовательский компонент с помощью текстовой метки и отдельной текстовой метки и разместить их как в VBox. Но тогда сама кнопка сама реагирует на пользовательские события, а не на все.

Нет ли простого способа переместить ярлык?

Answer 1

Существует нет «простого» способа сделать это (простые средства, устанавливающие одно свойство или что-то в этом роде).

В качестве временного решения вы могли бы сделать что-то, как вы обмолвились VBox, но с Label: Вы можете установить RadioButton как графическая часть Label и установите contentDisplayProperty в TOP (RadioButton помещаются в верхней части Label) , А затем вы можете добавить обработчик событий на Label, чтобы выбрать RadioButton при щелчке.

Примером этого подхода

public class Main extends Application { 
    @Override 
    public void start(Stage primaryStage) { 
     try { 
      BorderPane root = new BorderPane(); 
      Scene scene = new Scene(root, 400, 400); 

      HBox hbox = new HBox(); 
      hbox.getChildren().add(createRadioLabel("Radio on the left", ContentDisplay.LEFT)); 
      hbox.getChildren().add(createRadioLabel("Radio on the top", ContentDisplay.TOP)); 
      hbox.getChildren().add(createRadioLabel("Radio on the bottom", ContentDisplay.BOTTOM)); 
      hbox.getChildren().add(createRadioLabel("Radio on the right", ContentDisplay.RIGHT)); 
      hbox.setSpacing(30); 
      root.setCenter(hbox); 

      primaryStage.setScene(scene); 
      primaryStage.show(); 
     } catch (Exception e) { 
      e.printStackTrace(); 
     } 
    } 

    private Label createRadioLabel(String text, ContentDisplay cd) { 
     Label label = new Label(text); 
     label.setGraphic(new RadioButton()); 
     label.setContentDisplay(cd); 
     label.addEventHandler(MouseEvent.MOUSE_CLICKED, e -> { 
      RadioButton radioButton = (RadioButton) ((Label) e.getSource()).getGraphic(); 
      radioButton.requestFocus(); 
      radioButton.setSelected(!radioButton.isSelected()); 

     }); 
     return label; 
    } 


    public static void main(String[] args) { 
     launch(args); 
    } 
} 

И полученный RadioButton s:

В качестве альтернативы , если вы хотите, чтобы текст RadioButton вращается вокруг точка, вы можете использовать поворот CSS, остроумие ч атрибут -fx-rotate:

.radio-button { -fx-rotate:180; } 
.radio-button > .text { -fx-rotate: 180; } 

Первый селектор будет вращать весь RadioButton, таким образом, привести текст будет помещен на левой стороне «точки», верхней стороной вниз. Второй селектор поворачивает текст обратно в нормальное направление.

Пример

Этот пример показывает RadioButton которого Text может быть размещен на любой стороне «точки», указанного в ComboBox выбора.

public class Main extends Application { 
    @Override 
    public void start(Stage primaryStage) { 
     try { 
      BorderPane root = new BorderPane(); 
      Scene scene = new Scene(root, 400, 400); 

      scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm()); 

      RadioButton rb = new RadioButton("In all directions); 

      ComboBox<PseudoClass> combo = new ComboBox<>(); 
      combo.getItems().addAll(PseudoClass.getPseudoClass("left"), 
        PseudoClass.getPseudoClass("top"), 
        PseudoClass.getPseudoClass("right"), 
        PseudoClass.getPseudoClass("bottom")); 

      combo.valueProperty().addListener((obs, oldVal, newVal) -> { 

       if (oldVal != null) 
        rb.pseudoClassStateChanged(oldVal, false); 

       rb.pseudoClassStateChanged(newVal, true); 
      }); 

      root.setTop(combo); 
      root.setCenter(rb); 

      primaryStage.setScene(scene); 
      primaryStage.show(); 
     } catch (Exception e) { 
      e.printStackTrace(); 
     } 
    } 

    public static void main(String[] args) { 
     launch(args); 
    } 
} 

application.css

.radio-button:left > .text { -fx-rotate: 180; } 
.radio-button:left { -fx-rotate:180; } 

.radio-button:right > .text { -fx-rotate: 0; } 
.radio-button:right { -fx-rotate:0; } 

.radio-button:top > .text { -fx-rotate: 0; } 
.radio-button:top { -fx-rotate:-90; } 

.radio-button:bottom > .text { -fx-rotate: 0; } 
.radio-button:bottom { -fx-rotate:90; } 

И отображаемая RadioButton: