Question

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

！[在此处输入图片说明] [1]

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

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

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

这是我想得到的结果：

！[在此输入图片说明] [2]

Answer 1

如果您使用的是JavaFX 8，则可以尝试ControlsFX project

中的通知窗格

看起来像：

enter image description here

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's answer

将固定定位图层添加到FlowPane

4 个答案: