cocos2dx中的ScrollView

Posted 2020-08-21 长空小鹰

ScrollView由视窗区域（裁剪区域）和内容区域组成，内容区域叫innerContainer。

视窗区域范围：get/setContentSize

内容区域：get/setInnerContainerSize,

ScrollView怎样排版？对ScrollView而言，innerContainer就是一个大矩形，这个矩形的范围就是滚动的范围，如果内容宽大于视窗 innerContainer则可以在x向移动。同理决定是否可在y向移动。

移动范围是多少？移动范围是0对应innerContainer的上（左）边缘位于视窗区域的上（左）边缘，1对应innerContainer的下（右）边缘位于视窗区域的下（右）边缘。

ScrollView中的物体怎样定位？0,0点是innerContainer的anchor点，不经过设置的话是在其中心。

 

因此，正确的ScrollView中的内容填充是这样的：

1 计算好内容的大小（宽高）

2 对内容进行排布，anchor为(0.5, 0.5)时，在(-0.5大小,0.5大小)的范围内排布。

3 排布完成，调用scrollView->setInnerContainerSize将内容大小设置进去。

 

ScrollView中的按钮不触发点击事件的方法：

1 设置isSwallowTouch(false)，否则在按钮上拖动不会拖动ScrollView。

2 设置点击事件不要用addClickHandler，而是addTouchEventListener，用lambda表达式这么写：

bool moved = false;
btn->addTouchEventListener([this, moved](Ref*, Widget::TouchEventType type) mutable {
            switch(type)
            {
                case Widget::TouchEventType::BEGAN:
                    moved = false;
                    break;
                case Widget::TouchEventType::MOVED:
                    moved = true;
                    break;
                case Widget::TouchEventType::ENDED:
                    if(!moved)
                        this->onClick();
                    break;
                default:
                    break;
            }
});