6

在AbsoluteLayoutVaadin 8 ( 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 的原因。

从 Vaadin 8 ( Framework ) 迁移到 Vaadin 10 ( Flow )的迁移指南在此组件列表中指出，from 8 不包含在 10 中，他们也不打算在未来添加它。但是该页面确实提供了有关替换的说明：AbsoluteLayoutAbsoluteLayout

使用例如 Div 在 V10 中很容易实现相同的效果

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

2 回答 2

8

作为您对“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。如果您想将一个元素放置到相对位置，您可以对应用程序中的任何布局执行相同的技巧。

于 2018-07-08T19:28:16.787 回答
4

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

于 2018-07-06T19:28:26.890 回答