列表容器:
列表容器,顾名思义就是只能上下滑动的容器,下面说说怎样往里面添加元素,如下图:
要往里面加入40个相同的元素,每行6个,每一行的元素放在一个基础容器里,有两种方法实现(其实原理一样)
一种是吧要加入的元素单独拿出来做成节点,在加进去,这样做的好处是结构比较清晰,通俗,比较简单,缺点是代码稍多
第二种是用clone,这种方法代码较少(推荐),一般美术会做成类似上图
先说第二种:
_allGeneralData = data::General::getInstance()->getGeneral().asValueVector(); //数据 auto panel = seekChildByNameWithRetType<Widget*>(_generalBookLayer,"Panel_3"); //上图中的每一行的基础容器 auto item = seekChildByNameWithRetType<Widget*>(_generalBookLayer,"item"); //每一个元素 item->removeFromParent(); //清除ccs中原有的item和_listview中的元素,(美术资源中没有的就对应着不用写了) _listView->removeAllItems(); int iconNumber = 0; for (int i = 0; i < 7;i++) //总共40个,每行6个,所以要7行 { auto panelClone = panel->clone(); //克隆要从外层到里层,首先克隆外层的基础容器 _listView->pushBackCustomItem(panelClone);//克隆体放入列表容器里 for (int j = 0; j < 6; j++) //每一个基础容器中 { if (iconNumber < 40) { auto itemClone = item->clone(); //克隆每一个元素 itemClone->setPosition(item->getPosition() + Vec2((22 + itemClone->getContentSize().width) * j,0)); panelClone->addChild(itemClone); //元素的克隆体放入基础容器里
auto name = seekChildByNameWithRetType<ui::Text*>(itemClone,"nameText"); //这里开始往每个元素添加自己的信息了,注意不要放 在for外面,假如防外面,只是给第一个赋值。 name->setString(_allGeneralData.at(iconNumber).asValueMap()["name"].asString()); iconNumber++; } }
}同理,假如要做成一排一个元素,从上往下,则去掉一个for循环即可。
假如要求点击每一个元素有弹窗时,则在里面的for中加入itemClone->addTouchEventListener即可..
第一种方法:
再做一个Node类型的子图。
int i = 0,j = 0; for (auto iter = _allGeneralData.begin(); iter != _allGeneralData.end(); iter++) { if (i >= 6) //每行6个 { i = 0; j++; } auto iconCSBNode = CSLoader::getInstance()->createNodeWithFlatBuffersFile("GeneralIcon.csb"); //Node子图 auto iconWidget = iconCSBNode->getChildByName<ui::Widget*>("BackWidget"); iconWidget->removeFromParent(); iconWidget->setPosition(Vec2(300 * i + 150,scrollInnerH - j * 320 - 950)); //这个坐标要仔细点设置 this->addChild(iconWidget); iconWidget->addTouchEventListener(CC_CALLBACK_2(GeneralBook::selectIcon,this));//每一个元素添加触摸相应事件
i++;
}