Vaadin流，尝试在网格中显示水平布局

我已经写了下面的代码，我想在Vaadin网格中添加带有文本框和按钮的水平布局。但当我运行代码时，它会将输出显示为

com.vaadin.flow.component.orderedlayout。HorizontalLayout@145a03ea com.vaadin.flow.component.orderedlayout。HorizontalLayout@1f7acb46

package com.packagename.myapp;

import java.util.ArrayList;
import java.util.List;

import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("table")
public class TestTable extends VerticalLayout {
    private Grid<TblValue> grid = new Grid<>();
    public TestTable() {
        init();
    }

    private void init() {
        grid.addColumn(TblValue::getLayout);
        grid.setItems(createData());
        add(grid);
    }

    private List<TblValue> createData(){
        List<TblValue> data = new ArrayList<>();
        data.add(new TblValue());
        data.add(new TblValue());
        return data;
    }

    private class TblValue {
        HorizontalLayout layout = new HorizontalLayout();
        private Text txt = new Text("test string");
        private Button btn = new Button("Submit");
        public TblValue() {
            layout.add(txt, btn);
        }
        public HorizontalLayout getLayout() {
            return layout;
        }
        public void setLayout(HorizontalLayout layout) {
            this.layout = layout;
        }
    }
}

package com.packagename.myapp；
导入java.util.ArrayList；
导入java.util.List；
导入com.vaadin.flow.component.Text；
导入com.vaadin.flow.component.button.button；
导入com.vaadin.flow.component.grid.grid；
导入com.vaadin.flow.component.orderedlayout.HorizontalLayout；
导入com.vaadin.flow.component.orderedlayout.VerticalLayout；
导入com.vaadin.flow.router.Route；
@路线（“表格”）
公共类TestTable扩展了VerticalLayout{
私有网格=新网格（）；
公共测试表（）{
init（）；
}
私有void init（）{
addColumn（TblValue:：getLayout）；
setItems（createData（））；
添加（网格）；
}
私有列表createData（）{
列表数据=新的ArrayList（）；
data.add（新的TblValue（））；
data.add（新的TblValue（））；
返回数据；
}
私有类TBL值{
HorizontalLayout=新建HorizontalLayout（）；
私有文本txt=新文本（“测试字符串”）；
私人按钮btn=新按钮（“提交”）；
公共TBL值（）{
布局.添加（txt，btn）；
}
公共水平布局getLayout（）{
返回布局；
}
公共空间布局（水平布局布局）{
this.layout=布局；
}
}
}

正如Tatu Lund在评论中提到的，您的问题的解决方案是使用

grid.addComponentColumn（…）

而不是

grid.addColumn（…）

addColumn（…）

方法将始终显示一个字符串。如果valueprovider返回任何对象，它将使用

string.valueOf（Object）

显示其字符串值。这就是你所看到的<代码>com.vaadin.flow.component.orderedlayout。HorizontalLayout@145a03ea是调用

String.valueOf（myHorizontalLayout）

时得到的值

---

另一方面，

addComponentColumn（…）

将获取valueProvider返回的水平布局，并将实际组件放入您想要的单元格中。

您可能希望使用addComponentColumn（…）而不是addColumn（…）。