java - 从表迁移到网格 vaadin

Question

我需要简单地使用 vaadin 创建一个 2 行 3 列的表来添加到我现有的界面中。我怎样才能用网格做到这一点。我是 Vaadin 的新手，所以请任何人帮助我解决这个问题。我只想在布局中添加一个表格而不添加数据。

@Route("Playboard")
@StyleSheet("frontend://styles/style.css")
public class Playboard extends VerticalLayout {

public Playboard() {
    setLayout();
    addClassName("play-board");
    setSizeFull();

}

private void setLayout() {
HorizontalLayout playboard = new HorizontalLayout();
H1 text1 = new H1("Playerboard");
playboard.add(text1);
add(playboard);
addClassName("player-board");
setAlignItems(Alignment.CENTER);
getElement().getThemeList().add("dark");

VerticalLayout n1 = new VerticalLayout();
Label label = new Label("Name :");
label.addClassName("player-name");
Label name = new Label("");
name.addClassName("players-name");
n1.add(label, name);
add(n1); }}

这是我的界面，我需要在此处显示一个表格，其中包含 3 列和 2 行，没有任何数据。我可以以垂直布局显示它吗？你能帮我解决这个问题吗？

感谢您的宝贵时间:)

Answer 1

正如其他人所说，如果您想要一个用于布局组件的布局，还是一个用于表格数据的网格，则有点不清楚。

如果您需要表格数据，这里是一个包含三列两行的网格示例。

@Route
public class MainView extends VerticalLayout {
    public MainView(@Autowired MessageBean bean) {
        Button button = new Button("Click me",
                e -> Notification.show(bean.getMessage()));
        GridPro<Person> grid = new GridPro<>();
        grid.setItems(
                new Person("Steve", "Winchester", "Chengdu"),
                new Person("Bob", "Martin", "Turku");
        grid.addColumn(Person::getFirstName).setHeader("First name");
        grid.addColumn(Person::getLastName).setHeader("Last name");
        grid.addColumn(Person::getCity).setHeader("City");
        add(grid);
    }
}

Person 是一个普通的 Java 对象，具有字符串属性firstName、lastName 和 city，以及关联的 getter 和 setter。