云信duilib学习⼀VListBox虚拟列表
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=    <Class name="list_topitem" normalcolor="bk_topitem_normal" hotcolor="bk_topitem_hovered" pushedcolor="bk_topitem_selected" selectednormalcolor="bk_to
代码：
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);
}
}
扩展
列表现⼀般是⽐较丰富的，这个只是最基本的⽂字样式，下⾯将其扩展主要思想是 单独写⼀个ListCon
tainerElement 布局⽂件
<?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>
borderbox<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_l"));
list->Add(element);
}
就可实现 丰富的⾃定义列表项

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。