从表到网格的迁移

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 对象，其字符串属性为名字、姓氏和城市，以及关联的获取者和设置者。