将固定定位图层添加到FlowPane [英] Add fixed positioned layer to FlowPane

问题描述

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

I have a FlowPane with panels which will be used to display data in front of the user.

！[在此输入图像描述] [1]

![enter image description here][1]

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

I added also scrollpane when the number of the panels is bigger than the visible area. I also want to add filter which will sort the panels by type and will display only the appropriate. The red area will hold the ComboBox which will be the filter.

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

And as you can see the red are pushes down the FlowPane which will make a gap between the top component and the scroll when I make the area transparent.

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

Is there a way to use the z-index and place the red are in front of the FlowPane? Or some other solution?

这是我想得到的结果：

！[输入图片这里的描述] [2]

![enter image description here][2]

推荐答案

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

Investigate this example based on your code in previous questions:

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);
    }
}

编辑：

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

As per comment, here is the combo without pane. Since there is no pane the mouse events will not be blocked. Replace only this method with above one:

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;
}

这篇关于将固定定位图层添加到FlowPane的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！