Gluon AppBar保留在视图中 [英] Gluon AppBar keep in the view

问题描述

我正在尝试使用顶部的App Bar构建一个消息窗口

I'm trying to build a message window with App Bar on the top

此屏幕由顶部的Gluon App Bar和底部的VBox组成，其余部分由屏幕中显示的元素。

This screen consist of Gluon App Bar on the top and VBox in bottom which has rest of the element shown in the screen.

问题是当我点击文本区域输入文本时，App Bar超出范围。

Issue is when i click on the text area to enter text the App Bar goes out of scope.

有没有办法可以将App Bar设置为始终位于顶部？

Is there a way I can set App Bar to be always on top?

推荐答案

如果你是在Android上部署您的应用程序， TextField 和 TextArea 控件包含一个内置的检查：当这些输入控件聚焦时，如果需要，场景会向上移动以防止软件键盘隐藏控件。

If you are deploying your app on Android, the TextField and TextArea controls include a built-in check: when those input controls get focused, if required the scene is moved up to prevent the software keyboard from hiding the control.

这些翻译影响整个场景，因此其中的所有节点（查看， VBox ， TextField ， TextArea ， AppBar ，...）也将被翻译。

These translation affects the whole scene, so all the nodes in it (View, VBox, TextField, TextArea, AppBar, ...), will be translated as well.

因此，如果你想保持 AppBar 节点始终可见且处于相同的顶部位置，可能的修复可能只要它发生就会抵消那个翻译。

So if you want to keep the AppBar node always visible and in the same top position, a possible fix could be counteracting that translation whenever it happens.

如果你有一个 BasicView 例如（Gluon IDE插件 - >单个查看项目），在视图底部有一个 TextField 控件：

If you have a BasicView for instance (Gluon IDE plugin -> single view project), with a TextField control at the bottom of the view:

public BasicView() {

    Label label = new Label("Hello JavaFX World!");

    Button button = new Button("Change the World!");
    button.setGraphic(new Icon(MaterialDesignIcon.LANGUAGE));
    button.setOnAction(e -> label.setText("Hello JavaFX Universe!"));

    VBox controls = new VBox(15.0, label, button, new TextField());
    controls.setAlignment(Pos.BOTTOM_CENTER);
    controls.setPadding(new Insets(20));

    setCenter(controls);
}

你可以像这样修改它：

public BasicView() {

    ...

    setOnShown(e -> {
        MobileApplication.getInstance().getAppBar().translateYProperty()
                .bind(controls.getScene().getRoot().translateYProperty().multiply(-1));
    });
}

确保添加此绑定时视图已添加到场景中（防止NPE）。

Make sure that the view is already added to the scene when you add this binding (to prevent a NPE).

现在当文本字段获得焦点时，整个场景将向上移动，appBar将向下移动相同的数量：

Now when the textfield gets the focus, the whole scene will be moved up, and the appBar will be moved down the same amount:

这篇关于Gluon AppBar保留在视图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！