Добавить фиксированный позиционный слой в FlowPane

Question

У меня есть FlowPane с панелями, которые будут использоваться для отображения данных перед пользователем.

! [Введите описание изображения здесь] [1]

Я также добавил ScrollPane, когда количество панелей больше, чем в видимой области. Я также хочу добавить фильтр, который будет сортировать панели по типу и отобразит только соответствующее. Красная область будет содержать ComboBox, который будет фильтром.

И как вы можете видеть, красные выталкивают вниз FlowPane, что сделает промежуток между верхним компонентом и свитком, когда я сделаю область прозрачной.

Есть ли способ использовать z-индекс и поместить красный цвет перед FlowPane? Или какое-то другое решение?

Это результат, который я хотел бы получить:

[введите описание изображения здесь] [2]

Answer 1

Исследовать этот пример, основанный на коде в предыдущих вопросах:

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:
Согласно комментарию, здесь комбо без панели. Поскольку панели нет, события мыши не будут заблокированы. Замените только этот метод следующим образом:

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 2

, если вы используете JavaFX 8, вы можете попробовать Notification Pane из ControlsFX project

Это выглядит следующим образом:

Answer 3

Это довольно неясное, чтобы получить какое поведение вы не хотите, и который вы хотите.

Это предложение «И, как вы можете видеть, красный толкает вниз FlowPane, который сделает промежуток между верхним компонентом и свитком, когда я сделаю область прозрачной». особенно трудно понять.

Но если вы просто хотите «использовать z-индекс и поместить красные перед FlowPane?», Возможно, все, о чем вы просите, это просто StackPane?

StackPane выкладывает своих детей в стеке «назад к передней».

Z-порядок детей определяется по заказу детей с 0-м ребенком, являющимся нижним и последним ребенком сверху. Если была установлена ​​граница и/или прокладка , то дети будут выложены внутри этих вставок.

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

Answer 4

Если вы хотите красная область быть частью ScrollPane:

• Создать VBox
• Добавить Красной площади Компонента VBox
• Добавить FlowPane в VBox
• Комплект VBox в качестве содержимого ScrollPanes

Если макет с дюжиной VBox выглядит, попробуйте Borderpane и установите верхнюю часть «Красной зоны» и вашу стеклянную панель как центр.

---

Есть ли способ использовать Z-индекс и место красный в передней части FlowPane? Или какое-то другое решение?

см QuidNovi's answer