如何在不使用 setGridLinesVisible() 方法的情况下永久显示 GridPane 对象网格线？

Question

是否可以在不使用 setGridLinesVisible() 的情况下使所有 GridPane 的网格线永久可见？

我知道 setGridLinesVisible() 仅用于调试目的，我想显示网格线以方便最终用户。

此外，我需要在 Pane 容器上工作，而不是 Canvas。

我的程序能够在窗格类型或窗格子类型父容器上添加、删除、修改、移动等形状对象和组。

谢谢

Answer 1

这样做在一定程度上取决于您的设置方式。根据您的应用程序的描述，当我尝试过类似的事情时，我总是发现用某种空的 Panes 填充网格以充当单元格，然后根据模型中的数据。如果你使用这种方法，你可以使用一些 CSS 在 "cells" 上放置边框（例如使用嵌套背景），这将产生网格线的效果。

这是此方法的一个简单示例：

import javafx.application.Application;
import javafx.beans.property.BooleanProperty;
import javafx.beans.property.SimpleBooleanProperty;
import javafx.scene.Scene;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.RowConstraints;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class GridPaneWithLines extends Application {


    private StackPane createCell(BooleanProperty cellSwitch) {

        StackPane cell = new StackPane();

        cell.setOnMouseClicked(e -> cellSwitch.set(! cellSwitch.get() ));

        Circle circle = new Circle(10, Color.CORNFLOWERBLUE);

        circle.visibleProperty().bind(cellSwitch);

        cell.getChildren().add(circle);
        cell.getStyleClass().add("cell");
        return cell;
    }

    private GridPane createGrid(BooleanProperty[][] switches) {

        int numCols = switches.length ;
        int numRows = switches[0].length ;

        GridPane grid = new GridPane();

        for (int x = 0 ; x < numCols ; x++) {
            ColumnConstraints cc = new ColumnConstraints();
            cc.setFillWidth(true);
            cc.setHgrow(Priority.ALWAYS);
            grid.getColumnConstraints().add(cc);
        }

        for (int y = 0 ; y < numRows ; y++) {
            RowConstraints rc = new RowConstraints();
            rc.setFillHeight(true);
            rc.setVgrow(Priority.ALWAYS);
            grid.getRowConstraints().add(rc);
        }

        for (int x = 0 ; x < numCols ; x++) {
            for (int y = 0 ; y < numRows ; y++) {
                grid.add(createCell(switches[x][y]), x, y);
            }
        }

        grid.getStyleClass().add("grid");
        return grid;
    }

    @Override
    public void start(Stage primaryStage) {
        int numCols = 5 ;
        int numRows = 5 ;

        BooleanProperty[][] switches = new BooleanProperty[numCols][numRows];
        for (int x = 0 ; x < numCols ; x++) {
            for (int y = 0 ; y < numRows ; y++) {
                switches[x][y] = new SimpleBooleanProperty();
            }
        }

        GridPane grid = createGrid(switches);

        StackPane root = new StackPane(grid);
        Scene scene = new Scene(root, 600, 600);
        scene.getStylesheets().add("grid-with-borders.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }




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

和CSS (grid-with-borders.css):

.root {
    -fx-padding: 20 ;
    cell-color: white ;
    cell-border-color: black ;
}
.grid {
    /* 1 pixel border around the top and right of the grid: */
    -fx-background-color: cell-border-color, cell-color ;
    -fx-background-insets: 0, 1 1 0 0 ;
    -fx-padding: 1 ;
}
.cell {
    /* 1 pixel border around the left and bottom of each cell: */
    -fx-background-color: cell-border-color, cell-color ;
    -fx-background-insets: 0, 0 0 1 1 ;
}

Answer 2

这对我有用：

GridPane grid = new GridPane();
grid.setGridLinesVisible(true);

仅用于调试！

Answer 3

如果你正在尝试使用 fxml，你可以试试这个：

    <GridPane GridPane.columnIndex="1"  GridPane.rowIndex="0" gridLinesVisible="true">

Answer 4

每 children 使用：

-fx-border-color: black;
-fx-border-width: 0 0 1 1;

这可以通过 yourChildNode.setStyle(css) 方法来实现。

如果一个单元格包含多个布局，将它们包装在一个 AnchorPane 中并在 AnchorPane 上应用 CSS。

如何在不使用 setGridLinesVisible() 方法的情况下永久显示 GridPane 对象网格线？

How to display GridPane object grid lines permanently, and without using the setGridLinesVisible() method?

java

user-interface

javafx

gridpane

pane