Question

我很挣扎，毫无疑问需要购买手册来理解JavaFX CSS，或者JavaFX CSS Reference Guide ......

但我要做的是在我的某些节点周围设置一个1像素的边框，例如一边是TableView或ScrollPane，另一边是GridPane或{{1在我正在研究的ScrollPane的另一边。我说“或”，因为我会选择任何一个。哈哈！（而且无论它是否充满了控制）欢呼声。

Answer 1

这是一个测试示例，用于演示在CSS中创建边框的一些方法：

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class TableViewBorderTest extends Application {

    @Override
    public void start(Stage primaryStage) {

        HBox root = new HBox(5);
        TableView<String> table = new TableView<>();
        table.getColumns().add(new TableColumn<String, String>("Data"));

        ScrollPane scroller = new ScrollPane();
        scroller.setMinWidth(200);

        GridPane grid = new GridPane();
        grid.setMinWidth(200);
        grid.getStyleClass().add("grid");

        root.getChildren().addAll(table, scroller, grid);
        // padding so we can easily see borders:
        root.setPadding(new Insets(10));

        Scene scene = new Scene(root);
        scene.getStylesheets().add("border-table.css");
        primaryStage.setScene(scene);
        primaryStage.show();

        // remove focus from tables
        root.requestFocus();

    }

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

您只需使用空的border-table.css文件即可运行此文件。首先要注意的是，表格视图和滚动窗格已经有一个中等灰度的1像素边框（比默认背景稍暗）：

此边框在默认样式表modena.css中定义（请参阅后面的内容），并设置为名为-fx-box-border的{{3}}。仅用于演示目的，为了更容易看到边框，您可以在border-table.css中使用以下内容重新指定此颜色：

.root {
    -fx-box-border: red ;
}

这给出了

"looked-up color"

请注意，表头和列标题使用与边框相同的颜色。如果您与第一张图片进行比较，您可能会更清楚地看到边框。

要替换表视图和滚动窗格中的边框，可以在css文件中定义边框。最简单但不一定是最好的方法是定义-fx-border-color。将border-table.css替换为以下内容：

.table-view, .scroll-pane {
    -fx-border-color: green ;
}

-fx-border-width的默认值为1，因此这会产生一个像素的绿色边框：

对于GridPane，请注意它没有默认边框，也没有样式类（）。在Java代码中，我为它定义了一个样式类：

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

所以我们可以通过将这个样式类添加到选择器来添加相同的边框：

.table-view, .scroll-pane, .grid {
    -fx-border-color: green ;
}

see CSS docs

值得注意的是，默认样式表根本不使用-fx-border-...属性。相反，它通过创建两个（或更多）＆＃34;嵌套背景＆＃34;来创建边框。例如，它有：

.scroll-pane,
.split-pane,
.list-view,
.tree-view,
.table-view, 
.tree-table-view,
.html-editor {
    -fx-background-color: -fx-box-border, -fx-control-inner-background;
    -fx-background-insets: 0, 1;
    -fx-padding: 1;
}

这为TableView，ScrollPane和其他类似控件定义了两种背景颜色。第一个（首先绘制，即在下面）是在查找颜色-fx-box-border中的实心背景填充，第二个（在顶部绘制）是在查找颜色{{1}中的实心背景填充}。第一个背景填充具有0个插入，第二个具有1个像素插入，这意味着底部背景填充将在控件边缘周围的1个像素宽度处可见。（填充确保没有任何东西放在这个有效的1像素边框上。）

我根本没有对此进行测试，但它声称嵌套背景方法比绘制边框更有效（我猜本机图形在矩形背景填充时很快）。

因此，您可以使用相同的方法并将-fx-control-inner-background替换为

border-table.css

modena.css

你甚至可以引入一个查找颜色，以便更容易修改应用程序的样式：

.table-view, .scroll-pane {
    -fx-background-color: blue, -fx-control-inner-background ;
    -fx-background-insets: 0, 1 ;
}

.grid {
    -fx-background-color: blue, -fx-background ;
    -fx-background-insets: 0, 1 ;
    -fx-padding : 1 ;
}

（这与前一个效果完全相同，但只有一个地方可以改变颜色定义，而不是两个）。

请注意，最后两个版本会覆盖默认焦点边框，默认焦点边框通过在控件聚焦时定义不同的背景颜色集在默认样式表中实现。您可以使用以下命令恢复这些：

.root {
    -my-border: blue ;
}

.table-view, .scroll-pane {
    -fx-background-color: -my-border, -fx-control-inner-background ;
    -fx-background-insets: 0, 1 ;
}

.grid {
    -fx-background-color: -my-border, -fx-background ;
    -fx-background-insets: 0, 1 ;
    -fx-padding : 1 ;
}

引用另外两种查找颜色.root { -my-border: blue ; } .table-view, .scroll-pane { -fx-background-color: -my-border, -fx-control-inner-background ; -fx-background-insets: 0, 1 ; } .table-view:focused, .scroll-pane:focused { -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-control-inner-background; -fx-background-insets: -1.4, -0.3, 1; -fx-background-radius: 2, 0, 0; } .grid { -fx-background-color: -my-border, -fx-background ; -fx-background-insets: 0, 1 ; -fx-padding : 1 ; }和-fx-faint-focus-color（第一种只是第二种颜色的部分透明版本）;当然，如果您愿意，可以将这些重新定义为您自己的焦点颜色。

JavaFX窗格：制作1像素边框

1 个答案: