先看成品效果图：
第一步：创建Grid List Box 3D, or Grid List Box 2D；2D就行了。
第二步：
创建含有图片、名字和号码三个元素的模板。然后用这个模板创建电话簿列表。
创建完后会变成下面这样，这是因为默认的行和列的个数。
第三步：修改宽窄尺寸，使得呈现为列表显示。似乎修改grid的行数和列数应该也可以改为列表显示的。
第四步：设置起始和终止区域。
这样基本就可以了。在此基础上将text显示一样的项目，设置为bind。再添加page的跳转。就可以了。
下面是通过脚本的方式创建：
//To create a Grid List Box 2D:
// Create a Grid List Box 2D named MyListBox.
GridListBox2DSharedPtr gridListBox = GridListBox2D::create(domain, "MyListBox");
//To configure the grid area:
// Make each grid cell be a 100x100 square.
gridListBox->setCellWidth(100.0f);
gridListBox->setCellHeight(100.0f);
// Make the grid contain three rows that are filled column by column.
gridListBox->setHeight(300.0f);
gridListBox->setDirection(GridListBoxConcept::GridDirectionDown);
// Make the grid contain 10 columns. Items that are dragged beyond these columns are made invisible.
gridListBox->setWidth(1000.0f);
// Change the resting position when the list is scrolled to the beginning or end, so that items are not right at the grid edge.
gridListBox->setItemAreaBegin(0.2f);
gridListBox->setItemAreaEnd(0.8f);
//To add items to the list box:
// Create images and add them as items of the list box.
// Items on the grid appear in the order you add them to the list.
for (int i = 0; i < 5; ++i)
{
Image2DSharedPtr item = Image2D::create(domain, "item" + to_string(i));
item->setImage(item->acquireResource<Texture>(ResourceID("DefaultTexture")));
// Make the images shrink to the cell size.
item->setHorizontalAlignment(Node::HorizontalAlignmentStretch);
item->setVerticalAlignment(Node::VerticalAlignmentStretch);
gridListBox->addItem(item);
}
|
