云信duilib 学习一 VListBox 虚拟列表

 duilib 快速入门

duilib入门基础一 容器之 BOX、VBOX、HBOX布局及其子控件align排列方式

duilib入门基础二 HBOX容器内 子控件margin定位规则

​​​​​​duilib入门基础三 VBOX容器内 子控件margin定位规则

duilib入门基础四 BOX容器内 子控件margin定位规则

duilib入门基础五 简单示例之 文件选择框使用

duilib入门基础 六 见见世面，duilib 基本控件 Button 能实现的界面一览

duilib入门基础 七 见见世面，duilib 基本控件 复选框 单选框

duilib入门基础 八 见见世面，duilib 基本控件 滑动条

duilib入门基础 九 见见世面，duilib 基本控件 组合框

duilib入门基础 十 见见世面，duilib 基本控件 选项框 OptionBox

云信duilib基本控件示例下载

简单示例：

<?xml version="1.0" encoding="UTF-8"?>
<Window size="400,600" caption="0,0,0,35" sizebox="4,4,4,4">
  <VBox bkcolor="bk_wnd_darkcolor">
    <!-- <HBox width="stretch" height="35" bkcolor="bk_wnd_lightcolor"> -->
    <HBox width="stretch" height="35" >
      <Control />
      <Button class="btn_wnd_min" name="minbtn" margin="4,6,0,0"/>
      <Box width="21" margin="4,6,0,0">
        <Button class="btn_wnd_max" name="maxbtn"/>
        <Button class="btn_wnd_restore" name="restorebtn" visible="false"/>
      </Box>
      <Button class="btn_wnd_close" name="closebtn" margin="4,6,8,0"/>
    </HBox>

   <HBox width="stretch" height="100" bkcolor="bk_wnd_darkcolor">

    </HBox>

    <VBox>
        <VListBox class="list" name="list" padding="20,3,20,3">
        </VListBox>
    </VBox>
  </VBox>
</Window>

    <Class name="list" bkcolor="bk_wnd_lightcolor" vscrollbar="true"/>
    <Class name="listitem" hotcolor="bk_listitem_hovered" pushedcolor="bk_listitem_selected" selectednormalcolor="bk_listitem_selected" fadehot="false" height="60" align="center" />
    <Class name="list_topitem" normalcolor="bk_topitem_normal" hotcolor="bk_topitem_hovered" pushedcolor="bk_topitem_selected" selectednormalcolor="bk_topitem_selected" fadehot="false"/>

代码：
 

void BasicForm::InitWindow()
{

	/* Initialize ListBox data */
	ui::ListBox* list = dynamic_cast<ui::ListBox*>(FindControl(L"list"));
	for (auto i = 0; i < 30; i++)
	{
		ui::ListContainerElement* element = new ui::ListContainerElement;
		element->SetText(nbase::StringPrintf(L"ListElement %d", i));
		element->SetClass(L"listitem");
	//	element->SetFixedHeight(20);
		list->Add(element);
	}

}

扩展

列表现一般是比较丰富的，这个只是最基本的文字样式，下面将其扩展

主要思想是 单独写一个ListContainerElement 布局文件

<?xml version="1.0" encoding="utf-8"?>
<Window>

    <ListContainerElement class="listitem" width="stretch" height="180" bkcolor="bk_wnd_darkcolor"  >     
        <VBox>
            <HBox name="storePushUrl" margin="0,0,0,0" childmargin="12" height="18">
                 <Control name="statusImg" width="auto" height="auto"/>
                 <Label name="live_status" text="正在直播..." font="system_14" normaltextcolor="textdefaultcolor" />
                 <Label  text="9:00--11:00" font="system_12" normaltextcolor="textdefaultcolor" name="time" />        
            </HBox>
            
            <Box name="storeRtmpUrl" bordersize="0">
                <HBox margin="30,1,0,0"  valign="center" bordersize="0">
                     <!-- 九宫格 设置拉伸范围 -->
                     <Control  height="160" normalimage="file='class_n.png' corner='20,20,20,20'"  hotimage="file='class_h.png' corner='20,20,20,20'"/>
                     <Control width="30" /> 

                </HBox>              
                <Box padding="8,20,0,20" width="auto" mouse="false">
                    <Control class="splitline_ver_level1" />
                </Box>
                <HBox  margin="30,0,0,0" height="120" width="678"  valign="center" bordersize="0"  mouse="false" mousechild="false">
                    <!-- 课程图 -->
                    <Box width="auto"  bordersize="0">
                        <Control name="classPhoto" width="200" height="120" bkimage="2.png" valign="top"/>
                        <Control bkimage="leftMask.png" width="auto"  height="120"/>
                    </Box>
                    <VBox childmargin="16" padding="20,20,0,0">
                        <Label text="本节知识点" font="system_16" name="chapterName" normaltextcolor="black" />
                        <Label text="课程题目" font="system_12" name="courseName" />
                        
                    </VBox>
                    <Control />
                </HBox>

                <!-- 进入按钮 -->
                 <Button class="btn_enter" name="enterLiveRoom_Btn" valign="center" halign="right" cursortype="hand" text="进入" />
            </Box>
        </VBox>
    </ListContainerElement>
</Window>

主窗口还是与之前一样

代码实现，加载这个自定义列表文件 ，

	/* Initialize ListBox data */
	ui::ListBox* list = dynamic_cast<ui::ListBox*>(FindControl(L"list"));
	for (auto i = 0; i < 30; i++)
	{
		//添加列表中
		ui::ListContainerElement* element = dynamic_cast<ui::ListContainerElement*>(ui::GlobalManager::CreateBoxWithCache(L"basic/my_list_item.xml"));
		
		list->Add(element);
	}

就可实现 丰富的自定义列表项