Javafx в равной степени охватывает кнопку переключения

Question

Мне нужно создать группу переключателей, как показано ниже, с белым фоном, который является выбранной кнопкой, а две кнопки занимают 50% ширины родительского контейнера. Две кнопки переключения находятся внутри HBox. Стиль

Пока что попробовал, воткнул вот так.

.viewType .toggle-button {
    -fx-padding: 0 2 0 2;
    -fx-background-color: #000;
    -fx-text-fill: white;
}

.viewType .toggle-button:selected {
    -fx-padding: 0;
    -fx-background-color: white;
    -fx-text-fill: black;
    -fx-border-wdith: 2;
    -fx-border-color: black;
    -fx-border-radius: 4;
}

Answer 1

Если вы хотите, чтобы обе кнопки имели одинаковую ширину, используйте GridPane вместо HBoxи используйте ограничения столбцов, чтобы сделать два столбца равными по ширине:

GridPane grid = new GridPane();
grid.getColumnConstraints().addAll(createCol(), createCol());
ToggleButton toggle1 = new ToggleButton("...");
toggle1.setMaxWidth(Double.MAX_VALUE);
ToggleButton toggle2 = new ToggleButton("...");
toggle2.setMaxWidth(Double.MAX_VALUE);
grid.addRow(0, toggle1, toggle2);

// ...

private ColumnConstraints createCol() {

    ColumnConstraints col = new ColumnConstraints();
    col.setPercentWidth(50);
    col.setFillWidth(true);
    return col ;

}

Кроме того, вы можете контролировать размер панели сетки в своем родительском элементе, настраивая родительский элемент (детали зависят от того, какой тип панели используется для родительского элемента).

SSCCE:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ToggleButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class EqualSizedButtons extends Application {

    @Override
    public void start(Stage primaryStage) {
        GridPane grid = new GridPane();
        grid.getStyleClass().add("viewType");
        grid.getColumnConstraints().addAll(createCol(), createCol());
        ToggleButton toggle1 = new ToggleButton("A");
        toggle1.setMaxWidth(Double.MAX_VALUE);
        ToggleButton toggle2 = new ToggleButton("This is really big button B");
        toggle2.setMaxWidth(Double.MAX_VALUE);
        grid.addRow(0, toggle1, toggle2);

        new ToggleGroup().getToggles().addAll(toggle1, toggle2);

        BorderPane root = new BorderPane();
        root.setBottom(grid);

        Scene scene = new Scene(root, 600, 600);
        scene.getStylesheets().add("style.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }


    private ColumnConstraints createCol() {

        ColumnConstraints col = new ColumnConstraints();
        col.setPercentWidth(50);
        col.setFillWidth(true);
        return col ;

    }

    public static void main(String[] args) {
        launch(args);
    }
}

Answer 2

Вы можете установить для кнопок maxWidth значение max double на стороне Java. Это даст вашим кнопкам одинаковую ширину в HBox. Надеюсь, это полезно:

btn1.setMaxWidth(Double.MAX_VALUE);
btn2.setMaxWidth(Double.MAX_VALUE);

Вы можете проверить следующую ссылку для получения полезной информации, связанной с размерами и выравниванием узлов:

Размеры и выравнивание узлов