nim_duilib之virtualListbox用法(22)

概述

本文将介绍virtualListbox的用法。
更多请参考源码。

一个样式

样式丑了点，勿喷。

重写函数

使用virtualListbox，需要一个派生类（继承自基类VirtualListInterface）重写父类的以下3个函数

class VirtualListInterface

{

public:

	/**

	 * @brief 创建一个子项

	 * @return 返回创建后的子项指针

	 */

	virtual Control* CreateElement() = 0;

	/**

	 * @brief 填充指定子项

	 * @param[in] control 子项控件指针

	 * @param[in] index 索引

	 * @return 返回创建后的子项指针

	 */

	virtual void FillElement(Control *control, int index) = 0;

	/**

	 * @brief 获取子项总数

	 * @return 返回子项总数

	 */

	virtual int GetElementtCount() = 0;

};

session_list类

自己定义了一个类，并继承了VirtualListInterface类。

{

public:

	explicit session_list(ui::VirtualListBox* pvlb) :plistbox_(pvlb) {}

	session_list() {}

	// 初始化参数

	int init(ui::VirtualListBox* pvlb);

      .......

}

重写下面3个函数后，virtualListbox（它的数据代理类型VirtualListInterface类型）会自动调用下面的函数。

CreateElement 函数

如其名，负责创建一个list_item，我们可以定制自己item的样式，创建就需要写在这里。
我的重写如下：

ui::Control* session_list::CreateElement()

{

	session_list_item* pitem = new(std::nothrow) session_list_item;

	if (NULL == pitem)

		return nullptr;

	std::wstring session_item_xml(L"list_session/sersson_item.xml");

	ui::GlobalManager::FillBoxWithCache(pitem, session_item_xml);

        // 关联item中的控件

	pitem->init_controls_();

	return pitem;

}

这里创建一个新的item，其中sersson_item.xml，是item的自定义布局，后面贴其完整源码

FillElement

它负责填充数据，比如，上面创建了item,item中的显示内容可以放在这个函数实现。

void session_list::FillElement(ui::Control *control, int index)

{

	if (nullptr == control || NULL == control || 0 > index)

		return;

	session_list_item* pitem = (session_list_item *)(control);

	// 定制显示数据

	pitem->init_data_();

}

GetElementtCount

告诉当前有多少个item. 比如，100， 2000，我这里设置的是20.

int session_list::GetElementtCount()

{

	return 20;

}

还需要

上面仅仅是定制了item，要显示，需要下面的函数配合使用才能达到效果

plistbox_->SetDataProvider(this);

plistbox_->SetElementHeight(50);

plistbox_->InitElement(20);

plistbox_->Refresh();

SetDataProvider

需要显示指定其数据代理的对象。我这里传递的是this, 是因为我自己定义的类是继承的VirtualListInterface

SetElementHeight

设置子项高度，示例中，使用DPI，额，我这里就先跳过。我这里设置的是50, 可以参考自己的session_item.xml中定义的height.

下面开始介绍item的个性化

ListContainerElement类

同样的，需要自己新增一个类继承自ListContainerElement。负责与界面控件的关联就写在这个派生类中，函数名可以自定义，下面的两个函数非父类的函数。

class session_list_item :public ui::ListContainerElement

{

public:

	// 关联控件

	virtual int init_controls_();

	// 设置初始化数据

	int init_data_();

private:

	// 下面的控件用于与界面的控件绑定

	// 头像

	ui::Label*	label_protrait_ = nullptr;

	// 姓名

	ui::Label*	label_name_ = nullptr;

	// 最新消息

	ui::RichEdit*	rich_edit_last_msg_ = nullptr;

	// 最新消息时间

	ui::Label*	label_last_msg_time_ = nullptr;

	// 是否静音

	ui::Label*	label_is_muted_ = nullptr;

};

init_controls_

我把初始化控件放在了这个函数中，当创建了item，再调用该函数完成控件绑定

int session_list_item::init_controls_()

{

	auto find_sub_ctrl = [&](const std::wstring name, ui::Label* pdst)

	{

		ui::Control* ptmp = FindSubControl(name);

		if (ptmp)

			label_protrait_ = dynamic_cast<ui::Label*>(ptmp);

	};

	// 1.关联其他label控件

	find_sub_ctrl(L"label_portrait", label_protrait_);

	find_sub_ctrl(L"label_name", label_name_);

	find_sub_ctrl(L"label_last_msg_time", label_last_msg_time_);

	find_sub_ctrl(L"label_is_muted", label_is_muted_);

	// 2.关联上一条消息控件

	ui::Control* ptmp = FindSubControl(L"rich_edit_last_msg");

	if (ptmp)

		rich_edit_last_msg_ = dynamic_cast<ui::RichEdit*>(ptmp);

	return 0;

}

init_data_

item显示的内容的填充，可以放到这个函数中，FillElement函数中可以调用该函数完成数据绑定。

int session_list_item::init_data_()

{

	//if (rich_edit_last_msg_)

	//	rich_edit_last_msg_->SetText(L"33");

	auto set_text = [&](ui::Label*label, std::wstring str)

	{

		if (label)

			label->SetText(str);

	};

	static int index = 0;

	std::wstring str = fmt::format(L"{}", ++index);

	set_text(label_protrait_, str);

	//set_text(label_name_, L"22");

	//set_text(label_last_msg_time_, L"33");

	//set_text(label_is_muted_, L"44");

	return 0;

}

session_item.xml

单独维护item的样式，很方便。上面例子中的item样式定义如下
整体采用水平布局。
xml源码内容

<?xml version="1.0" encoding="UTF-8"?>

<Window>

    <ListContainerElement class="listitem" normalcolor="bk_wnd_lightcolor" height="60" margin="0,3,0,3">

      <!--整体水平布局-->

      <HBox width="stretch" height="stretch">

        <!--头像-->

        <Label  name="label_portrait" text="头像" width="50" height="50" bkcolor="green" />

        <!--中间显示部分：姓名和上一条消息-->

        <VBox width="stretch" height="stretch" bkcolor="red">

          <!--姓名-->

          <Label text="王老板" name="label_name" width="stretch"/>

          <Control />

          <!--上一条消息-->

          <RichEdit text="这个月加班XXXXXXXXX" name="rich_edit_last_msg" multiline="false" vscrollbar="false" autovscroll="autovscroll" readonly="true" />

        </VBox>

        <!--右侧显示的事件和是否显示提醒图标-->

        <VBox width="50" height="stretch" bkcolor="bk_listitem_selected" >

          <!--上一条消息时间-->

          <Label name="label_last_msg_time" text="08:08" />

          <Control />

          <!--是否显示消息提醒图标-->

          <Label name="label_is_muted" text="静音" />

        </VBox>

      </HBox>

      <!--整体水平布局-->

    </ListContainerElement>

</Window>

virtualListbox的xml

其定义不在上面的sesson_item.xml，如下，

  <Box name="box_list_box" width="stretch" height="stretch">

        <VirtualListBox class="list" name="virtual_list_box" vscrollunit="1" bkcolor="green" margin="10,0,0,0" vscrollbar="true" />

  </Box>

巴特西