带有阴影的 JavaFX 分层布局

Question

我正在学习 JavaFX，我正在尝试创建一个AnchorPane本身包含 3 个以上AnchorPane的内容。目前，我有一个问题，即面板的阴影由于旁边的面板而被隐藏。所以我需要一些关于如何解决这个问题的建议。我试图在它们之间创建一个距离，但是我可以看到后面有一个白色层。我试图改变图层的 z 顺序，似乎没有用，所以现在在不知道该怎么做 2 小时后，我在这里问。也许有人知道。我的代码：    DropShadow dropShadow2;    AnchorPane iconPane, menuPane, viewPane;    public static void main(String[] args) {        launch(args);    }    @Override    public void start(Stage primaryStage){        dropShadow2 = new DropShadow();        dropShadow2.setOffsetX(6.0);        dropShadow2.setOffsetY(4.0);        //Main layout        AnchorPane main_layout = new AnchorPane();        //Icon layout (left)        setUpIconLayout();        //Menu layout (center)        setUpMenuLayout();        //View layout (right)        setUpViewLayout();        main_layout.getChildren().addAll(iconPane, menuPane, viewPane);        Scene scene = new Scene(main_layout, 1000, 600);        primaryStage.setTitle("Delivery System Database");        primaryStage.setScene(scene);        primaryStage.show();    }    private void setUpIconLayout() {        iconPane = new AnchorPane();        iconPane.setPrefSize(50,600);        String hexColor_left = "D64550";        iconPane.setStyle("-fx-background-color: #" + hexColor_left);        iconPane.setEffect(dropShadow2);    }    private void setUpMenuLayout() {        menuPane = new AnchorPane();        menuPane.setPrefSize(200,600);        String hexColor_mid = "EA9E8D";        menuPane.setStyle("-fx-background-color: #" + hexColor_mid);        menuPane.setEffect(dropShadow2);        menuPane.setTranslateX(50);    }    private void setUpViewLayout() {        viewPane = new AnchorPane();        viewPane.setPrefSize(700,600);        String hexColor_right = "DAEFB3";        viewPane.setStyle("-fx-background-color: #" + hexColor_right);        viewPane.setEffect(dropShadow2);        viewPane.setTranslateX(250);    }}

Answer 1

子节点按照它们添加的顺序呈现，因此以相反的顺序添加它们就足够了：

main_layout.getChildren().addAll(viewPane, menuPane, iconPane);

Answer 2

子节点按照它们在 children 中出现的顺序呈现ObservableList。这意味着索引较高的孩子将呈现在较低索引的孩子之上。因此，示例中的其他节点覆盖了阴影。由于您使用AnchorPane的是开发人员设置的绝对位置，因此一个简单的解决方法是反转子列表的顺序（如VGR 所示）。

如果您使用的布局也根据子列表的顺序定位其子级，则该解决方案将无法正常工作，例如HBox. 您可以通过设置适当的翻译转换来解决此问题，但不建议这样做。相反，您可以设置viewOrder子项的属性（在 JavaFX 9 中添加）。这个性质：

定义 thisNode在其父级中的渲染和选取顺序。

此属性用于更改其父节点中节点的呈现和选取顺序，而无需重新排序父节点的子列表。例如，这可以用作实现透明度排序的更有效方式。为此，应用程序可以将viewOrder每个节点的值分配给该节点与查看器之间的计算距离。

children父级将按降序遍历它viewOrder。这意味着一个较低的孩子viewOrder将在一个较高的孩子面前viewOrder。如果两个孩子有相同的 ，则父母将按照它们在父母列表中viewOrder出现的顺序遍历它们。children

由于您希望先前的子级呈现在后续子级之上，您可以简单地将 设置为列表viewOrder中的索引children。这是一个例子：

import java.util.stream.DoubleStream;

import javafx.application.Application;

import javafx.geometry.Insets;

import javafx.scene.Scene;

import javafx.scene.effect.BlurType;

import javafx.scene.effect.DropShadow;

import javafx.scene.layout.Background;

import javafx.scene.layout.BackgroundFill;

import javafx.scene.layout.HBox;

import javafx.scene.layout.Region;

import javafx.scene.paint.Color;

import javafx.stage.Stage;

public class Main extends Application {

    @Override

    public void start(Stage primaryStage) {

        HBox root = new HBox(createRegions(50.0, 200.0, 700.0));

        root.setPadding(new Insets(0.0, 75.0, 0.0, 0.0));

        for (int i = 0; i < root.getChildren().size(); i++) {

            root.getChildren().get(i).setViewOrder(i);

        }

        primaryStage.setScene(new Scene(root));

        primaryStage.setTitle("ViewOrder Example");

        primaryStage.show();

    }

    private Region[] createRegions(double... prefWidths) {

        return DoubleStream.of(prefWidths).mapToObj(prefWidth -> {

            Region region = new Region();

            region.setMinSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);

            region.setPrefSize(prefWidth, 600.0);

            region.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);

            region.setEffect(new DropShadow(BlurType.THREE_PASS_BOX, Color.BLACK, 10.0, 0.0, 6.0, 4.0));

            region.setBackground(new Background(new BackgroundFill(Color.WHITE, null, null)));

            return region;

        }).toArray(Region[]::new);

    }

}

您提到您尝试的解决方案之一是设置孩子的 Z-Order，但它不起作用。为了设置z坐标工作，您必须在创建Scene. 您可以通过修改上面的示例来测试它：

更改setViewOrder(i)为setTranslateZ(i)。

更改new Scene(root)为new Scene(root, -1.0, -1.0, true)

这具有在 JavaFX 8 中工作的好处。