在 Vaadin 10 Flow 中替换 Vaadin 8 Framework 中的“AbsoluteLayout”？

Question

AbsoluteLayout in Vaadin 8 (Framework) 支持在布局中以像素位置为导向放置小部件。虽然不是我的第一个布局选择，AbsoluteLayout 适合从其他 UI 构建平台移植代码，这些平台使用面向像素位置的布局。

示例代码from the manual:

// A 400x250 pixels size layout
AbsoluteLayout layout = new AbsoluteLayout();
layout.setWidth("400px");
layout.setHeight("250px");

// A component with coordinates for its top-left corner
TextField text = new TextField("Somewhere someplace");
layout.addComponent(text, "left: 50px; top: 50px;");

我可以看到传递的参数只是 CSS 编码。但我不是 HTML/CSS 向导，这就是为什么我首先使用基于 Java 的 Vaadin。

8中的migration guide for moving from Vaadin 8 (Framework) to Vaadin 10 (Flow) says in this list of components that the AbsoluteLayout没有包含在10中，以后也不打算添加。但是该页面确实提供了有关替换 AbsoluteLayout:

的注释

Very easy to achieve the same in V10 using e.g. Div

有人可以解释这在基于 Java 的 Vaadin 应用程序中意味着什么吗？也许是一个例子？
一个人如何在 Vaadin 10 Flow 应用程序中方便且常规地对小部件进行像素定位？

Answer 1

基于 Java 的 Vaadin 应用程序中最简单的方法是使用 Div 作为布局并在其中添加组件。

对于您想要定位的每个组件，您需要应用 CSS 样式，为此有 Java API，即 component.getElement().getStyle() .

可能是这样的

public void setPosition(Component component, int x, int y) {
   component.getElement().getStyle().set("position","absolute");
   component.getElement().getStyle().set("top",y+"px");
   component.getElement().getStyle().set("left",x+"px");
}

可能您想扩展 Div 和上面的方法（这使得基本的 AbsoluteLayout）

另请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 2

根据您对 "Hello World" 示例应用程序的请求，我从 https://vaadin.com/start and combined Tatu's solution with your example usage code. You can find it at https://github.com/Peppe/absolute-layout-demo 下载了带有 Spring Starter 的 Project Starter。

您可以在终端/命令行中使用以下命令对其进行实时测试：

https://github.com/Peppe/absolute-layout-demo.git
cd absolute-layout-demo
mvn spring-boot:run

我创建了一个名为 AbsoluteLayout 的 class，其整体如下所示：

public class AbsoluteLayout extends Div {

    public AbsoluteLayout() {
        getElement().getStyle().set("position", "relative");
    }

    public void add(Component component, int top, int left) {
        add(component);
        component.getElement().getStyle().set("position", "absolute");
        component.getElement().getStyle().set("top", top + "px");
        component.getElement().getStyle().set("left", left + "px");
    }
}

与 Tatu 所说的相比，我所做的唯一改变是给出了相对于父布局的位置。这使得添加到布局的子元素的位置相对于布局，而不是主体（或 DOM 结构中的父元素位置）。否则该组件将位于浏览器角落的 top:50px、left:50px。

那么用法 class 如下所示：

@HtmlImport("styles/shared-styles.html")
@Route
public class MainView extends VerticalLayout {

    public MainView() {
        setClassName("main-layout");

        //Just to add some content on the page to test relative position
        for (int i = 0; i<5; i++){
            add(new Div(new Text("Hello")));
        }

        // A 400x250 pixels size layout
        AbsoluteLayout layout = new AbsoluteLayout();
        layout.setWidth("400px");
        layout.setHeight("250px");

        // A component with coordinates for its top-left corner
        TextField text = new TextField("Somewhere someplace");
        layout.add(text, 50, 50);
        add(layout);
    }
}

我在布局前添加了几行文字来增加几行文字，只是为了测试上面提到的position:relative。

希望这对您有所帮助，让您走上正确的道路。正如您所注意到的，这个 "AbsoluteLayout" 并没有真正的任何代码——它只是一个 div。如果您想将一个元素放置到相对位置，您可以对应用中的任何布局执行相同的技巧。

在 Vaadin 10 Flow 中替换 Vaadin 8 Framework 中的“AbsoluteLayout”？

Replacement for `AbsoluteLayout` from Vaadin 8 Framework in Vaadin 10 Flow?

layout

css-position

vaadin

vaadin10

vaadin-flow