UI 弹出不透明蒙版 JavaFX

Question

是否可以使用Popup遮罩顶部和底部 JavaFX？ 我有带有Popup的TextField自动完成功能。 所以想法是放置一个不透明蒙版。

Answer 1

以下是您可以尝试的另一种方法，用于获得不透明蒙版效果。 虽然它不是完全相同的实现，但我从您提供的链接中获得了一些想法:)。

我创建了一个小实用程序，您可以在其中传递 Popup 实例。 该实用程序构建遮罩窗格并包含到弹出窗口的根节点。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ListView;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.stage.Popup;
import javafx.stage.Stage;
import java.util.stream.Collectors;
import java.util.stream.IntStream;

public class PopupOpacityMaskDemo extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        StackPane root = new StackPane();
        root.setStyle("-fx-background-color:grey;");
        root.setOnMouseClicked(e -> {
            ListView<String> content = new ListView<>();
            content.getItems().addAll(IntStream.range(100, 200).mapToObj(i -> i + "").collect(Collectors.toList()));
            content.setPrefSize(200, 250);

            Popup popup = new Popup();
            popup.setAutoHide(true);
            popup.getContent().add(content);
            popup.setX(e.getScreenX());
            popup.setY(e.getScreenY());
            popup.show(root.getScene().getWindow());
            MaskUtil.applyMask(popup);
        });
        Scene scene = new Scene(root, 200, 200);
        primaryStage.setScene(scene);
        primaryStage.setTitle("Demo");
        primaryStage.show();
    }

    static class MaskUtil{
        static void applyMask(Popup popup) {
            double fadeSize = 70;
            Pane pane = (Pane)popup.getScene().getRoot();

            // Build the mask panes
            Pane topMask = buildMaskPane(pane, fadeSize, false);
            Pane bottomMask = buildMaskPane(pane, fadeSize, true);

            // Just ensuring to remove any masks (if you are reusing the Popup)
            pane.getChildren().removeAll(pane.lookupAll(".mask"));
            pane.getChildren().addAll(topMask, bottomMask);

            // Update the bottom mask position by listening to height of pane
            pane.heightProperty().addListener((obs, old, h) -> bottomMask.setLayoutY(h.doubleValue() - fadeSize));
            if (pane.getHeight() > 0) {
                bottomMask.setLayoutY(pane.getHeight() - fadeSize);
            }
        }

        private static Pane buildMaskPane(Pane pane, double fadeSize, boolean isBottom) {
            Pane mask = new Pane();
            mask.setMouseTransparent(true); // Turn this to 'false' if you don't want to interact over mask
            mask.setPrefHeight(fadeSize);
            mask.prefWidthProperty().bind(pane.widthProperty());
            mask.maxHeightProperty().bind(mask.prefHeightProperty());
            mask.minHeightProperty().bind(mask.prefHeightProperty());
            mask.getStyleClass().add("mask");
            mask.setStyle(String.format("-fx-background-color:linear-gradient(to %s, #555555, transparent)", isBottom ? "top" : "bottom"));
            return mask;
        }
    }
}