组合视图控件 (SComboView)¶

SOUI中的组合视图控件，结合了下拉列表和自定义视图的功能。可以在下拉框中显示自定义的视图内容，比如列表视图、树形视图等，支持灵活的数据展示和选择方式。

基本信息¶

类名：SComboView
控件标签：comboview
基类：SComboBase
功能：提供下拉式自定义视图选择功能

基本属性¶

属性名	类型	默认值	说明
dropWidth	int	-1	下拉框宽度
dropHeight	int	-	下拉框高度

使用示例¶

基础组合视图¶

<!-- 基础组合视图 -->
<comboview pos="10,10,200,40" name="combo_basic"
           dropWidth="300" dropHeight="400">
    <liststyle>
        <template itemHeight="30">
            <text pos="5,|-15" name="txt_name"/>
            <text pos="[5,|-15" name="txt_value"
                  colorText="#666666"/>
        </template>
    </liststyle>
</comboview>

自定义样式组合视图¶

<!-- 自定义样式组合视图 -->
<comboview pos="10,50,300,80" name="combo_custom"
           dropWidth="400" dropHeight="500">
    <editstyle inset="5,0,5,0" 
               colorBkgnd="#FFFFFF"
               colorText="#000000"/>
    <liststyle>
        <template itemHeight="60">
            <window>
                <img pos="5,5,55,55" name="img_icon"/>
                <text pos="65,10" name="txt_title"
                      font="bold:1"/>
                <text pos="65,35" name="txt_desc"
                      colorText="#666666"/>
            </window>
        </template>
    </liststyle>
</comboview>

带搜索功能的组合视图¶

<!-- 带搜索功能的组合视图 -->
<comboview pos="10,100,300,130" name="combo_search"
           dropWidth="300" dropHeight="300">
    <editstyle inset="5,0,5,0" 
               colorBkgnd="#FFFFFF"
               colorText="#000000"/>
    <liststyle>
        <template itemHeight="30">
            <text pos="5,|-15" name="txt_item"/>
        </template>
    </liststyle>
</comboview>

事件处理¶

组合视图控件支持以下事件：

事件名	EventID	说明
EVT_CB_SELCHANGE	EventCBSelChange::EventID	选择改变事件
EVT_CB_DROPDOWN	EventCBDropDown::EventID	下拉框展开事件
EVT_CB_CLOSEUP	EventCBCloseUp::EventID	下拉框关闭事件

// 事件处理示例
EVENT_MAP_BEGIN()
    EVENT_NAME_HANDLER(L"combo_basic", EventCBSelChange::EventID, OnCBSelChange)
    EVENT_NAME_HANDLER(L"combo_basic", EventCBDropDown::EventID, OnCBDropDown)
    EVENT_NAME_HANDLER(L"combo_basic", EventCBCloseUp::EventID, OnCBCloseUp)
EVENT_MAP_END()

void OnCBSelChange(IEvtArgs *pEvt)
{
    EventCBSelChange *pRealEvt = sobj_cast<EventCBSelChange>(pEvt);
    int nCurSel = pRealEvt->nCurSel;
    // 处理选择改变事件
}

void OnCBDropDown(IEvtArgs *pEvt)
{
    // 处理下拉框展开事件
}

void OnCBCloseUp(IEvtArgs *pEvt)
{
    // 处理下拉框关闭事件
}

代码操作¶

// 查找组合视图控件
SComboView *pComboView = FindChildByName2<SComboView>(L"combo_basic");

// 设置适配器
pComboView->SetAdapter(pAdapter);

// 获取当前选中项
int nCurSel = pComboView->GetCurSel();

// 设置选中项
pComboView->SetCurSel(0);

// 获取项目数量
int nCount = pComboView->GetCount();

// 设置下拉框尺寸
pComboView->SetAttribute(L"dropWidth", L"350");
pComboView->SetAttribute(L"dropHeight", L"450");

// 获取编辑框
SEdit* pEdit = pComboView->GetEditBox();

// 设置编辑框文本
pEdit->SetWindowText(L"自定义文本");

// 获取编辑框文本
SStringT strText;
pEdit->GetWindowText(strText);

实现国家选择器示例¶

#include <helper/SAdapterBase.h>

// 国家数据结构
struct CountryData
{
    SStringT strName;        // 国家名称
    SStringT strCode;        // 国家代码
    SStringT strFlagSkin;    // 国旗图标皮肤
    SStringT strContinent;   // 所属洲
};

// 国家选择器适配器
class CCountryAdapter : public SAdapterBase
{
protected:
    SArray<CountryData> m_countries;
    SArray<CountryData> m_filteredCountries; // 用于搜索过滤
    SStringT m_strFilter; // 搜索过滤条件

public:
    // 获取项目描述，用户选择一项后，将使用这个返回值填充comboview的edit/text部分。
    STDMETHOD_(SStringW, getItemDesc)(int position)
    {
        return SStringW().Format(L"%s (%s)", m_filteredCountries[position].strName.c_str(), m_filteredCountries[position].strCode.c_str());
    }

    // 获取项目数量，注意 WINAPI 调用约定
    virtual int WINAPI getCount()
    {
        return m_filteredCountries.GetCount();
    }

