带有阴影的 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 {&nbsp; &nbsp; @Override&nbsp; &nbsp; public void start(Stage primaryStage) {&nbsp; &nbsp; &nbsp; &nbsp; HBox root = new HBox(createRegions(50.0, 200.0, 700.0));&nbsp; &nbsp; &nbsp; &nbsp; root.setPadding(new Insets(0.0, 75.0, 0.0, 0.0));&nbsp; &nbsp; &nbsp; &nbsp; for (int i = 0; i < root.getChildren().size(); i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; root.getChildren().get(i).setViewOrder(i);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; primaryStage.setScene(new Scene(root));&nbsp; &nbsp; &nbsp; &nbsp; primaryStage.setTitle("ViewOrder Example");&nbsp; &nbsp; &nbsp; &nbsp; primaryStage.show();&nbsp; &nbsp; }&nbsp; &nbsp; private Region[] createRegions(double... prefWidths) {&nbsp; &nbsp; &nbsp; &nbsp; return DoubleStream.of(prefWidths).mapToObj(prefWidth -> {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Region region = new Region();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; region.setMinSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; region.setPrefSize(prefWidth, 600.0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; region.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; region.setEffect(new DropShadow(BlurType.THREE_PASS_BOX, Color.BLACK, 10.0, 0.0, 6.0, 4.0));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; region.setBackground(new Background(new BackgroundFill(Color.WHITE, null, null)));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return region;&nbsp; &nbsp; &nbsp; &nbsp; }).toArray(Region[]::new);&nbsp; &nbsp; }}您提到您尝试的解决方案之一是设置孩子的 Z-Order，但它不起作用。为了设置z坐标工作，您必须在创建Scene. 您可以通过修改上面的示例来测试它：更改setViewOrder(i)为setTranslateZ(i)。更改new Scene(root)为new Scene(root, -1.0, -1.0, true)这具有在 JavaFX 8 中工作的好处。