如何更改 RadioButton 标签的位置？

Question

默认情况下，RadioButtons 的文本标签位于按钮右侧。我希望标签出现在按钮下方。我找到了old discussion on the Oracle forums，但解决方案不是很好或根本不起作用。

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

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

Answer 1

没有“简单”的方法可以做到这一点（简单意味着设置单个属性或类似的东西）。

作为一种解决方法，您可以使用VBox 执行您提到的类似操作，但使用Label：您可以将RadioButton 设置为Label 的图形并将contentDisplayProperty 设置为@987654331 @（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);
    }
}

以及产生的RadioButtons：

或者，如果你想让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：