云信duilib 小知识总结 (对齐、半透明、右键菜单）

最新推荐文章于 2022-08-20 18:47:55 发布

清水迎朝阳

最新推荐文章于 2022-08-20 18:47:55 发布

阅读量3.1k

点赞数 3

分类专栏：网易云信开发 duilib 小知识篇文章标签： html

本文链接：https://blog.csdn.net/shuilan0066/article/details/83994263

版权

网易云信开发同时被 2 个专栏收录

17 篇文章 9 订阅

订阅专栏

duilib 小知识篇

15 篇文章 9 订阅

订阅专栏

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基本控件示例下载

1 对齐属性

	<Attribute name="halign" default="left" type="STRING" comment="控件的横向位置,如(center),支持left、center、right三种位置"/>
	<Attribute name="valign" default="top" type="STRING" comment="控件的纵向位置,如(center),支持top、center、bottom三种位置"/>

但是值得注意的是：

1）valign 不起作用的情况

VBOX 布局是从上而下依次排列的，因此，Vbox下的子控件，如果设置valign属性时，便不起作用。

比如，VBOX 下，设置子控件的valign=center时，是不起作用的

//不起作用
            <VBox width="stretch" height="stretch"  bkcolor="red">
   
                <HBox width="100" height="100"  halign="center"  valign="center"     bkcolor="blue">
                   
                </HBox>

            </VBox>

如果想让VBOX布局下，子控件也居中，需要辅助控件Control

            <VBox width="stretch" height="stretch"  bkcolor="red">
                <Control />
                 <HBox width="100" height="100"  halign="center"     bkcolor="blue">                  
                 </HBox>
                <Control />
            </VBox>

2）halign不起作用的原因

同理，HBOX 中，子控件按水平方向，依次排列，因此，在HBOX中，设置子控件的halign也是不起作用的。

2 半透明窗口

想实现窗口半透明，控件不透明的效果，使用云信duilib也很方便实现

1）shadowattached=“false” 置为假

<Attribute name="shadowattached" default="true" type="BOOL" comment="窗口是否附加阴影效果,如(true)"/>

窗口的一个属性

如果为true时，默认给窗口加上阴影背景

如果为false, 则不加额外背景

因为，我们想让窗口半透明，所以需要将此属性设置为false, 不加额外阴影背景

2）duilib中的颜色

<TextColor name="xnw_lightcolor2_trans_50" value="#7f363E4B" />

颜色值为 ARGB A是透明度

也就是，dulib本身是支持透明的

也就是，如果将背景设置为透明色的话，窗口背景就是透明的了。

所以，

窗口背景设置为透明色，控件颜色，设置为非透明色，便实现了窗口透明，控件不透明的效果

示例：

<?xml version="1.0" encoding="UTF-8"?>
<Window caption="0,0,0,0" mininfo="500,500" size="500,500" sizebox="4,4,6,6" shadowattached="false"  roundcorner="10,10" >


    <VBox bkcolor="xnw_lightcolor2_trans_50" height="stretch" width="stretch">
        <!-- 客户端名称设置 -->
        

            <Control />
            <VBox width="stretch" height="stretch">
    
                <Control />
                <HBox   halign="center" width="auto" halign="center">
                    <Button class="btn_global_green_80x30" name="myClosebtn"  text="我知道了"/>
                    
                </HBox>
                <Control />
            </VBox>
            <Control />
          
    </VBox>

</Window>

效果：

3 右键菜单

1）右键消息

	if (uMsg==WM_RBUTTONDOWN)
	{

		int xPos = LOWORD(lParam);
		INT yPos = HIWORD(lParam);
	
		CPoint pt;
		pt.x = xPos;
		pt.y = yPos;
		ClientToScreen(m_hWnd, &pt);

		PopupUserMenu(pt);

		return 1;


	}

PopupUserMenu(POINT point){



	CMenuWnd* pMenu = new CMenuWnd(NULL);
	STRINGorID xml(L"liveStream_rbt_menu.xml");
	pMenu->Init(xml, _T("xml"), point);

	CMenuElementUI *pFreshNlss = (CMenuElementUI*)pMenu->FindControl(L"fresh");
	if (pFreshNlss)
		pFreshNlss->AttachSelect(nbase::Bind(&NLSLiveForm::ReFreshNlss, this, std::placeholders::_1));


	CMenuElementUI* pVideoImage = (CMenuElementUI*)pMenu->FindControl(L"videoImage");
	if (pVideoImage)
	{
		pVideoImage->AttachSelect(nbase::Bind(&NLSLiveForm::ChangeImage, this, std::placeholders::_1));
		CheckBox* check_image = (CheckBox*)pVideoImage->FindSubControl(L"imageCheckBox");
		check_image->Selected(m_bVideoImage);
	}
	


	CMenuElementUI *pPull = (CMenuElementUI*)pMenu->FindControl(L"pullAdd");
	if (pPull)
	{
		pPull->AttachSelect(nbase::Bind(&NLSLiveForm::CopyPullAdd, this, std::placeholders::_1));
	}


	CMenuElementUI *pPush = (CMenuElementUI*)pMenu->FindControl(L"pushAdd");
	if (pPush)
	{
		pPush->AttachSelect(nbase::Bind(&NLSLiveForm::CopyPushAdd, this, std::placeholders::_1));
	}



/
	CMenuElementUI *pStopCapture = (CMenuElementUI*)pMenu->FindControl(L"stopCapture");
	if (pStopCapture)
	{
		pStopCapture->AttachSelect(nbase::Bind(&NLSLiveForm::StopCapture, this, std::placeholders::_1));
	}

	CMenuElementUI *pStartCapture = (CMenuElementUI*)pMenu->FindControl(L"startCapture");
	if (pStartCapture)
	{
		pStartCapture->AttachSelect(nbase::Bind(&NLSLiveForm::StartCapture, this, std::placeholders::_1));
	}


	CMenuElementUI *pStartInteractLive = (CMenuElementUI*)pMenu->FindControl(L"intLive");
	if (pStartInteractLive)
	{
		pStartInteractLive->AttachSelect(nbase::Bind(&NLSLiveForm::StartIntLive, this, std::placeholders::_1));
	}

	CMenuElementUI *pSwitchToInt = (CMenuElementUI*)pMenu->FindControl(L"switchMode");
	if (pSwitchToInt)
	{
		if (!g_bSwitchChangeable||!m_bLiving&&!m_bPaused)
		{
			pSwitchToInt->SetVisible(false);
		}

		pSwitchToInt->AttachSelect(nbase::Bind(&NLSLiveForm::SwtichToIntMode, this, std::placeholders::_1));
	}

	
	pMenu->Show();
	pMenu->SetFocus(NULL);
}

菜单响应函数格式

bool SwtichToIntMode(ui::EventArgs* param);

菜单XML 放在themes\default\menu下

类似

<?xml version="1.0" encoding="utf-8"?>
<Window shadowattached="true" alphafixcorner="10,20,10,10">
    <VListBox class="menu" name="user_menu">
        <MenuElement bkcolor="blue" width="140" height="10" alpha="10">
            <Control bkimage="up.png" width="auto" height="auto" halign="center" valign="bottom" />
        </MenuElement>



        <MenuElement class="MenuElement" name="switchMode" width="140" height="50">
            <Button class="menu_text" text="切换成互动模式" halign="center" valign="center" />
        </MenuElement>

        <MenuElement class="MenuElement" name="startCapture" width="140" height="50">
            <Button class="menu_text" text="恢复摄像头" halign="center" valign="center" />
        </MenuElement>


    </VListBox>
</Window>