Gluon 移动切换按钮跳跃

Question

我正在尝试为调查页面实现 Gluon Mobile 切换按钮，在测试时，当我单击该按钮时，该按钮会稍微向左跳动。我根本不想让它跳。你可以在这里看到它：

相关代码在这里：

StackPane getToggler() {

    ToggleButton toggleButton = new ToggleButton("Yes");
    ToggleButtonGroup toggleButtonGroup = new ToggleButtonGroup();
    toggleButtonGroup.setSelectionType(SelectionMode.SINGLE);
    toggleButtonGroup.setPadding(new Insets(10));

    toggleButton = new ToggleButton("Yes");
    toggleButton.setStyle("-fx-text-fill:steelblue;");
    toggleButton.setUserData("1");
    toggleButton.setSelected(false);
    toggleButton.selectedProperty().addListener((obv, ov, nv) -> {
        if (nv.booleanValue()) {
            toggleButtonGroup.setUserData("1");
        }
    });

    toggleButtonGroup.getToggles().add(toggleButton);

    toggleButton = new ToggleButton("No");
    toggleButton.setStyle("-fx-text-fill:steelblue;");
    toggleButton.setSelected(true);
    toggleButton.setUserData("0");
    toggleButton.setSelected(false);
    toggleButton.selectedProperty().addListener((obv, ov, nv) -> {
        if (nv.booleanValue()) {
            toggleButtonGroup.setUserData("0");
        }
    });
    toggleButtonGroup.getToggles().add(toggleButton);
    togglers.add(toggleButtonGroup);

    StackPane wrapper = new StackPane();
    wrapper.setAlignment(Pos.CENTER);
    wrapper.getChildren().add(toggleButtonGroup);

    return wrapper;
}

这是我获取切换器及其与左侧标签的关系的地方：

    for (int i = 0; i < this.questions.length; i++) {

        HBox row = new HBox();
        row.setSpacing(5);
        row.setAlignment(Pos.CENTER_LEFT);

        Label label = new Label(this.questions[i]);
        label.setWrapText(true);
        label.setPrefWidth(200);
        label.setTextAlignment(TextAlignment.LEFT);
        label.setFont(new Font("System", 14));

        StackPane wrapper = this.getToggler();

        Region region = new Region();
        HBox.setHgrow(region, Priority.ALWAYS);
        HBox.setHgrow(label, Priority.NEVER);

        row.getChildren().addAll(label,region,wrapper);
        box.getChildren().add(row);
        box.getChildren().add(new Separator());

    }

Answer 1

经过一些调试，我发现切换按钮的最小宽度值比它们的首选宽度要宽。

这意味着在用户选择一个开关后，将应用最小宽度，并根据所需的最小宽度调整控件的大小，从而缩小区域。

一个快速修复（直到这个问题在控件中得到修复）可以设置你的切换按钮的最小宽度：

private StackPane getToggler() {

    ToggleButtonGroup toggleButtonGroup = new ToggleButtonGroup();

    ToggleButton toggleButtonYes = new ToggleButton("Yes");
    toggleButtonYes.minWidthProperty().bind(toggleButtonYes.prefWidthProperty());
    toggleButtonGroup.getToggles().add(toggleButtonYes);

    ToggleButton toggleButtonNo = new ToggleButton("No");
    toggleButtonNo.minWidthProperty().bind(toggleButtonNo.prefWidthProperty());
    toggleButtonGroup.getToggles().add(toggleButtonNo);

    ...;
}

Gluon 移动切换按钮跳跃

Gluon Mobile Toggle Button Jumping

javafx

gluon-mobile