    // 获取视图，注意 WINAPI 调用约定
    virtual void WINAPI getView(int position, SItemPanel* pItem, SXmlNode xmlTemplate)
    {
        if(pItem->GetChildrenCount() == 0)
        {
            pItem->InitFromXml(&xmlTemplate);
        }

        if(position >= 0 && position < m_filteredCountries.GetCount())
        {
            const CountryData& country = m_filteredCountries[position];

            // 设置国旗
            SWindow* pFlag = pItem->FindChildByName(L"img_flag");
            if(pFlag)
            {
                pFlag->SetAttribute(L"skin", country.strFlagSkin);
            }

            // 设置国家名称
            SWindow* pName = pItem->FindChildByName(L"txt_name");
            if(pName)
            {
                pName->SetWindowText(country.strName);
            }

            // 设置国家代码
            SWindow* pCode = pItem->FindChildByName(L"txt_code");
            if(pCode)
            {
                pCode->SetWindowText(country.strCode);
            }
        }
    }

    // 添加国家
    void AddCountry(const CountryData& country)
    {
        m_countries.Add(country);
        ApplyFilter(); // 重新应用过滤器
    }

    // 设置搜索过滤条件
    void SetFilter(const SStringT& strFilter)
    {
        m_strFilter = strFilter;
        ApplyFilter();
    }

    // 应用过滤器
    void ApplyFilter()
    {
        m_filteredCountries.RemoveAll();

        if(m_strFilter.IsEmpty())
        {
            // 无过滤条件，显示所有国家
            m_filteredCountries.Copy(m_countries);
        }
        else
        {
            // 根据过滤条件筛选国家
            for(int i = 0; i < m_countries.GetCount(); i++)
            {
                const CountryData& country = m_countries[i];
                if(country.strName.Find(m_strFilter) != -1 || 
                   country.strCode.Find(m_strFilter) != -1)
                {
                    m_filteredCountries.Add(country);
                }
            }
        }

        notifyDataSetChanged();
    }

    // 获取指定位置的国家数据
    const CountryData& GetCountry(int position)
    {
        return m_filteredCountries[position];
    }
};

// 初始化国家选择器
void InitCountrySelector()
{
    SComboView* pComboView = FindChildByName2<SComboView>(L"combo_country");
    if(pComboView)
    {
        CCountryAdapter* pAdapter = new CCountryAdapter();

        // 添加一些示例国家数据
        CountryData countries[] = {
            {L"中国", L"CN", L"skin_flag_cn", L"亚洲"},
            {L"美国", L"US", L"skin_flag_us", L"北美洲"},
            {L"英国", L"UK", L"skin_flag_uk", L"欧洲"},
            {L"日本", L"JP", L"skin_flag_jp", L"亚洲"},
            {L"德国", L"DE", L"skin_flag_de", L"欧洲"},
            {L"法国", L"FR", L"skin_flag_fr", L"欧洲"},
            {L"加拿大", L"CA", L"skin_flag_ca", L"北美洲"},
            {L"澳大利亚", L"AU", L"skin_flag_au", L"大洋洲"}
        };

        for(int i = 0; i < sizeof(countries)/sizeof(countries[0]); i++)
        {
            pAdapter->AddCountry(countries[i]);
        }

        // 设置适配器
        pComboView->SetAdapter(pAdapter);
        pAdapter->Release();

        // 订阅编辑框文本变化事件以实现搜索功能
        SEdit* pEdit = pComboView->GetEditBox();
        if(pEdit)
        {
            pEdit->GetEventSet()->subscribeEvent(
                EventEditTextChanged::EventID,
                Subscriber(&OnEditTextChanged, this));
        }
    }
}

// 处理编辑框文本变化事件
bool OnEditTextChanged(EventArgs* pEvt)
{
    SEdit* pEdit = sobj_cast<SEdit>(pEvt->sender);
    if(pEdit)
    {
        SComboView* pComboView = sobj_cast<SComboView>(pEdit->GetParent());
        if(pComboView)
        {
            CCountryAdapter* pAdapter = (CCountryAdapter*)pComboView->GetAdapter();
            if(pAdapter)
            {
                SStringT strText;
                pEdit->GetWindowText(strText);
                pAdapter->SetFilter(strText); // 设置过滤条件
            }
        }
    }
    return true;
}

// 处理国家选择事件
void OnCountrySelected(int nIndex)
{
    SComboView* pComboView = FindChildByName2<SComboView>(L"combo_country");
    if(pComboView)
    {
        CCountryAdapter* pAdapter = (CCountryAdapter*)pComboView->GetAdapter();
        if(pAdapter && nIndex >= 0)
        {
            const CountryData& country = pAdapter->GetCountry(nIndex);
            // 处理国家选择，例如保存选择结果
            SaveSelectedCountry(country.strCode);
        }
    }
}

最佳实践¶

尺寸设置：合理设置 dropWidth 和 dropHeight，确保下拉内容完整显示
模板设计：使用合适的模板设计项目视图，确保数据展示清晰易读
交互体验：为编辑框设置合适的样式，提供良好的用户输入体验

常见问题¶

Q: 下拉框显示不完整怎么办？¶

A: 检查 dropWidth 和 dropHeight 是否设置合适，确保内容完整显示。

Q: 搜索功能如何实现？¶

A: 通过监听编辑框输入事件，动态过滤适配器中的数据。

相关控件¶

组合框(SComboBox) - 传统的组合框控件
列表视图(SListView) - 单列数据列表视图
树形视图(STreeView) - 支持层级结构数据展示的视图