如何在Java8中实现RadioButton图标左对齐、文字右对齐

问题背景 #

在Java 8环境下开发JavaFX程序，需将RadioButton的图标设置为左对齐、文字设置为右对齐，但当前实现效果与预期不符。

依赖配置 #

<dependencies>
    <dependency>
        <groupId>de.jensd</groupId>
        <artifactId>fontawesomefx-materialdesignfont</artifactId>
        <version>1.7.22-4</version>
        <type>jar</type>
    </dependency>
    <dependency>
        <groupId>de.jensd</groupId>
        <artifactId>fontawesomefx-commons</artifactId>
        <version>8.15</version>
    </dependency>
</dependencies>

效果对比 #

• 当前效果：
  
• 预期效果：
  

当前实现代码 #

import de.jensd.fx.glyphs.materialdesignicons.MaterialDesignIcon;
import de.jensd.fx.glyphs.materialdesignicons.MaterialDesignIconView;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application
{
    public static void main(String[] args)
    {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage)
    {
        primaryStage.setTitle("Hello World!");
        RadioButton memberButton = new RadioButton("Members");
        memberButton.setGraphic(new MaterialDesignIconView(MaterialDesignIcon.WORKER));
        RadioButton companyButton = new RadioButton("Companies");
        companyButton.setGraphic(new MaterialDesignIconView(MaterialDesignIcon.CITY));
        RadioButton settingsButton = new RadioButton("Settings");
        settingsButton.setGraphic(new MaterialDesignIconView(MaterialDesignIcon.WRENCH));

        stylizeAndSetButtons(memberButton, companyButton, settingsButton);

        VBox root = new VBox();
        root.getChildren().addAll(memberButton, companyButton, settingsButton);
        primaryStage.setScene(new Scene(root, 300, 250));
        primaryStage.show();
    }

    private static void stylizeAndSetButtons(RadioButton... buttons)
    {
        ToggleGroup group = new ToggleGroup();

        for (RadioButton button : buttons)
        {
            button.setPrefWidth(150);
            button.setMinHeight(50);
            button.getStyleClass().remove("radio-button");
            button.getStyleClass().add("toggle-button");
            button.getStyleClass().add("default");

            button.setToggleGroup(group);
        }
    }
}

解决方案 #

要实现图标左对齐、文字右对齐的效果，可通过调整控件布局属性结合CSS样式完成，以下提供两种可行方式：

方式一：内联设置布局属性与样式 #

修改stylizeAndSetButtons方法，添加布局对齐与样式配置：

private static void stylizeAndSetButtons(RadioButton... buttons)
{
    ToggleGroup group = new ToggleGroup();
    // 导入布局对齐枚举
    import javafx.geometry.Pos;
    import javafx.scene.control.ContentDisplay;

    for (RadioButton button : buttons)
    {
        button.setPrefWidth(150);
        button.setMinHeight(50);
        button.getStyleClass().remove("radio-button");
        button.getStyleClass().add("toggle-button");
        button.getStyleClass().add("default");

        // 指定图标显示在左侧
        button.setContentDisplay(ContentDisplay.LEFT);
        // 让按钮整体内容（图标+文字）右对齐
        button.setAlignment(Pos.CENTER_RIGHT);
        // 调整图标与文字的间距，实现图标左贴边、文字右贴边的视觉效果
        button.setStyle("-fx-graphic-text-gap: 40px; -fx-label-padding: 0;");

        button.setToggleGroup(group);
    }
}

方式二：使用外部CSS文件（更易维护） #

创建styles.css文件，添加如下样式规则：

.toggle-button.default {
    -fx-content-display: left;
    -fx-alignment: center-right;
    -fx-graphic-text-gap: 40px;
    -fx-label-padding: 0;
}

在启动代码中加载该CSS文件：

@Override
public void start(Stage primaryStage)
{
    // ... 原有代码 ...
    VBox root = new VBox();
    // 加载外部样式
    root.getStylesheets().add(Main.class.getResource("styles.css").toExternalForm());
    root.getChildren().addAll(memberButton, companyButton, settingsButton);
    // ... 原有代码 ...
}

核心逻辑说明 #

• ContentDisplay.LEFT：强制图标显示在文字左侧
• Pos.CENTER_RIGHT：让按钮内的所有内容整体向右对齐
• -fx-graphic-text-gap：控制图标与文字之间的间距，可根据按钮宽度调整数值，实现图标左贴边、文字右贴边的预期效果

内容的提问来源于stack exchange，提问作者trilogy