Центрируйте детей в GridPane, используя CSS - PullRequest
Новая
       13

Центрируйте детей в GridPane, используя CSS

0 голосов
/ 22 мая 2018

enter image description here

У меня есть GridPane, заполненный ToggleButtons.Первая строка и столбец в этом GridPane содержат Text метки объекта.Я не могу центрировать Text объекты с помощью ToggleButton s, поэтому текст отображается посередине, с использованием css .(Этот ответ показывает, как этого добиться, используя GridPane.setHalignment(node, HPos.CENTER);).

MCVE, если необходимо:

import javafx.application.Application;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.ToggleButton;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Pane;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class GridTest extends Application {

    private static final int COLS = 5, ROWS = 3;

    @Override public void start(Stage stage) {
        Scene scene = new Scene(makeGrid());
        scene.getStylesheets().add(getClass().
                getResource("GridTest.css").toExternalForm());
        stage.setScene(scene);
        stage.show();
    }

    private Pane makeGrid() {

        GridPane grid = new GridPane();

        for(int rowIndex = 0; rowIndex < ROWS ; rowIndex++) {

            Node[] nodes = new Node[COLS];
            Node node;
            for(int colIndex = 0; colIndex < COLS ; colIndex++) {

                if (rowIndex == 0){ //col header;
                    String txt =  (colIndex == 0) ?
                            " " : String.valueOf(colIndex);
                    node = new Text(txt);
                }else if (colIndex == 0){//row header
                    node = new Text(String.valueOf(rowIndex));
                }else {
                    node= new ToggleButton();
                }
                nodes[colIndex]= node;
            }
            grid.addRow(rowIndex, nodes);
        }
        return grid;
    }

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

CSS:

Text{
    -fx-text-alignment: center;
}

GridPane {
    -fx-hpos:center ;
    -fx-hgap: 5;
    -fx-vgap: 5;
    -fx-padding:10;  
}

ToggleButton {  
    -fx-pref-width:30;
}

1 Ответ

0 голосов
/ 23 мая 2018

На основе комментариев, опубликованных @ James_D и @fabian, а также предыдущих ответов, существует два варианта центрирования текстовых меток.Один вариант, как указано в вопросе, не использует CSS.Требуется небольшая модификация makeGrid: 

//see: https://stackoverflow.com/a/35438985/3992939
GridPane.setHalignment(node, HPos.CENTER);  //added line
nodes[colIndex]= node;

Это решение не меняет (не изменяемого размера) Text.Он просто центрирует его в пределах GridPane родительского столбца.

Другой вариант включает изменение меток Text на Labels: 

private Pane makeGrid() {

    GridPane grid = new GridPane();
    for(int rowIndex = 0; rowIndex < ROWS ; rowIndex++) {

        Node[] nodes = new Node[COLS];
        Node node;
        for(int colIndex = 0; colIndex < COLS ; colIndex++) {
            if (rowIndex == 0){ //col header;
                String txt =  (colIndex == 0) ? " " : String.valueOf(colIndex);
                node = new Label(txt);                      //** changed 
            }else if (colIndex == 0){//row header
                node = new Label(String.valueOf(rowIndex)); //** changed 
            }else {
                node= new ToggleButton();
            }
            nodes[colIndex]= node;
        }
        grid.addRow(rowIndex, nodes);
    }
    return grid;
}

и использование css (или дополнительного кода) для установки максимальной ширины метки и центрирования текста:

GridPane .label{
    -fx-alignment: center;
    -fx-max-width: Infinity;
}

GridPane {
    -fx-hgap: 5;
    -fx-vgap: 5;
    -fx-padding:10;  
}

ToggleButton {  
    -fx-pref-width:30;
}

enter image description here

...