Question

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

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

我想将阴影从0,0降到0,1（仅在底部）以具有如下所示：

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，行阴影到另一行

1 个答案: