我有一个带有面板的 FlowPane，用于在用户面前显示数据。
![在此处输入图片描述][1]
当面板数量大于可见区域时，我还添加了滚动窗格。 我还想添加过滤器，它将按类型对面板进行排序并仅显示适当的面板。红色区域将包含作为过滤器的 ComboBox。
如您所见，红色将 FlowPane 向下推，当我使该区域透明时，这将在顶部组件和滚动之间产生间隙。
有没有办法使用 z-index 并将红色放在 FlowPane 前面？还是其他解决方案？
这是我想要得到的结果：
![在此处输入图片描述][2]
【问题讨论】：
根据您在之前问题中的代码研究此示例：
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;
}
【讨论】：
如果您使用的是 JavaFX 8，您可以尝试来自 ControlsFX project 的通知窗格
看起来像：
【讨论】：
很难得到你不想要的行为和你想要的行为。
这句话“正如你所见，红色是向下推 FlowPane，当我使该区域透明时，这将在顶部组件和滚动之间产生间隙。”特别难理解。
但是，如果您只是想“使用 z-index 并将红色放在 FlowPane 的前面？”，也许您所要求的只是一个 StackPane ？
StackPane 以从后到前的堆栈形式排列其子项。
孩子的z-order由孩子的顺序定义 列表，第 0 个孩子在底部，最后一个孩子在顶部。如果一个 边框和/或填充已设置，孩子将被布置 在这些插图中。
http://docs.oracle.com/javafx/2/api/javafx/scene/layout/StackPane.html
【讨论】：
如果您希望红色区域成为 ScrollPane 的一部分：
如果带有 VBox 的布局看起来不令人满意，请尝试使用 Borderpane 并将“红色区域”设置为顶部，并将您的流程窗格设置为中心。
有没有办法使用 z-index 并将红色放在 FlowPane 前面？还是其他解决方案？
【讨论】：