為什么我的CSS邊框沒有出現在JavaFXgui中？

我正在嘗試使用 .getStyleClass().add() 在 GUI (fxml) 上顯示帶有 CSS 邊框的墻壁，但它們沒有出現。

我正在使用將相應樣式類添加到單元格的開關。

Java 代碼：

private StackPane createCell(int row, int col) {
    var cell = new StackPane();

    cell.getStyleClass().add("cell");
    cell.getStyleClass().add((row   col) % 2 == 0 ? "light": "dark");

    for (var i = 0; i < 2; i  ) {
        var pieceView = new ImageView(pieceImages[i]);
        pieceView.visibleProperty().bind(createBindingForPieceAtPosition(i, row, col));
        cell.getChildren().add(pieceView);
    }

    var wallsInDirections = state.checkAllWalls(new Position(row, col));
    for (var direction : wallsInDirections) {
        switch (direction) {
            case UP -> cell.getStyleClass().add("topwall");
            case RIGHT -> cell.getStyleClass().add("rightwall");
            case DOWN -> cell.getStyleClass().add("bottomwall");
            case LEFT -> cell.getStyleClass().add("leftwall");
        }
    }
    return cell;
}

CSS 代碼：

.cell.light {
    -fx-background-color: white;
}

.cell.dark {
    -fx-background-color: #F6F6F6;
}

.cell.light:hover, .cell.dark:hover {
    -fx-background-color: #FAFA33;
}

.topwall {
    border-top: solid black;
}

.rightwall {
    border-right: solid black;
}

.bottomwall {
    border-bottom: solid black;
}

.leftwall {
    border-left: solid black;
}

之后的圖形用戶界面圖片： 結果

uj5u.com熱心網友回復：

像這樣編輯我的CSS：

.topwall {
    -fx-border-style: solid hidden hidden hidden ;
    -fx-border-color: black;
    -fx-border-width: 5;
}

.rightwall {
    -fx-border-style: hidden solid hidden hidden;
    -fx-border-color: black;
    -fx-border-width: 5;
}

.bottomwall {
    -fx-border-style: hidden hidden solid hidden;
    -fx-border-color: black;
    -fx-border-width: 5;
}

.leftwall {
    -fx-border-style: hidden hidden hidden solid;
    -fx-border-color: black;
    -fx-border-width: 5;
}

現在它們出現了，但它在每個單元格上只顯示 1 個邊框。

結果

uj5u.com熱心網友回復：

屬性border-top,border-right等不是有效的 JavaFX CSS 屬性。

參考檔案，您使用屬性設定邊框

selector {
    -fx-border-color: color ;
    -fx-border-width: width ;
}

其中color和width是單個值（分別為paint 和 size 型別）或由空格分隔的四個值，表示上、右、下和左邊框。

還應注意，JavaFX 中通常不以這種方式使用邊框。更常用的方法是使用“嵌套背景”，您可以在其中執行以下操作來定義所有四個邊的寬度為 5 的邊框：

.cell.light {
    -fx-background: white;
}
.cell.dark {
    -fx-background: #f6f6f6;
}
.cell {
    -fx-background-color: black, -fx-background;
    -fx-background-insets: 0, 5;
}

這是通過繪制兩個背景來實作的，一個在另一個之上。第一個是黑色的，沒有插圖；第二個由“查找顏色”定義，-fx-background在所有側面都有 5 個像素的插圖。

我的理解（盡管我沒有直接的證據）是嵌套背景方法比使用顯式邊界執行得更好。

不幸的是，完全在外部 CSS 表中執行此操作非常冗長，因為您必須單獨處理所有 16 種可能性（除非我錯過了一個聰明的技巧）：

.cell.light {
    -fx-background: white;
}
.cell.dark {
    -fx-background: #f6f6f6;
}
.cell {
    -fx-background-color: black, -fx-background;
    -fx-background-insets: 0, 0;
}


.cell.topwall {
    -fx-background-insets: 0, 5 0 0 0;
}
.cell.rightwall {
    -fx-background-insets: 0, 0 5 0 0;
}
.cell.bottomwall {
    -fx-background-insets: 0, 0 0 5 0;
}
.cell.leftwall {
    -fx-background-insets: 0, 0 0 0 5;
}
.cell.topwall.rightwall {
    -fx-background-insets: 0, 5 5 0 0;
}
.cell.topwall.bottomwall {
    -fx-background-insets: 0, 5 0 5 0;
}
.cell.topwall.leftwall {
    -fx-background-insets: 0, 5 0 0 5;
}
.cell.rightwall.bottomwall {
    -fx-background-insets: 0, 0 5 5 0;
}
.cell.rightwall.leftwall {
    -fx-background-insets: 0, 0 5 0 5;
}
.cell.bottomwall.leftwall {
    -fx-background-insets: 0, 0 0 5 5;
}
.cell.topwall.rightwall.bottomwall {
    -fx-background-insets: 0, 5 5 5 0;
}
.cell.topwall.bottomwall.leftwall {
    -fx-background-insets: 0, 5 0 5 5;
}
.cell.topwall.rightwall.leftwall {
    -fx-background-insets: 0, 5 5 0 5;
}
.cell.rightwall.bottomwall.leftwall {
    -fx-background-insets: 0, 0 5 5 5;
}
.cell.topwall.rightwall.bottomwall.leftwall {
    -fx-background-insets: 0, 5;
}

（使用-fx-border-*并沒有更好）。

以編程方式將插圖設定為行內樣式可能更容易：

.cell.light {
    -fx-background: white;
}
.cell.dark {
    -fx-background: #f6f6f6;
}
.cell {
    -fx-background-color: black, -fx-background;
    -fx-background-insets: 0, 0;
}

進而

int top, right, bottom, left ;
top=right=bottom=left=0 ;
var wallsInDirections = state.checkAllWalls(new Position(row, col));
for (var direction : wallsInDirections) {
    switch (direction) {
        case UP -> top=5;
        case RIGHT -> right=5;
        case DOWN -> bottom=5;
        case LEFT -> left=5;
    }
}

cell.setStyle(String.format("-fx-background-insets: %d %d %d %d;", top, right, bottom, left));

uj5u.com熱心網友回復：

您需要像這樣添加邊框寬度：

.topwall {
    border-top: 1px solid black;
}

.rightwall {
    border-right: 1px solid black;
}

.bottomwall {
    border-bottom: 1px solid black;
}

.leftwall {
    border-left: 1px solid black;
}

標籤：爪哇 css 用户界面 javafx 文件格式

上一篇：如何正確使用列舉進行簡單的價格計算（Java）

下一篇：ApachePOI-Excel-檔案->密碼->“只讀推薦”（如何禁用）