[]这样的panel请问如何实现比较好？

实现步骤：
1、定义一个Item,界面分两层（可用两个Sprite进行划分)
class Item extends ui.itemUI {
private state = 0;
constructor() {
super();
//点击最先出来的按钮，会显示下一层界面,同时隐藏自己
this.btnFirst.on(Laya.Event.CLICK, this, this.change, [0]);
//点击上面一层的按钮，会隐藏该层，同时显示上一层
this.btnChange.on(Laya.Event.CLICK, this, this.change, [1]);
//初始时默认上面一层不可见
this.layoutSecond.visible = false;
}
//点击切换状态
private change(state: number, e: Laya.Event) {
e.stopPropagation();
this.state = state;
this.layoutSecond.visible = (state === 0);
this.btnFirst.visible = (state !== 0); 
}
}
 
2.定义一个界面，界面上放一个Panel(因为要滑动)
class TextUI extends ui.TestUI {
constructor() {
super();
//设置可滚动
this.container.vScrollBarSkin = '';
this.init();
}
private init() {
for (var i = 0; i < 10; i++) {
var item = new Item();
item.pos(0, i * (item.height + 1));
this.container.addChild(item);
}
}
}
 
3,加载资源，完成后再加载界面
import WebGL = Laya.WebGL;
// 程序入口
class GameMain {
constructor() {
Laya.init(500, 1000, WebGL);
Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_WIDTH;
var resPath = ['res/atlas/comp.atlas'];
Laya.loader.load(resPath, new Laya.Handler(this, function () {
var textUi = new TextUI();
Laya.stage.addChild(textUi);
}), null, Laya.Loader.ATLAS); 
}
}
new GameMain();
 

感觉很简单，不知道难点在哪里
点击后改变状态，重新布局就行