GridPane, row drop shadow to another row

Question

https://i.imgur.com/Yuhm5FG.png - 这是我的布局

位于 (0,0) 的 GridPane 包含带有徽标和按钮的窗格 (0,1) 处的 GridPane 包含将成为主程序视图的窗格。

我想从 0,0 到 0,1 dropShadow，只有在底部，有这样的东西：

https://i.imgur.com/PxglK6R.png

如果我将 dropShadow 应用于位于 GridPane(0,0) 的顶部窗格 - 其上的按钮和徽标会产生阴影，但不会影响此面板。

//here is the main part of app.

GridPane mainGrid = getMainGrid();
GridPane topGrid = getTopGrid();
GridPane midGrid = getMidGrid();

mainGrid.setBackground(Background.EMPTY);
mainGrid.add(topGrid, 0, 0);
mainGrid.add(midGrid, 0, 1);

//here is methods

private GridPane getTopGrid() {
    GridPane topGrid = new GridPane();
    topGrid.setPrefSize(screenSize.width, screenSize.height);
    topGrid.getColumnConstraints().add(new ColumnConstraints(screenSize.width / 6));
    topGrid.getColumnConstraints().add(new ColumnConstraints(screenSize.width / 2));
    topGrid.getColumnConstraints().add(new ColumnConstraints(screenSize.width / 6));
    topGrid.getColumnConstraints().add(new ColumnConstraints(screenSize.width / 6));

    topGrid.getRowConstraints().add(new RowConstraints(screenSize.height / 12));
    // topGrid.setGridLinesVisible(true);

    try {
        VBox imageBox = new VBox();
        ImageView imageView = new ImageView(
                new Image(new FileInputStream(new File("logo.png"))));
        imageBox.getChildren().add(imageView);
        imageBox.setAlignment(Pos.CENTER);
        topGrid.add(imageBox, 0, 0);
    } catch (FileNotFoundException e) {
        e.printStackTrace();
    }

    Button button1 = new Button("btn1");
    button1.setPrefWidth(screenSize.width / 6 - 25);
    Button button2 = new Button("btn2");
    button2.setPrefWidth(screenSize.width / 6 - 25);

    VBox button1Box = new VBox();
    button1Box.getChildren().add(button1);
    button1Box.setAlignment(Pos.CENTER_RIGHT);
    button1Box.setPadding(new Insets(0, 5, 0, 0));

    VBox button2Box = new VBox();
    button2Box.getChildren().add(button2);
    button2Box.setAlignment(Pos.CENTER_LEFT);
    button2Box.setPadding(new Insets(0, 0, 0, 5));

    topGrid.add(button1Box, 2, 0);

    topGrid.add(button2Box, 3, 0);


    return topGrid;
}

private GridPane getMainGrid() {
    GridPane pane = new GridPane();
    pane.getColumnConstraints().add(new ColumnConstraints(screenSize.width));
    pane.getRowConstraints().add(new RowConstraints(screenSize.height / 12));
    pane.getRowConstraints().add(new RowConstraints(screenSize.height * 11 / 12));
    return pane;
}

private GridPane getMidGrid() {
    return new GridPane();
}

Answer 1

用 CSS 完成：

.bottom-shadow {
    -fx-border-width: 0 0 5 0;
    -fx-border-color: white white linear-gradient(rgba(0,0,0,0.5), 
     rgba(255,255,255,0)) white; 
}

外观： https://i.imgur.com/w1UKGaw.png

GridPane, row drop shadow to another row

GridPane, row drop shadow to another row

java

javafx

javafx-8

shadow

dropshadow