如何改變RadioButton標簽的位置？

Question

默認情況下， RadioButton的文本標簽位於按鈕右側。 我希望標簽顯示在按鈕下方。 我在Oracle論壇上發現了一個舊的討論，但解決方案並不好或只是不起作用。

我可以使用無文本單選按鈕和單獨的文本標簽創建自定義組件，並將它們放置在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是 ：

或者， 如果您想讓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 ：