如何分配更多space到SettingsPane中的Option文本？

Question

如果我创建一个设置窗格并向其中添加带有图标和文本的 new DefaultOption(...)，则右侧的控制器占用的 space 比它需要的多，并修剪中间的文本。

Option<BooleanProperty> antiAliasingOption = new DefaultOption<>(MaterialDesignIcon.BLUR_OFF.graphic(),
        "Anti-aliasing", "Toggle anti-Aliasing", null, new SimpleBooleanProperty(), true);

您可以看到有很多 space（红线）用于未使用的切换按钮，文本被截断。我希望控件向右对齐，就像在中心占据所有未分配的边框窗格中一样 space.

Answer 1

如果您使用 Scenic View 检查设置控件，您会发现对于每个选项都有一个 HBox，其中左侧 HBox 用于图标，中央 VBox 的文本和权利 HBox 的编辑。

所有这些容器都有样式类，因此在运行时修改它们中的任何一个的简单方法是使用查找。

至于右边的HBox，可以找secondary-graphic然后设置首选宽度：

public BasicView(String name) {
    super(name);

    Option<BooleanProperty> antiAliasingOption = new DefaultOption<>(MaterialDesignIcon.BLUR_OFF.graphic(),
    "Anti-aliasing", "Toggle anti-Aliasing", null, new SimpleBooleanProperty(), true);

    SettingsPane settings = new SettingsPane(FXCollections.<Option>observableArrayList(antiAliasingOption));
    settings.setSearchBoxVisible(false);
    setCenter(settings);

    setOnShown(e -> {
        HBox rightBox = (HBox) settings.lookup(".secondary-graphic");
        rightBox.setPrefWidth(60);
    });
}

另一种选择是覆盖 css 文件中的默认样式：

.settings-pane .options-grid > .option-row > .secondary-graphic {
    -fx-pref-width: 60;
}

如何分配更多space到SettingsPane中的Option文本？

How to allocate more space to Option's text in SettingsPane?

gluon-mobile