Cocos Studio v3.x ListView에 PanelNode를 동적으로 추가해보기

Cococs Studio에서 ListView를 설정한 BaseNode와 파트 부분이 되는 PasrtNode를 작성.
ListView에 PasrtNode를 추가해 가고, 빨리 GridView적인 것을 만드는 비망록.

Cocos Studio 측의 작업은 할애.

만들고 싶은 것

한 줄에 3 개의 버튼

스크롤하고 싶다

완성 이미지↓

구현

Main.cpp

//BaseNodeを読み込む
auto baseNode = CSLoader::createNode("BaseNode.csb");
baseNode->setPosition(Vec2(origin.x + visibleSize.width/2, 0));

//ListViewを準備
auto listView = itemNode->getChildByName<ui::ListView*>("ItemList");

//PartsNodeを追加
for (int i = 0; i < 6 ; i++) {
    //Partsの読み込み
    auto listPartsNode = CSLoader::createNode("Parts.csb");

    //スクロールを有効化するためにPartsをLayoutとして取得
    auto panelLayout = listPartsNode->getChildByName<ui::Layout*>("Parts");
    //PartsNodeを一度削除
    listPartsNode->removeChild(panelLayout, true);

    //Parts内の要素を諸々設定
    auto item = utils::findChildren(*panelLayout, "//Button_0");
    auto itemBtn = (Button*)item.front();
    itemBtn->setTag(0);
    itemBtn->setOpacity(255);
    itemBtn->addTouchEventListener(this,toucheventselector(Main::onTouchButton));

    //PartsをListViewに追加
    listView->addChild(panelLayout);
}

addChild(itemNode);

「pushBackCustomItem」에서의 구현이라면 스크롤이 우단의 한정된 부분에서 밖에 할 수 없고,
또한 PartsNode 내에 설치하고 있는 버튼을 누르지 않아서 단념.
아마, 보통 명부라면 이것으로 문제 없었을 것입니다.

이번은 아무래도 그리드적으로 표시하고 싶었기 때문에(GridView의 방법을 모르고……),
이런 형태로 재현.

참고:
CocosStudio의 UIEditor로 만든 ListView 사용
[Cocos2dx] ui::ListView 비망록