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

Posted 2023-02-26

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

【英文标题】：How to display GridPane object grid lines permanently, and without using the setGridLinesVisible() method?

【发布时间】：2016-10-03 20:15:30

【问题描述】：

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

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

另外，我需要使用 Pane 容器而不是 Canvas。

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

谢谢

【问题讨论】：

GridPane 有 css -fx-grid-lines-visible 属性

【参考方案1】：

供每个孩子使用：

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

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

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

【参考方案2】：

如果你想使用 fxml，你可以试试这个：

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

【参考方案3】：

这对我有用：

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

仅用于调试！

【讨论】：

您无法仅使用此代码显示网格线。这个答案不完整。

您使用的是什么版本的 java。他们可能已经取消了这一点。

我使用的是 Java 8。这段代码在什么版本的 Java 中可以单独运行？

对于成品，您应该使用 James answer 的想法。

【参考方案4】：

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

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

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 ;

【讨论】：

谢谢，这种方法是我想到的第一件事，但我认为会有一个开箱即用的解决方案：p