Cocos2d-x 页面切换（PageView）与弹窗（Modal）详解

引言

技术背景

Cocos2d-x UI系统架构

graph TD
    A[Cocos2d-x核心] --> B[Node]
    B --> C[Widget]
    C --> D[Layout]
    D --> E[ScrollView]
    E --> F[PageView]
    C --> G[PopupDialog]
    G --> H[ModalLayer]

PageView与Modal技术栈

关键类与接口

应用使用场景

1. 引导页系统：
   • 应用首次启动展示
   • 多页面滑动介绍功能
   • 跳过按钮和页面指示器
2. 图集浏览器：
   • 相册图片浏览
   • 左右滑动切换图片
   • 缩放查看细节
3. 设置面板：
   • 弹出式设置菜单
   • 半透明遮罩层
   • 选项切换与确认
4. 游戏商店：
   • 商品横向分页展示
   • 分类标签切换
   • 详情弹窗查看
5. 教程系统：
   • 分步骤教学指引
   • 下一步/上一步导航
   • 完成提示弹窗

不同场景下详细代码实现

场景1：基础PageView实现

// PageViewDemo.cpp
#include "ui/CocosGUI.h"
using namespace cocos2d::ui;

bool PageViewDemo::init() {
    if (!Scene::init()) {
        return false;
    }
    
    auto winSize = Director::getInstance()->getWinSize();
    
    // 创建PageView容器
    auto pageView = PageView::create();
    pageView->setContentSize(Size(winSize.width, winSize.height));
    pageView->setPosition(Vec2::ZERO);
    pageView->addEventListener([this](Ref* sender, PageView::EventType type) {
        if (type == PageView::EventType::TURNING) {
            auto pv = dynamic_cast<PageView*>(sender);
            int page = pv->getCurrentPageIndex();
            log("切换到页面: %d", page);
        }
    });
    this->addChild(pageView);
    
    // 添加多个页面
    for (int i = 0; i < 3; ++i) {
        auto layout = Layout::create();
        layout->setContentSize(Size(winSize.width, winSize.height));
        
        // 页面背景色
        auto colorBg = LayerColor::create(Color4B(100 + i*50, 150, 200, 255));
        colorBg->setContentSize(Size(winSize.width, winSize.height));
        layout->addChild(colorBg);
        
        // 页面内容
        auto label = Label::createWithSystemFont(
            StringUtils::format("页面 %d", i+1), 
            "Arial", 40
        );
        label->setTextColor(Color4B::WHITE);
        label->setPosition(Vec2(winSize.width/2, winSize.height/2));
        layout->addChild(label);
        
        pageView->addPage(layout);
    }
    
    return true;
}

场景2：带指示器的PageView

// PageViewWithIndicator.cpp
#include "ui/CocosGUI.h"
using namespace cocos2d::ui;

bool PageViewWithIndicator::init() {
    if (!Scene::init()) {
        return false;
    }
    
    auto winSize = Director::getInstance()->getWinSize();
    
    // 创建PageView
    auto pageView = PageView::create();
    pageView->setContentSize(Size(winSize.width, winSize.height * 0.8f));
    pageView->setPosition(Vec2(0, winSize.height * 0.1f));
    pageView->addEventListener([&](Ref*, PageView::EventType type) {
        if (type == PageView::EventType::TURNING) {
            updateIndicator(pageView->getCurrentPageIndex());
        }
    });
    this->addChild(pageView);
    
    // 创建指示器容器
    auto indicator = PageViewIndicator::create();
    indicator->setPosition(Vec2(winSize.width/2, 30));
    this->addChild(indicator);
    
    // 添加页面
    for (int i = 0; i < 4; ++i) {
        auto layout = Layout::create();
        layout->setContentSize(pageView->getContentSize());
        
        // 页面内容
        auto sprite = Sprite::create("page_bg.png");
        sprite->setPosition(Vec2(winSize.width/2, winSize.height/2));
        sprite->setScale(0.8f);
        layout->addChild(sprite);
        
        auto label = Label::createWithTTF(
            StringUtils::format("第%d页", i+1),
            "fonts/Marker Felt.ttf", 48
        );
        label->setTextColor(Color4B::WHITE);
        label->setPosition(Vec2(winSize.width/2, winSize.height/2));
        layout->addChild(label);
        
        pageView->addPage(layout);
    }
    
    // 初始化指示器
    indicator->setPageView(pageView);
    indicator->setupCustomIndicator(4, "dot_normal.png", "dot_selected.png", 20);
    indicator->setIndicatorPosition(Vec2(winSize.width/2, 30));
    
    return true;
}

void PageViewWithIndicator::updateIndicator(int index) {
    // 实际项目中应使用成员变量存储指示器引用
    // indicator->setCurrentIndex(index);
}

场景3：模态弹窗实现

// ModalDialog.cpp
class ModalDialog : public Layer {
public:
    static ModalDialog* create(const std::string& title, const std::string& content) {
        auto dialog = new (std::nothrow) ModalDialog();
        if (dialog && dialog->init(title, content)) {
            dialog->autorelease();
            return dialog;
        }
        CC_SAFE_DELETE(dialog);
        return nullptr;
    }
    
    bool init(const std::string& title, const std::string& content) {
        if (!Layer::init()) {
            return false;
        }
        
        auto winSize = Director::getInstance()->getWinSize();
        
        // 半透明背景
        auto bg = LayerColor::create(Color4B(0, 0, 0, 180));
        bg->setContentSize(winSize);
        bg->setPosition(Vec2::ZERO);
        this->addChild(bg);
        
        // 对话框主体
        auto dialogBg = LayerColor::create(Color4B(255, 255, 255, 255));
        dialogBg->setContentSize(Size(400, 300));
        dialogBg->setPosition(Vec2((winSize.width-400)/2, (winSize.height-300)/2));
        this->addChild(dialogBg);
        
        // 标题
        auto titleLabel = Label::createWithSystemFont(title, "Arial", 32);
        titleLabel->setTextColor(Color4B::BLACK);
        titleLabel->setPosition(Vec2(200, 250));
        dialogBg->addChild(titleLabel);
        
        // 内容
        auto contentLabel = Label::createWithSystemFont(content, "Arial", 24);
        contentLabel->setTextColor(Color4B(80, 80, 80, 255));
        contentLabel->setPosition(Vec2(200, 180));
        contentLabel->setDimensions(350, 120);
        dialogBg->addChild(contentLabel);
        
        // 确定按钮
        auto confirmBtn = Button::create("button_normal.png", "button_pressed.png");
        confirmBtn->setTitleText("确定");
        confirmBtn->setTitleFontSize(24);
        confirmBtn->setPosition(Vec2(120, 50));
        confirmBtn->addClickEventListener([this](Ref*) {
            if (onConfirm) onConfirm();
            this->removeFromParentAndCleanup(true);
        });
        dialogBg->addChild(confirmBtn);
        
        // 取消按钮
        auto cancelBtn = Button::create("button_normal.png", "button_pressed.png");
        cancelBtn->setTitleText("取消");
        cancelBtn->setTitleFontSize(24);
        cancelBtn->setPosition(Vec2(280, 50));
        cancelBtn->addClickEventListener([this](Ref*) {
            if (onCancel) onCancel();
            this->removeFromParentAndCleanup(true);
        });
        dialogBg->addChild(cancelBtn);
        
        // 触摸事件屏蔽
        auto listener = EventListenerTouchOneByOne::create();
        listener->setSwallowTouches(true);
        listener->onTouchBegan = [](Touch*, Event*) { return true; };
        _eventDispatcher->addEventListenerWithSceneGraphPriority(listener, this);
        
        return true;
    }
    
    void setOnConfirmCallback(const std::function<void()>& callback) {
        onConfirm = callback;
    }
    
    void setOnCancelCallback(const std::function<void()>& callback) {
        onCancel = callback;
    }

private:
    std::function<void()> onConfirm;
    std::function<void()> onCancel;
};

// 使用示例
void showModalExample() {
    auto dialog = ModalDialog::create("提示", "确定要删除这个文件吗？");
    dialog->setOnConfirmCallback([]() {
        log("用户点击了确定");
        // 执行删除操作
    });
    dialog->setOnCancelCallback([]() {
        log("用户点击了取消");
    });
    Director::getInstance()->getRunningScene()->addChild(dialog);
}

场景4：PageView与弹窗结合

// PageViewWithModal.cpp
#include "ui/CocosGUI.h"
using namespace cocos2d::ui;

class PageViewWithModal : public Scene {
public:
    CREATE_FUNC(PageViewWithModal);
    
    bool init() override {
        if (!Scene::init()) {
            return false;
        }
        
        auto winSize = Director::getInstance()->getWinSize();
        
        // 创建PageView
        pageView = PageView::create();
        pageView->setContentSize(Size(winSize.width, winSize.height));
        pageView->setPosition(Vec2::ZERO);
        pageView->addEventListener(CC_CALLBACK_2(PageViewWithModal::pageTurningEvent, this));
        this->addChild(pageView);
        
        // 添加页面
        for (int i = 0; i < 3; ++i) {
            auto layout = Layout::create();
            layout->setContentSize(pageView->getContentSize());
            
            // 页面背景
            auto color = LayerColor::create(Color4B(70 + i*30, 130, 180, 255));
            color->setContentSize(pageView->getContentSize());
            layout->addChild(color);
            
            // 页面内容
            auto label = Label::createWithSystemFont(
                StringUtils::format("页面 %d", i+1), 
                "Arial", 48
            );
            label->setTextColor(Color4B::WHITE);
            label->setPosition(Vec2(winSize.width/2, winSize.height/2));
            layout->addChild(label);
            
            // 添加按钮
            auto button = Button::create("button.png", "button_pressed.png");
            button->setTitleText("打开弹窗");
            button->setTitleFontSize(24);
            button->setPosition(Vec2(winSize.width/2, winSize.height/2 - 80));
            button->addClickEventListener([this, i](Ref*) {
                showModal(i);
            });
            layout->addChild(button);
            
            pageView->addPage(layout);
        }
        
        return true;
    }

private:
    PageView* pageView;
    
    void pageTurningEvent(Ref* sender, PageView::EventType type) {
        if (type == PageView::EventType::TURNING) {
            auto pv = dynamic_cast<PageView*>(sender);
            log("当前页面索引: %zd", pv->getCurrentPageIndex());
        }
    }
    
    void showModal(int pageIndex) {
        auto modal = ModalDialog::create(
            "页面操作", 
            StringUtils::format("这是页面 %d 的操作菜单", pageIndex+1)
        );
        
        modal->setOnConfirmCallback([this, pageIndex]() {
            log("页面 %d 的确定操作", pageIndex+1);
            // 执行特定于页面的操作
        });
        
        this->addChild(modal);
    }
};

原理解释

PageView工作原理

1. 触摸检测：
   • 通过触摸事件判断滑动方向和距离
   • 计算滑动速度和加速度
2. 页面切换逻辑：
   • 当滑动超过阈值时触发翻页
   • 使用插值动画平滑过渡
   • 边界弹性效果处理
3. 页面缓存：
   • 只渲染当前和相邻页面
   • 减少内存占用提高性能

模态弹窗实现原理

1. 触摸拦截：
   • 捕获所有触摸事件并吞噬
   • 阻止下层UI响应触摸
2. 层级管理：
   • 添加到当前场景最上层
   • 高于所有其他UI元素
3. 动画效果：
   • 淡入淡出透明度变化
   • 缩放弹出动画
   • 缓动函数增强视觉效果

事件传播机制

sequenceDiagram
    participant User as 用户触摸
    participant Modal as 模态层
    participant PageView as 页面容器
    participant Page as 页面内容
    
    User->>Modal: 触摸事件
    Modal->>Modal: 拦截并处理事件
    Modal->>User: 消费事件(不传播)
    
    User->>PageView: 触摸事件(非模态区域)
    PageView->>Page: 传递事件
    Page->>PageView: 处理事件并可能翻页

核心特性

1. PageView核心特性：
   • 平滑的页面滑动过渡
   • 自动页面吸附效果
   • 页面切换事件回调
   • 自定义页面指示器
   • 循环滚动支持
2. Modal核心特性：
   • 半透明遮罩层
   • 触摸事件屏蔽
   • 多种动画效果
   • 回调函数支持
   • 自定义内容布局
3. 组合应用特性：
   • 页面内弹窗触发
   • 跨页面状态保持
   • 弹窗与页面生命周期管理
   • 多弹窗层级管理

原理流程图及解释

PageView工作流程

graph TD
    A[用户触摸开始] --> B[记录起始位置]
    B --> C[触摸移动]
    C --> D{滑动距离 > 阈值?}
    D -- 是 --> E[开始翻页动画]
    D -- 否 --> C
    E --> F[计算目标页面]
    F --> G[应用滑动动画]
    G --> H[到达目标页面]
    H --> I[触发TURNING事件]
    I --> J[更新页面指示器]

模态弹窗工作流程

graph TD
    A[触发弹窗显示] --> B[创建弹窗实例]
    B --> C[添加到场景顶层]
    C --> D[播放进入动画]
    D --> E[显示弹窗内容]
    E --> F{用户操作}
    F -- 确认 --> G[执行确认回调]
    F -- 取消 --> H[执行取消回调]
    F -- 关闭 --> I[播放退出动画]
    G --> I
    H --> I
    I --> J[移除弹窗实例]

环境准备

开发环境要求

• 操作系统：Windows 10/macOS/Linux
• 开发工具：Visual Studio 2019+/Xcode 12+/Android Studio
• Cocos2d-x版本：v3.17+ 或 v4.0+
• 编程语言：C++11/JavaScript/Lua

项目配置步骤

1. 下载Cocos2d-x引擎
2. 创建新项目：cocos new MyProject -p com.yourcompany.game -l cpp
3. 添加UI扩展库（如需要）：

   # CMakeLists.txt
   add_subdirectory(${COCOS2DX_ROOT_PATH}/cocos/ui ${ENGINE_BINARY_PATH}/cocos/ui)

4. 配置资源路径（resources目录）
5. 添加按钮、背景等资源图片

依赖项配置

// package.json (Cocos Creator)
{
  "dependencies": {
    "cc": "2.4.0",
    "cocos2d-ui": "3.10.0"
  }
}

实际详细应用代码示例实现

完整PageView实现（带指示器）

// CompletePageView.h
#pragma once
#include "cocos2d.h"
#include "ui/CocosGUI.h"

USING_NS_CC;
using namespace ui;

class CompletePageView : public Scene {
public:
    static Scene* createScene();
    virtual bool init() override;
    CREATE_FUNC(CompletePageView);
    
private:
    PageView* pageView;
    PageViewIndicator* indicator;
    
    void setupUI();
    void pageChangedEvent(Ref* sender, PageView::EventType type);
    void updateIndicator(int index);
};

// CompletePageView.cpp
#include "CompletePageView.h"

Scene* CompletePageView::createScene() {
    return CompletePageView::create();
}

bool CompletePageView::init() {
    if (!Scene::init()) {
        return false;
    }
    
    setupUI();
    return true;
}

void CompletePageView::setupUI() {
    auto winSize = Director::getInstance()->getWinSize();
    
    // 创建PageView
    pageView = PageView::create();
    pageView->setContentSize(Size(winSize.width, winSize.height * 0.85f));
    pageView->setPosition(Vec2(0, winSize.height * 0.075f));
    pageView->addEventListener(CC_CALLBACK_2(CompletePageView::pageChangedEvent, this));
    this->addChild(pageView);
    
    // 创建指示器
    indicator = PageViewIndicator::create();
    indicator->setPosition(Vec2(winSize.width/2, 30));
    this->addChild(indicator);
    
    // 添加页面
    std::vector<std::string> colors = {"page1.jpg", "page2.jpg", "page3.jpg"};
    for (int i = 0; i < 3; ++i) {
        auto layout = Layout::create();
        layout->setContentSize(pageView->getContentSize());
        
        // 背景图
        auto bg = Sprite::create(colors[i]);
        bg->setPosition(Vec2(winSize.width/2, winSize.height/2));
        bg->setScale(0.9f);
        layout->addChild(bg);
        
        // 文字
        auto label = Label::createWithTTF(
            StringUtils::format("页面 %d", i+1),
            "fonts/Marker Felt.ttf", 48
        );
        label->setTextColor(Color4B::WHITE);
        label->setPosition(Vec2(winSize.width/2, 100));
        layout->addChild(label);
        
        pageView->addPage(layout);
    }
    
    // 配置指示器
    indicator->setPageView(pageView);
    indicator->setupCustomIndicator(3, "indicator_dot.png", "indicator_dot_active.png", 20);
}

void CompletePageView::pageChangedEvent(Ref* sender, PageView::EventType type) {
    if (type == PageView::EventType::TURNING) {
        int page = pageView->getCurrentPageIndex();
        updateIndicator(page);
    }
}

void CompletePageView::updateIndicator(int index) {
    indicator->setCurrentIndex(index);
}

完整模态弹窗实现

// CustomModal.h
#pragma once
#include "cocos2d.h"
#include "ui/CocosGUI.h"

USING_NS_CC;
using namespace ui;

class CustomModal : public Layer {
public:
    enum class Style {
        ALERT,      // 警告框
        CONFIRM,    // 确认框
        INPUT       // 输入框
    };
    
    static CustomModal* create(Style style, const std::string& title, 
                              const std::string& message);
    
    bool initWithStyle(Style style, const std::string& title, 
                      const std::string& message);
    
    void setConfirmCallback(const std::function<void()>& callback);
    void setCancelCallback(const std::function<void()>& callback);
    void setInputCallback(const std::function<void(const std::string&)>& callback);
    
private:
    Style _style;
    std::function<void()> _confirmCallback;
    std::function<void()> _cancelCallback;
    std::function<void(const std::string&)> _inputCallback;
    
    TextField* _inputField;
};

// CustomModal.cpp
#include "CustomModal.h"

CustomModal* CustomModal::create(Style style, const std::string& title, 
                                const std::string& message) {
    auto modal = new (std::nothrow) CustomModal();
    if (modal && modal->initWithStyle(style, title, message)) {
        modal->autorelease();
        return modal;
    }
    CC_SAFE_DELETE(modal);
    return nullptr;
}

bool CustomModal::initWithStyle(Style style, const std::string& title, 
                               const std::string& message) {
    if (!Layer::init()) {
        return false;
    }
    
    _style = style;
    auto winSize = Director::getInstance()->getWinSize();
    
    // 半透明背景
    auto bgOverlay = LayerColor::create(Color4B(0, 0, 0, 180));
    bgOverlay->setContentSize(winSize);
    bgOverlay->setPosition(Vec2::ZERO);
    this->addChild(bgOverlay);
    
    // 对话框背景
    auto dialogSize = Size(400, 300);
    if (style == Style::INPUT) {
        dialogSize.height = 350;
    }
    
    auto dialogBg = LayerColor::create(Color4B(255, 255, 255, 255));
    dialogBg->setContentSize(dialogSize);
    dialogBg->setPosition(Vec2((winSize.width - dialogSize.width)/2, 
                              (winSize.height - dialogSize.height)/2));
    this->addChild(dialogBg);
    
    // 标题
    auto titleLabel = Label::createWithSystemFont(title, "Arial", 32);
    titleLabel->setTextColor(Color4B::BLACK);
    titleLabel->setPosition(Vec2(dialogSize.width/2, dialogSize.height - 50));
    dialogBg->addChild(titleLabel);
    
    // 消息内容
    auto msgLabel = Label::createWithSystemFont(message, "Arial", 24);
    msgLabel->setTextColor(Color4B(80, 80, 80, 255));
    msgLabel->setPosition(Vec2(dialogSize.width/2, dialogSize.height - 100));
    msgLabel->setDimensions(dialogSize.width - 40, 100);
    dialogBg->addChild(msgLabel);
    
    // 输入字段（仅INPUT样式）
    if (style == Style::INPUT) {
        _inputField = TextField::create("", "Arial", 24);
        _inputField->setPlaceHolder("请输入内容...");
        _inputField->setPosition(Vec2(dialogSize.width/2, dialogSize.height - 180));
        _inputField->setContentSize(Size(300, 40));
        dialogBg->addChild(_inputField);
    }
    
    // 按钮布局
    float btnY = 40;
    if (style == Style::INPUT) {
        btnY = 90;
    }
    
    if (style == Style::ALERT) {
        // 单按钮（确定）
        auto okBtn = Button::create("button_ok.png");
        okBtn->setTitleText("确定");
        okBtn->setTitleFontSize(24);
        okBtn->setPosition(Vec2(dialogSize.width/2, btnY));
        okBtn->addClickEventListener([this](Ref*) {
            if (_confirmCallback) _confirmCallback();
            this->removeFromParentAndCleanup(true);
        });
        dialogBg->addChild(okBtn);
    } 
    else {
        // 双按钮（取消/确定）
        auto cancelBtn = Button::create("button_cancel.png");
        cancelBtn->setTitleText("取消");
        cancelBtn->setTitleFontSize(24);
        cancelBtn->setPosition(Vec2(dialogSize.width/2 - 80, btnY));
        cancelBtn->addClickEventListener([this](Ref*) {
            if (_cancelCallback) _cancelCallback();
            this->removeFromParentAndCleanup(true);
        });
        dialogBg->addChild(cancelBtn);
        
        auto okBtn = Button::create("button_ok.png");
        okBtn->setTitleText("确定");
        okBtn->setTitleFontSize(24);
        okBtn->setPosition(Vec2(dialogSize.width/2 + 80, btnY));
        okBtn->addClickEventListener([this]() {
            if (_style == Style::INPUT && _inputCallback) {
                _inputCallback(_inputField->getString());
            } else if (_confirmCallback) {
                _confirmCallback();
            }
            this->removeFromParentAndCleanup(true);
        });
        dialogBg->addChild(okBtn);
    }
    
    // 触摸屏蔽
    auto listener = EventListenerTouchOneByOne::create();
    listener->setSwallowTouches(true);
    listener->onTouchBegan = [](Touch*, Event*) { return true; };
    _eventDispatcher->addEventListenerWithSceneGraphPriority(listener, this);
    
    // 入场动画
    dialogBg->setScale(0.8f);
    dialogBg->runAction(ScaleTo::create(0.3f, 1.0f));
    
    return true;
}

void CustomModal::setConfirmCallback(const std::function<void()>& callback) {
    _confirmCallback = callback;
}

void CustomModal::setCancelCallback(const std::function<void()>& callback) {
    _cancelCallback = callback;
}

void CustomModal::setInputCallback(const std::function<void(const std::string&)>& callback) {
    _inputCallback = callback;
}

运行结果

PageView运行效果

+-------------------------------+
|                               |
|          [页面1内容]           |
|                               |
|          [页面1内容]           |
|                               |
|   [页面指示器: ●○○]            |
+-------------------------------+

（用户向右滑动）

+-------------------------------+
|                               |
|          [页面2内容]           |
|                               |
|          [页面2内容]           |
|                               |
|   [页面指示器: ○●○]            |
+-------------------------------+

模态弹窗运行效果

+-------------------------------+
|                               |
|   +-----------------------+   |
|   |        对话框         |   |
|   |                       |   |
|   |       标题             |   |
|   |                       |   |
|   |       消息内容...       |   |
|   |                       |   |
|   |   [确定]    [取消]     |   |
|   +-----------------------+   |
|                               |
+-------------------------------+
（背景变暗，触摸被屏蔽）

测试步骤以及详细代码

测试用例1：PageView基本功能

// PageViewTest.cpp
#include "cocos2d.h"
#include "ui/CocosGUI.h"
#include "gtest/gtest.h"

USING_NS_CC;
using namespace ui;

TEST(PageViewTest, BasicFunctionality) {
    auto director = Director::getInstance();
    auto scene = Scene::create();
    director->runWithScene(scene);
    
    auto pageView = PageView::create();
    pageView->setContentSize(Size(480, 320));
    scene->addChild(pageView);
    
    // 添加3个页面
    for (int i = 0; i < 3; ++i) {
        auto layout = Layout::create();
        layout->setContentSize(pageView->getContentSize());
        pageView->addPage(layout);
    }
    
    // 验证页面数量
    ASSERT_EQ(pageView->getPages().size(), 3);
    
    // 切换到第二页
    pageView->scrollToPage(1);
    ASSERT_EQ(pageView->getCurrentPageIndex(), 1);
    
    // 向前滚动
    pageView->scrollToItem(2);
    ASSERT_EQ(pageView->getCurrentPageIndex(), 2);
    
    // 向后滚动
    pageView->scrollToItem(0);
    ASSERT_EQ(pageView->getCurrentPageIndex(), 0);
}

测试用例2：模态弹窗交互

// ModalTest.cpp
#include "cocos2d.h"
#include "CustomModal.h"
#include "gtest/gtest.h"

USING_NS_CC;

TEST(ModalTest, ConfirmCallback) {
    auto director = Director::getInstance();
    auto scene = Scene::create();
    director->runWithScene(scene);
    
    bool confirmCalled = false;
    auto modal = CustomModal::create(CustomModal::Style::CONFIRM, 
                                    "测试标题", "测试消息");
    modal->setConfirmCallback([&]() {
        confirmCalled = true;
    });
    scene->addChild(modal);
    
    // 模拟点击确定按钮
    // 实际测试中需要获取按钮并触发回调
    // modal->getOkButton()->callClickHandler();
    
    // 简化处理：直接调用回调
    modal->setConfirmCallback([&]() {
        confirmCalled = true;
    });
    modal->getOkButton()->callClickHandler();
    
    ASSERT_TRUE(confirmCalled);
}

测试用例3：PageView与弹窗组合

// CombinedTest.cpp
#include "cocos2d.h"
#include "CompletePageView.h"
#include "CustomModal.h"
#include "gtest/gtest.h"

USING_NS_CC;

TEST(CombinedTest, PageWithModal) {
    auto director = Director::getInstance();
    auto scene = CompletePageView::createScene();
    director->runWithScene(scene);
    
    auto pageView = dynamic_cast<CompletePageView*>(scene)->getPageView();
    
    // 切换到第一页
    pageView->scrollToPage(0);
    
    // 模拟点击按钮打开弹窗
    // 实际测试中需要获取按钮并触发
    bool modalShown = false;
    auto modal = CustomModal::create(CustomModal::Style::ALERT, 
                                    "页面1", "来自页面1的消息");
    modal->setConfirmCallback([&]() {
        modalShown = true;
    });
    scene->addChild(modal);
    
    // 简化处理：直接调用回调
    modal->setConfirmCallback([&]() {
        modalShown = true;
    });
    modal->getOkButton()->callClickHandler();
    
    ASSERT_TRUE(modalShown);
}

部署场景

1. 移动游戏：
   • 游戏关卡选择界面
   • 角色装备展示
   • 设置与帮助页面
2. 教育应用：
   • 电子书阅读器
   • 互动课程页面
   • 测验与评估
3. 企业应用：
   • 产品展示目录
   • 培训材料浏览
   • 数据报告查看
4. 多媒体应用：
   • 图片画廊
   • 音乐专辑浏览
   • 视频集锦
5. 电商应用：
   • 商品分类浏览
   • 促销活动展示
   • 用户评价查看

疑难解答

问题1：PageView滑动卡顿

• 页面内容过于复杂
• 未启用硬件加速
• 内存不足导致GC频繁

// 优化页面内容
void optimizePage(Node* page) {
    // 简化复杂图形
    for (auto child : page->getChildren()) {
        if (dynamic_cast<Sprite*>(child)) {
            auto sprite = static_cast<Sprite*>(child);
            sprite->getTexture()->setAntiAliasTexParameters();
        }
    }
    
    // 预加载纹理
    SpriteFrameCache::getInstance()->addSpriteFramesWithFile("ui.plist");
    
    // 减少动态创建
    static Vector<Node*> reusableNodes;
    if (reusableNodes.empty()) {
        // 创建可重用节点池
    }
}

// 启用硬件加速
void enableHardwareAcceleration() {
    auto glview = Director::getInstance()->getOpenGLView();
    glview->setDesignResolutionSize(960, 640, ResolutionPolicy::SHOW_ALL);
    glview->setFrameSize(960, 640);
}

问题2：模态弹窗穿透点击

• 触摸事件未正确吞噬
• 事件监听器优先级问题
• 弹窗未覆盖整个屏幕

// 增强触摸屏蔽
void ModalLayer::enableTouchShield() {
    auto listener = EventListenerTouchOneByOne::create();
    listener->setSwallowTouches(true);
    
    listener->onTouchBegan = [](Touch* touch, Event* event) {
        return true; // 吞噬所有触摸事件
    };
    
    // 设置最高优先级
    _eventDispatcher->addEventListenerWithSceneGraphPriority(listener, this);
    
    // 确保弹窗覆盖整个屏幕
    auto winSize = Director::getInstance()->getWinSize();
    this->setContentSize(winSize);
    this->setPosition(0, 0);
}

问题3：页面指示器不同步

• 页面切换事件处理延迟
• 动画过程中状态更新
• 页面索引计算错误

// 精确同步指示器
void PageViewWithIndicator::syncIndicator() {
    int currentPage = pageView->getCurrentPageIndex();
    float scrollPos = pageView->getScrollOffset().x;
    float pageWidth = pageView->getContentSize().width;
    
    // 考虑边界情况
    if (scrollPos < 0) {
        // 左边界弹性效果
        indicator->setCurrentIndex(0);
    } else if (scrollPos > pageWidth * (pageView->getPages().size() - 1)) {
        // 右边界弹性效果
        indicator->setCurrentIndex(pageView->getPages().size() - 1);
    } else {
        // 计算当前页面
        int page = static_cast<int>(scrollPos / pageWidth + 0.5f);
        indicator->setCurrentIndex(page);
    }
}

// 在update中定期同步
void PageViewWithIndicator::update(float dt) {
    syncIndicator();
}

未来展望

1. 3D页面过渡：
   • 3D旋转翻页效果
   • 立体书页翻动
   • 视差滚动效果
2. AI驱动交互：
   • 手势识别增强
   • 语音控制页面切换
   • 眼动追踪翻页
3. 跨平台一致性：
   • 统一各平台交互体验
   • 自适应不同屏幕尺寸
   • 无障碍访问支持
4. 动态内容加载：
   • 按需加载页面资源
   • 后台预加载相邻页面
   • 流式内容传输
5. 可视化编辑器：
   • 拖拽式页面设计
   • 实时预览效果
   • 自动生成代码

技术趋势与挑战

趋势

1. 声明式UI：
   • XML/JSON定义界面
   • 数据绑定自动更新
   • 可视化布局编辑器
2. 响应式设计：
   • 自适应各种屏幕尺寸
   • 动态布局调整
   • 设备特性适配
3. 交互动画增强：
   • 物理引擎驱动动画
   • 粒子效果集成
   • 复杂缓动函数
4. 性能优化：
   • GPU加速渲染
   • 多线程布局计算
   • 内存高效管理

挑战

1. 多分辨率适配：
   • 不同屏幕密度处理
   • 异形屏适配
   • 折叠屏支持
2. 输入方式多样化：
   • 触控笔支持
   • 手势识别精度
   • 外接设备兼容
3. 电池续航优化：
   • 渲染效率提升
   • 后台资源释放
   • 智能休眠策略
4. 安全与隐私：
   • 敏感内容保护
   • 权限最小化
   • 数据加密传输

总结

1. 技术实现：
   • PageView的页面管理、滑动检测和动画实现
   • Modal的触摸拦截、遮罩层和动画效果
   • 两者的组合应用与状态同步
2. 核心功能：
   • 流畅的页面切换体验
   • 多样化的弹窗类型
   • 丰富的交互反馈
   • 灵活的事件回调机制
3. 最佳实践：
   • 性能优化策略
   • 内存管理技巧
   • 异常处理方案
   • 跨平台适配方法
4. 应用场景：
   • 游戏UI界面
   • 教育应用
   • 企业展示系统
   • 多媒体浏览器