在具有很多文本字段的VBox上滚动

Question

我在滚动窗格的VBox中有很多文本字段。滚动和触摸文本框时，它只是抓住焦点。因此无法平滑滚动。如何在没有任何文本域不必要的关注的情况下很好地滚动。滚动时是否需要消耗文本字段上的事件？

Answer 1

这是一种可能的解决方案，在这种情况下，您想滚动一长串文本字段，而不让它们聚焦，直到完全停止滚动，并且显然想要选择其中一个文本字段。

它基于此question的启发，是自定义的“按住”事件。

想法是将TextField控件捆绑在HBox中，并使用容器的鼠标透明属性禁用对该控件的访问。

然后，每当您点击容器时，如果按下足够长的时间，容器将可以访问控件，并且键盘将显示出来。否则，您将继续滚动，但不显示键盘。

仅在iOS上使用此KeyboardService中引用的question。

public class BasicView extends View {

    public BasicView(String name) {
        super(name);

        setTop(new Button("Button"));

        VBox controls = new VBox(15.0);

        controls.setAlignment(Pos.CENTER);

        ScrollPane pane = new ScrollPane(controls);
        controls.prefWidthProperty().bind(pane.widthProperty().subtract(20));

        for (int i = 0; i < 100; i++) {
            final Label label = new Label("TextField " + (i + 1));
            final TextField textField1 = new TextField();
            HBox.setHgrow(textField1, Priority.ALWAYS);
            HBox box = new HBox(10, label, textField1);
            box.setMouseTransparent(true);

            box.setAlignment(Pos.CENTER_LEFT);
            box.setPadding(new Insets(5));
            controls.getChildren().add(box);
        }

        addPressAndHoldHandler(controls, Duration.millis(300), eStart -> {
                for (Node box : controls.getChildren()) {
                    box.setMouseTransparent(true);
                }
            }, eEnd -> {
                for (Node box : controls.getChildren()) {
                    if (box.localToScene(box.getBoundsInLocal()).contains(eEnd.getSceneX(), eEnd.getSceneY())) {
                        box.setMouseTransparent(false);
                        ((HBox) box).getChildren().get(1).requestFocus();
                        break;
                    }
                }
            });
        setCenter(pane);

        // iOS only
        Services.get(KeyboardService.class).ifPresent(keyboard -> {
            keyboard.visibleHeightProperty().addListener((obs, ov, nv) -> {
                if (nv.doubleValue() > 0) {
                    for (Node box : controls.getChildren()) {
                        Node n1 = ((HBox) box).getChildren().get(1);
                        if (n1.isFocused()) {
                            double h = getScene().getHeight() - n1.localToScene(n1.getBoundsInLocal()).getMaxY();
                            setTranslateY(-nv.doubleValue() + h);
                            break;
                        }
                    }
                } else {
                    setTranslateY(0);
                }
            });
        });
    }

    @Override
    protected void updateAppBar(AppBar appBar) {
        appBar.setNavIcon(MaterialDesignIcon.MENU.button(e -> System.out.println("Menu")));
        appBar.setTitleText("Scrolling over TextFields");
    }

    private void addPressAndHoldHandler(Node node, Duration holdTime, 
            EventHandler<MouseEvent> handlerStart, EventHandler<MouseEvent> handlerEnd) {
        class Wrapper<T> { 
            T content; 
        }

        Wrapper<MouseEvent> eventWrapper = new Wrapper<>();

        PauseTransition holdTimer = new PauseTransition(holdTime);
        holdTimer.setOnFinished(event -> handlerEnd.handle(eventWrapper.content));

        node.addEventHandler(MouseEvent.MOUSE_PRESSED, event -> {
            handlerStart.handle(event);
            eventWrapper.content = event;
            holdTimer.playFromStart();
        });
        node.addEventHandler(MouseEvent.MOUSE_RELEASED, event -> holdTimer.stop());
        node.addEventHandler(MouseEvent.DRAG_DETECTED, event -> holdTimer.stop());
    }
}

请注意，我在顶部添加了一个按钮，以便在显示视图时将焦点放在第一位。

[每当您单击/轻击controls VBox时，它会将所有盒子设置为鼠标透明：box.setMouseTransparent(true);，然后启动PauseTransition。

如果在300毫秒之前释放鼠标或拖动鼠标（可以在方便时更改），则转换将停止。否则，在300 ms之后，它将框设置为box.setMouseTransparent(false);，并将焦点设置在TextField上，这时将显示键盘。

Answer 2

这是我用来描述您的目的的类：

public class MouseClickedFilter{

    private final Node                       observableNode;

    private BooleanProperty                  scrolling          = new ReadOnlyBooleanWrapper(false);

    private EventHandler<? super MouseEvent> dragDetectedFilter = e -> scrolling.set(true);
    private EventHandler<? super MouseEvent> mouseExitedHandler = e -> scrolling.set(false);

    private EventHandler<? super MouseEvent> mouseClickedFilter = evt ->
                                                                    {
                                                                        if (scrolling.get()) {
                                                                            evt.consume();
                                                                            scrolling.set(false);
                                                                        }
                                                                    };

    private boolean                          listenersEnabled;

    public MouseClickedFilter(Node observableNode) {
        this.observableNode = observableNode;
    }

    public void activate() {
        if (!listenersEnabled) {
            observableNode.addEventFilter(MouseEvent.DRAG_DETECTED, dragDetectedFilter);
            observableNode.addEventHandler(MouseEvent.MOUSE_EXITED, mouseExitedHandler);
            observableNode.addEventFilter(MouseEvent.MOUSE_CLICKED, mouseClickedFilter);
        }
    }

    public void deactivate() {
        if (listenersEnabled) {
            observableNode.removeEventFilter(MouseEvent.DRAG_DETECTED, dragDetectedFilter);
            observableNode.removeEventHandler(MouseEvent.MOUSE_EXITED, mouseExitedHandler);
            observableNode.removeEventFilter(MouseEvent.MOUSE_CLICKED, mouseClickedFilter);
        }
    }

    public final ReadOnlyBooleanProperty scrollingProperty() {
        return scrolling;
    }

    public final boolean isScrolling() {
        return scrolling.get();
    }

}

[ObservableNode是您的ScrollPane，其中包含文本字段