Add fixed positioned layer to FlowPane [duplicate]

问题

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

![enter image description here][1]

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.

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.

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

This is the result that I would like to get:

![enter image description here][2]

回答1:

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

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

回答2:

if you're using JavaFX 8, you can try a Notification Pane from ControlsFX project

It looks like:

回答3:

It's pretty unclear to get which behaviour you don't want and which one you want.

This sentence "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." is particularly hard to understand.

But if you just want to "use the z-index and place the red are in front of the FlowPane?", maybe all you're asking for is just a StackPane ?

StackPane lays out its children in a back-to-front stack.

The z-order of the children is defined by the order of the children list with the 0th child being the bottom and last child on top. If a border and/or padding have been set, the children will be layed out within those insets.

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

回答4:

If you want the red area be part of the ScrollPane:

Create a VBox
Add The Red Area Component to VBox
Add the FlowPane to VBox
Set VBox as the ScrollPanes Content

If the Layout with VBox's doenst look statisfying try Borderpane and set the "Red Area" top and your flowpane as center.

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

see QuidNovi's answer

来源：https://stackoverflow.com/questions/18217586/add-fixed-positioned-layer-to-flowpane

标签

javafx-2

javafx

javafx-8