Question

通过Vaadin 8（AbsoluteLayout）中的Framework，可以在布局内以小部件的像素位置定位。尽管不是我的首选布局，AbsoluteLayout适合从其他使用面向像素位置的布局的UI构建平台移植代码。

// 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的原因。

migration guide用于从Vaadin 8（Framework）移至Vaadin 10（Flow），在this list of components中指出，不包括8中的AbsoluteLayout在10中，他们也不打算在将来添加它。但是该页面确实提供了有关替换AbsoluteLayout的注意事项：

在V10中使用以下方法非常容易实现相同效果： div

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

Answer 1

作为您对“ Hello World”示例应用程序的请求，我从https://vaadin.com/start下载了带有Spring Starter的Project Starter，并将Tatu的解决方案与示例使用代码结合在一起。您可以在https://github.com/Peppe/absolute-layout-demo上找到它。

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

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

我创建了一个名为AbsoluteLayout的类，其整体看起来像这样：

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结构的父级位置）而言。否则该组件将位于浏览器角的顶部：50像素，左侧：50像素。

然后用法类如下所示：

@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。如果要将一个元素放置在相对位置，则可以对应用程序中的任何布局执行相同的操作。

Answer 2

基于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

在Vaadin 10 Flow中替代Vaadin 8 Framework中的`AbsoluteLayout`吗？

2 个答案: