Question

默认情况下，RadioButton的文本标签位于按钮右侧。我希望标签显示在按钮下方。我发现了一个old discussion on the Oracle forums，但解决方案并不好或只是不起作用。

我可以使用无文本单选按钮和单独的文本标签创建自定义组件，并将它们放在VBox中。但是只有按钮本身才能响应用户事件而不是整个事件。

有没有简单的方法来重新定位标签？

Answer 1

没有＆＃34;简单＆＃34;这样做的方法（简单意味着设置一个属性或类似的东西）。

作为一种解决方法，您可以执行类似于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，因此文本将被放置在＆＃34; dot＆＃34;的左侧，上下颠倒。第二个选择器将文本旋转回法线方向。

示例

此示例显示RadioButton，其Text可以放置在＆＃34; dot＆＃34;的任何一侧。由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：

如何更改RadioButton标签的位置？

1 个答案: