UICheckBox 用法解析

最近在用此ui的时候各种方法不易理解，如 disable，active，setSelectedState，setBright，setBrightStyle

 

disable用法：设置UI（或子UI），取消 点亮？点击事件？干嘛的暂且不管

    void disable(bool containChildren = false)
    {
        setBright(false,containChildren);
        setTouchEnable(false,containChildren);
    };

setBright用法：由此可见此属性就是用来触发各种点击状态并重置、记录当前状态

void UIWidget::setBright(bool bright)
{
    m_bBright = bright;
    if (m_bBright)
    {
        m_eBrightStyle = BRIGHT_NONE;
        setBrightStyle(BRIGHT_NORMAL);
    }
    else
    {
        onPressStateChangedToDisabled();
    }
}

setBrightStyle用法：在当前style与默认不冲突的情况下触发点击操作

void UIWidget::setBrightStyle(BrightStyle style)
{
    if (m_eBrightStyle == style)
    {
        return;
    }
    m_eBrightStyle = style;
    switch (m_eBrightStyle)
    {
        case BRIGHT_NORMAL:
            onPressStateChangedToNormal();
            break;
        case BRIGHT_HIGHLIGHT:
            onPressStateChangedToPressed();
            break;
        default:
            break;
    }
}

on

void UICheckBox::onPressStateChangedToNormal()
{ // 默认底图显示
    m_pBackGroundBoxRenderer->setVisible(true);
    m_pBackGroundSelectedBoxRenderer->setVisible(false);
    m_pBackGroundBoxDisabledRenderer->setVisible(false);
    m_pFrontCrossDisabledRenderer->setVisible(false);
}

void UICheckBox::onPressStateChangedToPressed()
{ // 选中底图显示
    m_pBackGroundBoxRenderer->setVisible(false);
    m_pBackGroundSelectedBoxRenderer->setVisible(true);
    m_pBackGroundBoxDisabledRenderer->setVisible(false);
    m_pFrontCrossDisabledRenderer->setVisible(false);
}

void UICheckBox::onPressStateChangedToDisabled()
{ // 禁用底图且如果当前底图是选中状态，那么标示图禁用状态显示
    m_pBackGroundBoxRenderer->setVisible(false);
    m_pBackGroundSelectedBoxRenderer->setVisible(false);
    m_pBackGroundBoxDisabledRenderer->setVisible(true);
    m_pFrontCrossRenderer->setVisible(false);
    if (m_bIsSelected)
    {
        m_pFrontCrossDisabledRenderer->setVisible(true);
    }
}
void UICheckBox::setSelectedState(bool selected)
{// 如果当前图未选中的状态，设置标示图显示
    if (selected == m_bIsSelected)
    {
        return;
    }
    m_bIsSelected = selected;
    m_pFrontCrossRenderer->setVisible(m_bIsSelected);
}

 

看完各种用法再来看实例会更易理解

实现一个卡片的3种效果：锁定、解锁、选中

// 卡牌
UICheckBox* ka = dynamic_cast<UICheckBox*>(zhanShu->getWidgetByName("CheckBox_bg"));
// 选中按钮
UICheckBox* btn = dynamic_cast<UICheckBox*>(zhanShu->getWidgetByName("CheckBox_xuanzhong"));


if(data.isLocked) 
{  // 如果是锁住的状态
　　ka->disable(true); 
} 
else 
{ // 解锁的状态
　　ka->setBright(true, true); 
　　if(data.isSelected) 
　　{ // 选中的状态
    　　ka->setBrightStyle(BRIGHT_HIGHLIGHT); 
        btn->setBrightStyle(BRIGHT_HIGHLIGHT); 
　　} 
}

 

 错误：checkbox应该是2张图标叠加产生，背景图和选中标示图。通过标示图（对号）的显示和未显示来实现选中和为选中的效果。所以选中按钮应该是以标示图的形式存在，而此方法将选中状态作为单独的ui存在。

锁住状态：比较好设置，只要设置disable，并设置包含子元素。设置当前卡片及内部元素图标为禁用状态且不可点击即可

解锁：setTouchEnabled 不能开启，因为往往解锁操作需要触发请求操作，如果是tableview的cell，tableviewtouched去做就可以了，自身的点击操作不应该开启

未选中：setBright ，全部点亮即可

选中：需要额外设置选中效果，因为源生的方法没有提供接口

 

 注：此需求下chechbox并不是合适的选择，uiimage或者uibutton好像更合适