javafx-2 - 将固定定位层添加到 FlowPane

Question

我有一个带有面板的 FlowPane，它将用于在用户面前显示数据。

![在此处输入图像描述][1]

当面板的数量大于可见区域时，我还添加了滚动窗格。我还想添加过滤器，它将按类型对面板进行排序并仅显示适当的面板。红色区域将包含作为过滤器的 ComboBox。

正如您所看到的，红色将 FlowPane 向下推，当我使该区域透明时，它将在顶部组件和滚动之间产生间隙。

有没有办法使用 z-index 并将红色放在 FlowPane 前面？还是其他解决方案？

这是我想要得到的结果：

![在此处输入图像描述][2]

Answer 1

如果您使用的是 JavaFX 8，您可以尝试ControlsFX 项目中的通知窗格

看起来像：

Answer 2

很难得到你不想要的行为和你想要的行为。

这句话“如您所见，红色将向下推 FlowPane，当我使该区域透明时，这将在顶部组件和滚动之间产生间隙。” 特别难理解。

但是，如果您只想“使用 z-index 并将红色放在 FlowPane 的前面？”，也许您所要求的只是一个 StackPane ？

StackPane 以从后到前的堆栈布局其子级。

子项的 z 顺序由子项列表的顺序定义，第 0 个子项位于底部，最后一个子项位于顶部。如果设置了边框和/或填充，则子元素将被布置在这些插图中。

http://docs.oracle.com/javafx/2/api/javafx/scene/layout/StackPane.html

Answer 3

根据您在前面问题中的代码调查此示例：

public class Demo extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        StackPane stackPane = new StackPane();
        stackPane.setAlignment(Pos.TOP_LEFT);
        stackPane.getChildren().addAll(infrastructurePane(), getFilterPane());
        Scene scene = new Scene(stackPane);
        stage.setScene(scene);
        stage.show();
    }

    public Pane getFilterPane() {
        ObservableList<String> options =
                FXCollections.observableArrayList(
                "Option 1", "Option 2", "Option 3");
        ComboBox<String> combo = new ComboBox<String>(options);

        HBox pane = new HBox();
        pane.setPadding(new Insets(20));
        pane.setStyle("-fx-background-color: rgba(255,0,85,0.4)");
        pane.getChildren().add(combo);
        pane.setMaxHeight(40);
        // Optional
        //pane.setEffect(new DropShadow(15, Color.RED));
        return pane;
    }

    public ScrollPane infrastructurePane() {

        final FlowPane flow = new FlowPane();
        flow.setPadding(new Insets(5, 5, 5, 5));
        flow.setVgap(5);
        flow.setHgap(5);
        flow.setAlignment(Pos.CENTER);

        final ScrollPane scroll = new ScrollPane();

        scroll.setHbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED);    // Horizontal scroll bar
        scroll.setVbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED);    // Vertical scroll bar
        scroll.setFitToHeight(true);
        scroll.setFitToWidth(true);
        scroll.setContent(flow);
//        scroll.viewportBoundsProperty().addListener(new ChangeListener<Bounds>() {
//            @Override
//            public void changed(ObservableValue<? extends Bounds> ov, Bounds oldBounds, Bounds bounds) {
//                flow.setPrefWidth(bounds.getWidth());
//                flow.setPrefHeight(bounds.getHeight());
//            }
//        });

        //flow.setPrefWrapLength(170); // preferred width allows for two columns
        flow.setStyle("-fx-background-color: yellow;");

        for (int i = 0; i < 28; i++) {
            flow.getChildren().add(generateRectangle());
        }

        String cssURL = "/com/dx57dc/css/ButtonsDemo.css";
        String css = this.getClass().getResource(cssURL).toExternalForm();
        flow.getStylesheets().add(css);

        return scroll;
    }

    public Rectangle generateRectangle() {

        final Rectangle rect2 = new Rectangle(10, 10, 10, 10);
        rect2.setId("app");
        rect2.setArcHeight(8);
        rect2.setArcWidth(8);
        //rect2.setX(10);
        //rect2.setY(160);
        rect2.setStrokeWidth(1);
        rect2.setStroke(Color.WHITE);
        rect2.setWidth(220);
        rect2.setHeight(180);

        rect2.setOnMouseClicked(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent event) {
                rect2.setFill(Color.ALICEBLUE);
            }
        });

        return rect2;
    }

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

编辑：
根据评论，这是没有窗格的组合。由于没有窗格，因此不会阻止鼠标事件。仅将此方法替换为上述方法：

public ComboBox getFilterPane() {
    ObservableList<String> options =
            FXCollections.observableArrayList(
            "Option 1", "Option 2", "Option 3");
    ComboBox<String> combo = new ComboBox<String>(options);
    combo.setTranslateX(10);
    combo.setTranslateY(10);
    return combo;
}

Answer 4

如果您希望红色区域成为 ScrollPane 的一部分：

• 创建一个 VBox
• 将红色区域组件添加到 VBox
• 将 FlowPane 添加到 VBox
• 将 VBox 设置为 ScrollPanes 内容

如果带有 VBox 的布局看起来不令人满意，请尝试使用 Borderpane 并将“红色区域”设置为顶部，并将您的流程窗格设置为中心。

---

有没有办法使用 z-index 并将红色放在 FlowPane 前面？还是其他解决方案？

见QuidNovi 的回答