使用Duilib開發Windows軟件(2)——控件的基本介紹


XML

如果沒了解過xml,可以先花30分鍾了解下 https://www.w3cschool.cn/xml/xml-xml-tutorialhc4o1t5m.html

控件


上圖是我們下載的NIM_Duilib_Framework工程的結構,紅色區域的duilib就是下面要講的內容。

注意:在nim中,作者定義了一些常用設置比如之前的basic_form的一些設置:

定義的文件在這里:

所有控件的屬性列表,下面的連接是作者提供的文檔:
https://github.com/netease-im/NIM_PC_UIKit/edit/master/doc/duilib屬性列表.xml
也就是這些:

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

<Resources>
	<Global comment="定義了全局公用資源,包含了字體、class、文字顏色。定義Global標簽的xml文件需要放到資源目錄的根位置,目前命名為硬編碼“global.xml”,詳見GlobalManager::Startup函數代碼">
		<Attribute name="disabledfontcolor" default="0xFFA7A6AA" type="DWORD" comment="默認的disabled字體顏色,如(0xFFA7A6AA)"/>
		<Attribute name="defaultfontcolor" default="0xFF000000" type="DWORD" comment="默認的字體顏色,如(0xFF000000)"/>
		<Attribute name="linkfontcolor" default="0xFF0000FF" type="DWORD" comment="默認的link字體顏色,如(0xFF0000FF)"/>
		<Attribute name="linkhoverfontcolor" default="0xFFD3215F" type="DWORD" comment="默認的linkhoverfont字體顏色,如(0xFFD3215F)"/>
		<Attribute name="selectedcolor" default="0xFFBAE4FF" type="DWORD" comment="默認的selected字體顏色,如(0xFFBAE4FF)"/>
	</Global>
	<Font comment="需要在Global標簽內定義">
		<Attribute name="name" default="" type="STRING" comment="字體名字,如果指定為system,則使用系統默認字體(在xp上為新宋體,高版本系統上為微軟雅黑)"/>
		<Attribute name="size" default="12" type="INT" comment="字體大小,如(13)"/>
		<Attribute name="bold" default="false" type="BOOL" comment="字體是否加粗,如(true)"/>
		<Attribute name="underline" default="false" type="BOOL" comment="字體是否加下划線,如(true)"/>
		<Attribute name="italic" default="false" type="BOOL" comment="字體是否為斜體,如(true)"/>
	</Font>
	<Class comment="需要在Global標簽或者Window標簽內定義">
		<Attribute name="Class" default="" type="STRING" comment="自定義的控件樣式的名字,在需要使用樣式的地方直接指定這個名字,如(btn_default)"/>
		<Attribute name="Value" default="" type="STRING" comment="內置的控件屬性,如(text="測試" height="12")"/>
	</Class>
	<TextColor comment="用字符串常量代替數值來定義顏色,需要在Global標簽內定義">
		<Attribute name="name" default="" type="STRING" comment="顏色的名字,如(white)"/>
		<Attribute name="value" default="0x00000000" type="DWORD" comment="常量對應的顏色,如(0xFFFFFFFF)"/>
	</TextColor>
	<Language comment="實際並不存在此標簽,這里說明多語言的用法。語言文件文件需要放到“lang\zh_CN\gdstrings.ini”(相對可執行程序,並不是相對資源目錄),詳見GlobalManager::Startup函數代碼。語言定義的例子:“STRING_OK 			= 確 定”,其中STRING_OK是文本ID,確定是此ID代表的實際文本,需要設置多語言文本的地方直接指定文本ID即可,每行定義一個ID">
	</Language>
	<Include comment="用於xml文件的復用和較大xml文件的分割,指定此標簽的地方會在對應位置自動展開指定的xml文件,需要包含在根標簽內部,不能獨立於根標簽使用">
		<Attribute name="source" default="" type="STRING" comment="要插入的xml文件的路徑,如(list_item.xml)"/>
		<Attribute name="count" default="1" type="INT" comment="重復插入的數量"/>
	</Include>  
</Resources>

<Events>
	<Event comment="此需要包含在某個控件標簽內使用。當包含Event標簽的控件觸發接收的消息時會動態設置接受者控件的屬性,設置為applyattribute代表的值">
		<Attribute name="type" default="" type="STRING" comment="接收的消息類型,用空格分隔多個消息,如(killfocus,完整的消息類型見duilib庫Define.h文件)"/>
		<Attribute name="receiver" default="" type="STRING" comment="接受者控件的名字,用空格分隔多個名字,如(btn_test).如果名字以“./”或者“.\開頭”,則代表接受者控件是包含Event標簽的控件的子控件,否則代表整個窗體內的某個控件"/>
		<Attribute name="applyattribute" default="" type="STRING" comment="動態設置的屬性值,可以設置多個屬性(就是被綁定控件的某個要被設置的屬性值)"/>
	</Event>
	<BubbledEvent comment="此需要包含在某個控件標簽內使用。當包含BubbledEvent標簽的控件或者其子控件觸發接收的消息時會動態設置接受者控件的屬性,設置為applyattribute代表的值,此標簽只能用於容器控件">
		<Attribute name="type" default="" type="STRING" comment="接收的消息類型,用空格分隔多個消息,如(killfocus,完整的消息類型見duilib庫Define.h文件)"/>
		<Attribute name="receiver" default="" type="STRING" comment="接受者控件的名字,用空格分隔多個名字,如(btn_test).如果名字以“./”或者“.\開頭”,則代表接受者控件是包含Event標簽的控件的子控件,否則代表整個窗體內的某個控件"/>
		<Attribute name="applyattribute" default="" type="STRING" comment="動態設置的屬性值,可以設置多個屬性"/>
	</BubbledEvent>
</Events>

<Controls>
	<Window parent="">
		<Attribute name="size" default="0,0" type="SIZE" comment="窗口的初始化大小,如(800,600)"/>
		<Attribute name="mininfo" default="0,0" type="SIZE" comment="窗口最小大小,如(320,240)"/>
		<Attribute name="maxinfo" default="0,0" type="SIZE" comment="窗口最大大小,如(1600,1200)"/>
		<Attribute name="heightpercent" default="0.0" type="DOUBLE" comment="窗口的初始高度占屏幕高度的百分比,應該寫在size、mininfo、maxinfo屬性后面"/>
		<Attribute name="sizebox" default="0,0,0,0" type="RECT" comment="窗口可拖動改變窗口大小的邊距,如(4,4,6,6)"/>
		<Attribute name="caption" default="0,0,0,0" type="RECT" comment="窗口可拖動的標題欄大小的邊距,最后一個參數是指離上邊框的距離,如(0,0,0,28)"/>
		<Attribute name="textid" default="" type="STRING" comment="窗體標題字符串的ID,ID在多語言文件中指定,如(STRID_MIANWINDOW_TITLE)"/>
		<Attribute name="roundcorner" default="0,0" type="SIZE" comment="窗口圓角大小,如(4,4)"/>
		<Attribute name="shadowattached" default="true" type="BOOL" comment="窗口是否附加陰影效果,如(true)"/>
		<Attribute name="shadowimage" default="" type="STRING" comment="使用自定義的陰影素材去代替默認的陰影效果,設置的路徑要注意相對路徑以及九宮格屬性,如(file='../public/bk/bk_shadow.png' corner='30,30,30,30')"/>
		<Attribute name="shadowcorner" default="0,0,0,0" type="RECT" comment="設置了shadowimage屬性后,設置此屬性來指定陰影素材的九宮格描述,這個屬性一定要寫在size屬性前面"/>	
		<Attribute name="alphafixcorner" default="14,14,14,14" type="RECT" comment="透明通道修補范圍的的九宮格描述"/>
		<Attribute name="custom_shadow" default="14,14,14,14" type="RECT" comment="與alphafixcorner完全一樣,為了兼容老版本xml所以沒有去掉這個屬性"/>
	</Window>
	<Control parent="" notifies="暫時不寫">
		<Attribute name="class" default="" type="STRING" comment="控件樣式,用樣式里面的屬性值來設置本控件的屬性,如(btn_default),可以同時指定多個樣式,各個樣式之間用空格分隔,需要寫在第一個屬性位置,"/>
		<Attribute name="name" default="" type="STRING" comment="控件名字,同一窗口內必須唯一,如(testbtn)"/>
		<Attribute name="halign" default="left" type="STRING" comment="控件的橫向位置,如(center),支持left、center、right三種位置"/>
		<Attribute name="valign" default="top" type="STRING" comment="控件的縱向位置,如(center),支持top、center、bottom三種位置"/>
		<Attribute name="margin" default="0,0,0,0" type="RECT" comment="外邊距,如(2,2,2,2)"/>
		<Attribute name="bkcolor" default="" type="STRING" comment="背景顏色字符串常量,如(white)"/>
		<Attribute name="bkcolor1" default="" type="STRING" comment="背景漸變色1,和bkcolor配合使用,如(blue)"/>
		<Attribute name="normalcolor" default="" type="STRING" comment="普通狀態顏色,如(white)"/>
		<Attribute name="hotcolor" default="" type="STRING" comment="懸浮狀態顏色,如(white)"/>
		<Attribute name="pushedcolor" default="" type="STRING" comment="按下狀態顏色,如(white)"/>
		<Attribute name="disabledcolor" default="" type="STRING" comment="禁用狀態顏色,如(white)"/>
		<Attribute name="bordercolor" default="" type="STRING" comment="邊框顏色,如(blue)"/>
		<Attribute name="bordersize" default="0" type="INT | RECT" comment="可以設置INT或RECT類型的值。當值為ING時則左、上、右、下都用該值作為寬。值為RECT類型時則分別設置左、上、右、下的邊框"/>
		<Attribute name="leftbordersize" default="0" type="INT" comment="左邊邊框大小,如(1),設置該值大於0,則將忽略bordersize屬性的設置"/>
		<Attribute name="topbordersize" default="0" type="INT" comment="頂部邊框大小,如(1),設置該值大於0,則將忽略bordersize屬性的設置"/>
		<Attribute name="rightbordersize" default="0" type="INT" comment="右邊邊框大小,如(1),設置該值大於0,則將忽略bordersize屬性的設置"/>
		<Attribute name="bottombordersize" default="0" type="INT" comment="底部邊框大小,如(1),設置該值大於0,則將忽略bordersize屬性的設置"/>
		<Attribute name="borderround" default="0,0" type="SIZE" comment="邊框圓角半徑,如(2,2)"/>
		<Attribute name="width" default="stretch" type="INT | STRING" comment="可以設置INT或STRING類型的值.當值為INT是則設置控件的最小寬度,如(100);當值為STRING時,stretch代表由父容器計算控件寬度,auto代表根據內容情況自動計算寬度"/>
		<Attribute name="height" default="stretch" type="INT | STRING" comment="可以設置INT或STRING類型的值.當值為INT是則設置控件的最小高度,如(100);當值為STRING時,stretch代表由父容器計算控件高度,auto代表根據內容情況自動計算高度"/>
		<Attribute name="minwidth" default="-1" type="INT" comment="控件的最小寬度,如(30)"/>
		<Attribute name="minheight" default="-1" type="INT" comment="控件的最小高度,如(30)"/>
		<Attribute name="maxwidth" default="9999999" type="INT | STRING" comment="控件的最大寬度,描述同width"/>
		<Attribute name="maxheight" default="9999999" type="INT | STRING" comment="控件的最大高度,描述同height"/>
		<Attribute name="bkimage" default="" type="STRING" comment="背景圖片,如(bk.bmp或file='aaa.jpg' res='' dest='0,0,0,0' source='0,0,0,0' corner='0,0,0,0' fade='255' xtiled='false' ytiled='false')"/>

		<Attribute name="tooltiptext" default="" type="STRING" comment="鼠標懸浮提示,如(請在這里輸入你的密碼)"/>
		<Attribute name="tooltiptextid" default="" type="STRING" comment="鼠標懸浮提示,指定多語言模塊的ID,當tooltiptext為空時則顯示此屬性,如(TOOL_TIP_ID)"/>
		<Attribute name="dataid" default="" type="STRING" comment="自定義字符串數據,輔助函數,供用戶使用"/>
		<Attribute name="enabled" default="true" type="BOOL" comment="是否可以響應用戶操作,如(true)"/>
		<Attribute name="mouse" default="true" type="BOOL" comment="本控件是否可以響應鼠標操作,如(true)"/>
		<Attribute name="keyboard" default="true" type="BOOL" comment="非CButtonUI類忽略該值,為false時不支持TAB_STOP,且該對象不處理鍵盤信息"/>
		<Attribute name="visible" default="true" type="BOOL" comment="是否可見,如(true)"/>
		<Attribute name="fadevisible" default="true" type="BOOL" comment="是否可見,如(true),此屬性會觸發控件動畫效果"/>
		<Attribute name="float" default="false" type="BOOL" comment="是否使用絕對定位,如(true)"/>
		<Attribute name="menu" default="false" type="BOOL" comment="是否需要右鍵菜單,如(true)"/>
		<Attribute name="nofocus" default="false" type="BOOL" comment="是否可以獲取焦點,如(true)"/>
		<Attribute name="alpha" default="255" type="INT" comment="控件的整體透明度,如(128)"/>
		<Attribute name="state" default="normal" type="STRING" comment="控件的當前狀態,支持normal、hot、pushed、disabled狀態"/>
		<Attribute name="cursortype" default="arrow" type="STRING" comment="鼠標移動到控件上時的鼠標光標,arrow、hand、ibeam"/>
		<Attribute name="normalimage" default="" type="STRING" comment="普通狀態圖片"/>
		<Attribute name="hotimage" default="" type="STRING" comment="鼠標懸浮的狀態圖片"/>
		<Attribute name="pushedimage" default="" type="STRING" comment="鼠標按下的狀態圖片"/>
		<Attribute name="disabledimage" default="" type="STRING" comment="禁用的狀態圖片"/>
		<Attribute name="forenormalimage" default="" type="STRING" comment="普通狀態前景圖片"/>
		<Attribute name="forehotimage" default="" type="STRING" comment="鼠標懸浮的狀態前景圖片"/>
		<Attribute name="forepushedimage" default="" type="STRING" comment="鼠標按下的狀態前景圖片"/>
		<Attribute name="foredisabledimage" default="" type="STRING" comment="禁用的狀態前景圖片"/>
		<Attribute name="renderoffset" default="0,0" type="SIZE" comment="控件繪制時的偏移量,如(10,10),一般用於繪制動畫"/>
		<Attribute name="fadealpha" default="false" type="BOOL" comment="是否啟用控件透明漸變動畫,如(true)"/>
		<Attribute name="fadehot" default="false" type="BOOL" comment="是否啟用控件懸浮狀態下 的透明漸變動畫,如(true)"/>
		<Attribute name="fadewidth" default="false" type="BOOL" comment="是否啟用控件寬度漸變動畫,如(true)"/>
		<Attribute name="fadeheight" default="false" type="BOOL" comment="是否啟用控件高度漸變動畫,如(true)"/>
		<Attribute name="fadeinoutxfromleft" default="false" type="BOOL" comment="是否啟用控件從左到右的動畫,如(true)"/>
		<Attribute name="fadeinoutxfromright" default="false" type="BOOL" comment="是否啟用控件從右到左的動畫,如(true)"/>
		<Attribute name="fadeinoutyfromtop" default="false" type="BOOL" comment="是否啟用控件從上到下的動畫,如(true)"/>
		<Attribute name="fadeinoutyfrombottom" default="false" type="BOOL" comment="是否啟用控件從下到上的動畫,如(true)"/>
	</Control>
	
	<Label parent="Control" notifies="暫時不寫" >
		<Attribute name="width" default="auto" type="INT | STRING" comment="可以設置INT或STRING類型的值.當值為INT是則設置控件的最小寬度,如(100);當值為STRING時,stretch代表由父容器計算控件寬度,auto代表根據內容情況自動計算寬度"/>
		<Attribute name="height" default="auto" type="INT | STRING" comment="可以設置INT或STRING類型的值.當值為INT是則設置控件的最小高度,如(100);當值為STRING時,stretch代表由父容器計算控件高度,auto代表根據內容情況自動計算高度"/>
		<Attribute name="text" default="" type="STRING" comment="顯示文本,如(測試文本)"/>
		<Attribute name="textid" default="" type="STRING" comment="多語言功能的ID,如(TEXT_OUT)"/>
		<Attribute name="align" default="left" type="STRING" comment="文本的輸出位置,如(center),支持left、center、right、top、vcenter、bottom"/>
		<Attribute name="font" default="-1" type="INT" comment="字體id,如(0)"/>
		<Attribute name="endellipsis" default="false" type="BOOL" comment="句末顯示不完是否使用...代替,如(true)"/>	
		<Attribute name="textpadding" default="0,0,0,0" type="RECT" comment="文字顯示的邊距,如(2,2,2,2)"/>
		<Attribute name="normaltextcolor" default="" type="STRING" comment="普通字體顏色,不指定則使用默認顏色,如(blue)"/>
		<Attribute name="hottextcolor" default="" type="STRING" comment="鼠標懸浮字體顏色,不指定則使用默認顏色,如(blue)"/>
		<Attribute name="pushedtextcolor" default="" type="STRING" comment="鼠標按下字體顏色,不指定則使用默認顏色,如(blue)"/>
		<Attribute name="disabledtextcolor" default="" type="STRING" comment="disabled字體顏色,不指定則使用默認顏色,如(blue)"/>
		<Attribute name="linelimit" default="false" type="BOOL" comment="是否限制正行輸出,如(true)"/>
		<Attribute name="singleline" default="true" type="BOOL" comment="是否單行輸出文字,如(true)"/>
	</Label>
	<LabelBox parent="Box" notifies="暫時不寫" comment="屬性同Label">
	</LabelBox>

	<Button parent="Label" notifies="暫時不寫" comment="屬性同Label">
	</Button>
	<ButtonBox parent="LabelBox" notifies="暫時不寫" comment="屬性同Label">
	</ButtonBox>

	<CheckBox parent="Button" notifies="暫時不寫" >
		<Attribute name="selected" default="false" type="BOOL" comment="是否選中"/>
		<Attribute name="selectednormalimage" default="" type="STRING" comment="選中的普通狀態圖片"/>
		<Attribute name="selectedhotimage" default="" type="STRING" comment="選中的鼠標懸浮的狀態圖片"/>
		<Attribute name="selectedpushedimage" default="" type="STRING" comment="選中的鼠標按下的狀態圖片"/>
		<Attribute name="selecteddisabledimage" default="" type="STRING" comment="選中的禁用的狀態圖片"/>
		<Attribute name="selectedtextcolor" default="" type="STRING" comment="選中狀態字體顏色,不指定則使用默認顏色,如(blue)"/>
		<Attribute name="selectednormalcolor" default="" type="STRING" comment="選中的普通狀態字體顏色,不指定則使用默認顏色,如(blue)"/>
		<Attribute name="selectedhotcolor" default="" type="STRING" comment="選中的鼠標懸浮狀態字體顏色,不指定則使用默認顏色,如(blue)"/>
		<Attribute name="selectedpushedcolor" default="" type="STRING" comment="選中的鼠標按下狀態字體顏色,不指定則使用默認顏色,如(blue)"/>
		<Attribute name="selecteddisabledcolor" default="" type="STRING" comment="選中的禁用狀態字體顏色,不指定則使用默認顏色,如(blue)"/>
		<Attribute name="selectedforenormalimage" default="" type="STRING" comment="選中的前景圖片"/>
		<Attribute name="selectedforehotimage" default="" type="STRING" comment="選中的鼠標懸浮狀態的圖片"/>
		<Attribute name="selectedforepushedimage" default="" type="STRING" comment="選中的鼠標按下狀態的前景圖片"/>
		<Attribute name="selectedforedisabledimage" default="" type="STRING" comment="選中的禁用狀態的前景圖片"/>	
	</CheckBox>
	<CheckBoxBox parent="ButtonBox" notifies="暫時不寫" comment="屬性同CheckBox" >
	</CheckBoxBox>

	<Option parent="CheckBox" notifies="暫時不寫"  >
		<Attribute name="group" default="" type="STRING" comment="所屬組的名稱"/>
	</Option>
	<OptionBox parent="CheckBox" notifies="暫時不寫" comment="屬性同Option" >
	</OptionBox>

	<Progress parent="Label" notifies="暫時不寫" >
		<Attribute name="hor" default="true" type="BOOL" comment="水平或垂直,如(true)"/>
		<Attribute name="min" default="0" type="INT" comment="進度最小值,如(0)"/>
		<Attribute name="max" default="100" type="INT" comment="進度最大值,如(100)"/>
		<Attribute name="value" default="0" type="INT" comment="進度值,如(50)"/>
		<Attribute name="isstretchfore" default="TRUE" type="BOOL" comment="指定進度條前景圖片是否縮放顯示"/>
		<Attribute name="progresscolor" default="" type="STRING" comment="進度條前景顏色,不指定則使用默認顏色,如(blue)"/>
		<Attribute name="progressimage" default="" type="STRING" comment="進度條前景圖片"/>
	</Progress>

	<Slider parent="Progress" notifies="暫時不寫" >
		<Attribute name="thumbnormalimage" default="" type="STRING" comment="拖動滑塊普通狀態圖片"/>
		<Attribute name="thumbhotimage" default="" type="STRING" comment="拖動滑塊鼠標懸浮狀態圖片"/>
		<Attribute name="thumbpushedimage" default="" type="STRING" comment="拖動滑塊鼠標按下狀態圖片"/>
		<Attribute name="thumbdisabledimage" default="" type="STRING" comment="拖動滑塊鼠標禁用狀態圖片"/>
		<Attribute name="thumbsize" default="10,10" type="SIZE" comment="拖動滑塊大小,如(10,10)"/>
		<Attribute name="step" default="1" type="INT" comment="進度步長,如(1)"/>
		<Attribute name="progressbarpadding" default="0,0,0,0" type="RECT" comment="滑動條繪制時縮小的內邊距"/>
	</Slider>

	<ScrollBar parent="Control" notifies="暫時不寫">
		<Attribute name="button1normalimage" default="" type="STRING" comment="左或上按鈕普通狀態圖片"/>
		<Attribute name="button1hotimage" default="" type="STRING" comment="左或上按鈕鼠標懸浮狀態圖片"/>
		<Attribute name="button1pushedimage" default="" type="STRING" comment="左或上按鈕鼠標按下狀態圖片"/>
		<Attribute name="button1disabledimage" default="" type="STRING" comment="左或上按鈕禁用狀態圖片"/>
		<Attribute name="button2normalimage" default="" type="STRING" comment="右或下按鈕普通狀態圖片"/>
		<Attribute name="button2hotimage" default="" type="STRING" comment="右或下按鈕鼠標懸浮狀態圖片"/>
		<Attribute name="button2pushedimage" default="" type="STRING" comment="右或下按鈕鼠標按下狀態圖片"/>
		<Attribute name="button2disabledimage" default="" type="STRING" comment="右或下按鈕禁用狀態圖片"/>
		<Attribute name="thumbnormalimage" default="" type="STRING" comment="滑塊普通狀態圖片"/>
		<Attribute name="thumbhotimage" default="" type="STRING" comment="滑塊鼠標懸浮狀態圖片"/>
		<Attribute name="thumbpushedimage" default="" type="STRING" comment="滑塊鼠標按下狀態圖片"/>
		<Attribute name="thumbdisabledimage" default="" type="STRING" comment="滑塊禁用狀態圖片"/>
		<Attribute name="railnormalimage" default="" type="STRING" comment="滑塊中間標識普通狀態圖片"/>
		<Attribute name="railhotimage" default="" type="STRING" comment="滑塊中間標識鼠標懸浮狀態圖片"/>
		<Attribute name="railpushedimage" default="" type="STRING" comment="滑塊中間標識鼠標按下狀態圖片"/>
		<Attribute name="raildisabledimage" default="" type="STRING" comment="滑塊中間標識禁用狀態圖片"/>
		<Attribute name="bknormalimage" default="" type="STRING" comment="背景普通狀態圖片"/>
		<Attribute name="bkhotimage" default="" type="STRING" comment="背景鼠標懸浮狀態圖片"/>
		<Attribute name="bkpushedimage" default="" type="STRING" comment="背景鼠標按下狀態圖片"/>
		<Attribute name="bkdisabledimage" default="" type="STRING" comment="背景禁用狀態圖片"/>
		<Attribute name="hor" default="false" type="BOOL" comment="水平或垂直,如(true)"/>
		<Attribute name="linesize" default="8" type="INT" comment="滾動一行的大小,如(8)"/>
		<Attribute name="thumbminlength" default="30" type="INT" comment="滑塊的最小長度"/>
		<Attribute name="range" default="100" type="INT" comment="滾動范圍,如(100)"/>
		<Attribute name="value" default="0" type="INT" comment="滾動位置,如(0)"/>
		<Attribute name="showbutton1" default="true" type="BOOL" comment="是否顯示左或上按鈕,如(true)"/>
		<Attribute name="showbutton2" default="true" type="BOOL" comment="是否顯示右或下按鈕,如(true)"/>
		<Attribute name="autohidescroll" default="true" type="BOOL" comment="是否自動隱藏滾動條,如(true)"/>
	</ScrollBar>

	<Box parent="Control" notifies="暫時不寫">
		<Attribute name="padding" default="0,0,0,0" type="RECT" comment="內邊距,如(2,2,2,2)"/>
		<Attribute name="childmargin" default="0" type="INT" comment="子控件之間的額外距離,如(4)"/>
		<Attribute name="mousechild" default="true" type="BOOL" comment="本控件的子控件是否可以響應用戶操作,如(true)"/>
	</Box>

	<VBox parent="Box" notifies="暫時不寫" comment="屬性同Box" >
	</VBox>

	<HBox parent="Box" notifies="暫時不寫" comment="屬性同Box" >
	</HBox>

	<ChildBox parent="Box" notifies="暫時不寫" >
		<Attribute name="xmlfile" default="" type="STRING" comment="要嵌入的xml文件的地址,如(childxml.xml)"/>
	</ChildBox>

	<TabBox parent="Box" notifies="暫時不寫" >
		<Attribute name="fadeswitch" default="false" type="BOOL" comment="當切換頁面時是否使用動畫效果,如(false)"/>
		<Attribute name="selectedid" default="0" type="INT" comment="默認選中的頁面id,如(0)"/>
	</TabBox>

	<TileBox>
		<Attribute name="columns" default="1" type="INT" comment="列數,如(4)"/>
		<Attribute name="itemsize" default="0,0" type="SIZE" comment="子項固定大小,如(128,128)"/>
	</TileBox>

	<ScrollableBox parent="Box" notifies="暫時不寫">
		<Attribute name="vscrollbar" default="false" type="BOOL" comment="是否使用豎向滾動條,如(true)"/>
		<Attribute name="hscrollbar" default="false" type="BOOL" comment="是否使用橫向滾動條,如(true)"/>
		<Attribute name="vscrollbarstyle" default="" type="STRING" comment="設置本容器的縱向滾動條的樣式"/>
		<Attribute name="hscrollbarstyle" default="" type="STRING" comment="設置本容器的橫向滾動條的樣式"/>
		<Attribute name="scrollbarpadding" default="0,0,0,0" type="RECT" comment="滾動條的外邊距,可以讓滾動條不占滿容器,如(2,2,2,2)"/>
		<Attribute name="vscrollunit" default="30" type="INT" comment="容器的縱向滾動條滾動步長,0代表使用默認步長"/>
		<Attribute name="scrollbarfloat" default="true" type="BOOL" comment="容器的滾動條是否懸浮在子控件上面,如(true)"/>
		<Attribute name="defaultdisplayscrollbar" default="true" type="BOOL" comment="暫時無用,未開發"/>
		<Attribute name="holdend" default="false" type="BOOL" comment="是否一直保持顯示末尾位置,如(true)"/>
	</ScrollableBox>

	<ListContainerElement parent="OptionBox" notifies="暫時不寫" comment="屬性同OptionBox"  >
	</ListContainerElement>

	<Combo parent="Box" notifies="暫時不寫">
		<Attribute name="dropbox" default="" type="STRING" comment="設置彈出框的樣式,如(padding="1,1,1,1")"/>
		<Attribute name="dropboxsize" default="0,150" type="SIZE" comment="彈出框大小設置"/>
		<Attribute name="vscrollbar" default="false" type="BOOL" comment="是否使用豎向滾動條,如(true)"/>
	</Combo>	

	<ListBox parent="ScrollableBox" notifies="暫時不寫">
		<Attribute name="scrollselect" default="false" type="BOOL" comment="是否隨滾動改變選中項,如(false)"/>
	</ListBox>

	<HListBox parent="ScrollableBox" notifies="暫時不寫" comment="屬性同ListBox">
	</HListBox>

	<VListBox parent="ScrollableBox" notifies="暫時不寫" comment="屬性同ListBox">
	</VListBox>

	<TileListBox parent="ScrollableBox" notifies="暫時不寫" comment="屬性同ListBox">
	</TileListBox>


	<TreeNode parent="ListContainerElement" notifies="暫時不寫" comment="屬性同OptionBox">
	</TreeNode>

	<TreeView parent="ListBox" notifies="暫時不寫" >
		<Attribute name="indent" default="0" type="INT" comment="子控件的縮進,如(3)"/>
	</TreeView>

	<RichEdit parent="Box" notifies="setfocus killfocus timer menu return windowinit(root)">
		<Attribute name="vscrollbar" default="false" type="BOOL" comment="是否使用豎向滾動條,如(true)"/>
		<Attribute name="autovscroll" default="false" type="BOOL" comment="是否隨輸入豎向滾動,如(true)"/>
		<Attribute name="hscrollbar" default="false" type="BOOL" comment="是否使用橫向滾動條,如(true)"/>
		<Attribute name="autohscroll" default="false" type="BOOL" comment="是否隨輸入橫向滾動,如(true)"/>
		<Attribute name="wanttab" default="true" type="BOOL" comment="是否接受tab按鍵消息,如(true)"/>
		<Attribute name="wantreturnmsg" default="true" type="BOOL" comment="是否接受return按鍵消息,如(true)"/>
		<Attribute name="returnmsgwantctrl" default="true" type="BOOL" comment="是否接受ctrl+return按鍵消息,如(true)"/>
		<Attribute name="rich" default="true" type="BOOL" comment="是否使用富格式,如(true)"/>
		<Attribute name="multiline" default="true" type="BOOL" comment="是否使用多行,如(true)"/>
		<Attribute name="readonly" default="false" type="BOOL" comment="是否只讀,如(false)"/>
		<Attribute name="password" default="false" type="BOOL" comment="是否顯示密碼符,如(true)"/>
		<Attribute name="number" default="false" type="BOOL" comment="是否只允許輸入數字,如(false)"/>
		<Attribute name="align" default="left" type="STRING" comment="文字對齊方式,取值left、right、hcenter、top、vcenter、bottom,如(right)"/>
		<Attribute name="text" default="" type="STRING" comment="顯示文本,如(測試文本)"/>
		<Attribute name="font" default="-1" type="INT" comment="字體id,如(0)"/>
		<Attribute name="normaltextcolor" default="" type="STRING" comment="普通狀態文字顏色,不指定則使用默認顏色,如(blue)"/>
		<Attribute name="disabledtextcolor" default="" type="STRING" comment="禁用狀態文字顏色,不指定則使用默認顏色,如(blue)"/>
		<Attribute name="promptmode" default="false" type="BOOL" comment="是否顯示提示文字,如(true)"/>
		<Attribute name="prompttext" default="" type="STRING" comment="文本框內提示文字,當文本框text為空時顯示"/>
		<Attribute name="prompttextid" default="" type="STRING" comment="多語言功能的ID,如(TEXT_OUT)"/>
		<Attribute name="promptcolor" default="" type="STRING" comment="文本框內提示文字的顏色"/>
	</RichEdit>
</Controls>

布局類控件

原文檔的一些說明

https://github.com/netease-im/NIM_PC_UIKit/blob/master/doc/nim_duilib_layout.md

布局控件包括:BoxVBoxHBoxTabBoxTileBoxChildBoxListBoxHListBoxVListBox;LabelBoxButtonBoxOptionBoxCheckBoxBox

其中Box對應原版Duilib的Container,HBox對應HorizaontalLayout,VBox對應VerticalLayout,TabBox對應TabLayout、TileBox對應TileLayout,ChildBox對應ChildLayout

VListBox對應ListListBox、HListBox、LabelBox、ButtonBox、OptionBox、CheckBoxBox屬於新增布局,原版Duilib不存在。其中LabelBox、ButtonBox、OptionBox、CheckBoxBox布局相當於Label、Button等控件與Box控件的結合體,他們具有原控件的外觀和功能,同時也可以作為容器來使用。

Control控件布局屬性介紹:
Control是雲信Duilib的最基礎控件,也是所有其他控件的基類。首先介紹一下所有控件的通用布局屬性,這在雲信Duilib中非常頻繁被使用。這些屬性包括:margin、width、height、float、halign、valign。其中margin、width、height三個屬性在任何布局中都有效,halign、valign屬性在只有控件開啟了float屬性時才有效。Box布局把所有子控件都認為開啟了float屬性,其他布局不會。

width、height屬性
這兩個屬性用於設置控件的寬度和高度,與原版Duilib不同的是:新增加了stretch、auto兩個屬性值,控件width、height屬性默認的屬性值為stretch。當屬性值為stretch時,代表由父容器計算本控件寬或者高,並且盡量填充滿父容器;當屬性值為auto時,代表本控件會根據控件內容自動計算本控件的寬或者高(比如對於文本內容,可以文本的長度來自動設置控件的寬度;對於圖片內容,可以根據圖片的尺寸來自適應控件的尺寸),使用了auto屬性值后,對於很多要設置自身尺寸為圖片尺寸的控件來說會省去許多麻煩。

對於Label控件,width、height屬性默認的屬性值為auto,會自動根據文本內容自適應控件寬高。

對於Box等容器控件,如果width、height屬性設置為auto,容器就會根據所有子控件的尺寸來自適應自己的尺寸。很經典的例子就是雲信Demo的登錄窗口,窗口最外層布局的height屬性設置為auto,所以登錄窗口的高度是根據子控件自適應的。而所有子控件的總高度可能因為切換到注冊頁面而改變,所以這個時候登錄窗口的高度就會自動跟着改變。有了這個屬性后,就完全不需要我們通過代碼來設置登錄窗口的高度,它可以自適應高度。

margin屬性
margin屬性相當於原本Duilib中的padding屬性,也就是外邊距屬性,在做相對布局時,經常需要設置此屬性值來調整本控件與其他控件之間的邊距

float屬性
float屬性默認是關閉的,用於所浮動布局(相對於原本Duilib的絕對布局的叫法、在這里稱為浮動布局更合適)。開啟了float屬性后,控件的位置就不受父容器控件的布局功能影響了,配合halign、valign、margin三個屬性,可以做出非常靈活的布局效果。因為valign、margin屬性的加入,讓float的浮動布局功能比原版的Duilib的float絕對布局功能大大增強。

halign屬性
當開啟了float屬性,或者父容器為Box控件時,這個屬性有效。這個屬性可以指定left、center、right中的一種,作用是設置控件的橫向位置。使用了這個屬性以后,方便我們在不知道父容器具體大小的情況下,就可以指定控件的橫向位置。

valign屬性
當開啟了float屬性,或者父容器為Box控件時,這個屬性有效。這個屬性可以指定top、center、bottom中的一種,作用是設置控件的縱向位置。 halign、valign、margin三個屬性配合,可以靈活的在界面上把某個控件懸浮到某個位置。比如會話窗口中使用Box配合valign屬性屬性把aduio_capture_view、at_me_view對應的語音錄制和@me提示貼到聊天框上面

Box

Box是所有布局容器的基類,也是經常會被使用的布局。Box布局的最基本功能是:讓所有子控件依次疊加顯示出來。與原版Duilib的Container最大不同在於,他會根據子控件的margin、width、height、halign、valign屬性來定位子控件的位置,而不會自動把子控件填充滿整個Box布局(當然如果需要的話也可以填充滿)。在雲信Demo的XML中經常會看到Box配合子控件的halign、valign屬性來一起布局。

所有布局用的容器控件都擁有padding、和childmargin屬性。

padding屬性
padding屬性相當於原版Duilib中的inset屬性,也就是內邊距屬性,

childmargin屬性
childmargin屬性相當於原版Duilib中的childpadding屬性,也就是子控件之間的額外間距。各個子控件之間可以通過margin屬性設置外邊據,同時容器控件通過childmargin屬性可以指定各個子控件在排版時的額外間距。

Box控件的childmargin屬性是無效的。對於其他布局,不同的布局childmargin屬性的作用不一樣。比如對於VBox布局用於指定子控件縱向排列的額外間距,對於HBox布局用於指定子控件橫向排列的額外間距。

因為Box控件是疊加的,所以如下的布局的效果:

VBox和HBox

VBox布局對應原版Duilib的VerticalLayout,他會自動讓所有非float狀態的子控件依次縱向排列。如果子控件的height屬性指定為stretch,則會根據布局空間去自動計算子控件應有的高度。VBox布局不會影響子控件的寬度。
HBox布局對應原版Duilib的HorizaontalLayout,他會自動讓所有非float狀態的子控件依次橫向排列。如果子控件的width屬性指定為stretch,則會根據布局空間去自動計算子控件應有的寬度。HBox布局不會影響子控件的高度。
VBox

<?xml version="1.0" encoding="UTF-8"?>
<Window size="300,400" caption="0,0,0,35">
  <VBox bkcolor="bk_wnd_darkcolor">
    <HBox width="stretch" height="35" bkcolor="bk_wnd_lightcolor">
      <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>
	<VBox>
      <Label name="tooltip" text="我是一個Label" halign="center"/>      
	  <Button class="btn_global_blue_80x30" name="button" text="我是一個按鈕" halign="center"/>
	  <Label name="tooltip" text="我是一個Label" halign="center"/> 
	  <Button class="btn_global_red_80x30" name="button" text="我是一個按鈕" halign="center"/>
    </VBox>
  </VBox>
</Window>

HBox:

<?xml version="1.0" encoding="UTF-8"?>
<Window size="400,400" caption="0,0,0,35">
  <VBox bkcolor="bk_wnd_darkcolor">
    <HBox width="stretch" height="35" bkcolor="bk_wnd_lightcolor">
      <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>
      <Label name="tooltip" text="我是一個Label" halign="center"/>      
	  <Button class="btn_global_blue_80x30" name="button" text="我是一個按鈕" halign="center"/>
	  <Label name="tooltip" text="我是一個Label" halign="center"/> 
	  <Button class="btn_global_red_80x30" name="button" text="我是一個按鈕" halign="center"/>
    </HBox>
  </VBox>
</Window>

TabBox

TabBox布局對應原版Duilib的TabLayout,是一個分頁布局控件,可以包含多個頁面,並且切換顯示其中的某一個頁面。同一時間只能由一個頁面被顯示。雲信Demo主界面的各個列表頁面的切換就是使用TabBox布局

TabBox布局擁有fadeswitch、和selectedid屬性。

fadeswitch屬性
fadeswitch屬性可以指定當切換頁面時是否使用動畫效果,默認不使用動畫效果

selectedid屬性
selectedid屬性可以指定默認選中的頁面id

下面的例子,創建了兩個頁面,一個是橫向排列,零一個是縱向排列,先設置選中的id是0:

<?xml version="1.0" encoding="UTF-8"?>
<Window size="400,400" caption="0,0,0,35">
  <VBox bkcolor="bk_wnd_darkcolor">
    <HBox width="stretch" height="35" bkcolor="bk_wnd_lightcolor">
      <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>
	<TabBox name="select_tab" mouse="false" mousechild="false" selectedid="0">
		<HBox>
			  <Label name="tooltip" text="我是一個Label" halign="center"/>      
			  <Button class="btn_global_blue_80x30" name="button" text="我是一個按鈕" halign="center"/>
			  <Label name="tooltip" text="我是一個Label" halign="center"/> 
			  <Button class="btn_global_red_80x30" name="button" text="我是一個按鈕" halign="center"/>
		</HBox>
		<VBox>
			  <Label name="tooltip" text="我是一個Label" halign="center"/>      
			  <Button class="btn_global_blue_80x30" name="button" text="我是一個按鈕" halign="center"/>
			  <Label name="tooltip" text="我是一個Label" halign="center"/> 
			  <Button class="btn_global_red_80x30" name="button" text="我是一個按鈕" halign="center"/>
		</VBox>
	</TabBox>
  </VBox>
</Window>


設置選中的id是1:

TileBox

瓷磚布局
TileBox布局對應原版Duilib的TileLayout,平鋪布局可以做類似系統桌面平鋪桌面圖標的效果,雲信Demo的聯系人選擇器中每個分類的聯系人就是使用TilbeBox平鋪布局

TileBox布局擁有columns、和itemsize屬性。這兩個屬性沖突、不能同時使用

columns屬性
columns屬性可以來設置每行中包含的列數,他會自動把包含的元素從左到右從上到下按照columns屬性的設置排列起來,每行的列數是固定的。

itemsize屬性
itemsize屬性會設置每個元素所占的區域,比如容器的寬度是500,給itemsize設置為 100 x 10,那個每行就會容納5個元素,當我們拉伸了窗體讓容器寬度變為700,那么每行就會自動容納7個元素,這意味着使用這個屬性會讓每行容納的元素個數是自動可變的。

下面的示例我設置了兩列

<?xml version="1.0" encoding="UTF-8"?>
<Window size="400,400" caption="0,0,0,35">
  <VBox bkcolor="bk_wnd_darkcolor">
    <HBox width="stretch" height="35" bkcolor="bk_wnd_lightcolor">
      <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>
	<TileBox columns="2">
		<Label name="tooltip" text="我是一個Label" halign="center"/>      
		<Button class="btn_global_blue_80x30" name="button" text="我是一個按鈕" halign="center"/>
		<Label name="tooltip" text="我是一個Label" halign="center"/> 
		<Button class="btn_global_red_80x30" name="button" text="我是一個按鈕" halign="center"/>
	</TileBox>
  </VBox>
</Window>

ChildBox

ChildBox布局對應原版Duilib的ChildLayout,ChildBox布局比較少用,他的作用就是從一個XML文件中加載布局來嵌入到ChildBox布局所在的地方,設置xmlfile屬性來指定XML文件位置就可以。他的意義在於可以把繁雜的大量XML代碼分隔開。比如他和TabBox布局結合,讓TabBox布局包含5個ChildBox布局,而每個ChildBox布局分別從5個XML文件加載自己的布局文件,這樣就可以分塊化的編寫布局代碼。ChildLayout不可以識別XML中的自定義控件

ListBox、HListBox、VListBox

ListBox布局對應原版Duilib的List控件,嚴格來說他不是布局而是列表控件。ListBox、HListBox、VListBox三個都是列表控件他們的區別在於他們對子控件的排版方法不一樣。他們的排版方法與Box、HBox、VBox對應,提供了比原Duilib更豐富的List布局功能。其中最常用的還是VListBox,用於縱向列表布局.

<?xml version="1.0" encoding="UTF-8"?>
<Window size="400,400" caption="0,0,0,35">
  <VBox bkcolor="bk_wnd_darkcolor">
    <HBox width="stretch" height="35" bkcolor="bk_wnd_lightcolor">
      <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>
	<VListBox>
		<Label name="tooltip" text="我是一個Label" halign="center"/>      
		<Button class="btn_global_blue_80x30" name="button" text="我是一個按鈕" halign="center"/>
		<Label name="tooltip" text="我是一個Label" halign="center"/> 
		<Button class="btn_global_red_80x30" name="button" text="我是一個按鈕" halign="center"/>
	</VListBox>
  </VBox>
</Window>

LabelBox、ButtonBox、OptionBox、CheckBoxBox

LabelBox、ButtonBox、OptionBox、CheckBoxBox布局相當於Label、Button等控件與Box控件的結合體,他們具有原控件的外觀和功能,同時也可以作為容器來使用。

我們不應該那這幾個控件直接當作常規的容器來使用,他們只應該用來滿足一些特殊的場景。比如某些情況下我們需要一個按鈕控件,但是我們希望按鈕里面可以包含多個文本內容和多張圖片,顯然這種情況下基本的Button控件不能滿足我們的需要。如果是原版Duilib的話,我們就需要自定義一個新的控件,但是在雲信Duilib里我們可以使用ButtonBox控件,他既具有按鈕的單擊功能邏輯,又可以包含其他子控件進去。這幾個控件的存在可以增加開發效率,原本很多需要自定義控件才能解決的需求現在可以直接使用這幾個控件。

這幾個控件配合雲信Duilib新增的Event功能,可以大大增強布局能力。Event可以在XML中給控件配置一些簡單的事件處理代碼,當觸發了某個事件后自動的修改本控件的一些屬性。關於XML中Event功能的介紹可以看屬性列表以及雲信Demo。

關於帶有容器控件的控件以及Event的用法,很經典的例子就是雲信主界面用於切換好友列表的三個OptionBox控件

其中最左面的代碼會話列表的OptionBox控件的XMl代碼如下:

<OptionBox group="session_friend_tab" name="btn_friend_list" tooltiptextid="STRID_MIANWINDOW_ADDRESSBOOK" cursortype="hand">
    <Event type="select" receiver=".\select_tab" applyattribute="selectedid="1""/>    
    <Event type="unselect" receiver=".\select_tab" applyattribute="selectedid="0""/>
    <Event type="unselect" receiver=".\friend_option_icon" applyattribute="state="normal""/>
    <Event type="select" receiver=".\friend_option_icon" applyattribute="state="pushed""/>
    <Event type="select" receiver="session_or_friend_list_tabbox" applyattribute="selectedid="1""/>
    
    <TabBox name="select_tab" mouse="false" mousechild="false">
        <HBox>
            <Control normalimage="file='bk_tab_unselected.png' source='0,0,15,36' corner='5,5,5,5'"/>
            <Control width="20" normalimage="file='bk_tab_unselected.png' source='60,0,80,36' corner='5,5,5,5'"/>
            <Control normalimage="file='bk_tab_unselected.png' source='125,0,140,36' corner='5,5,5,5'"/>
        </HBox> 
        <HBox>
            <Control normalimage="file='bk_tab_selected.png' source='0,0,15,36' corner='5,5,5,5'"/>
            <Control width="20" normalimage="file='bk_tab_selected.png' source='60,0,80,36' corner='5,5,5,5'"/>
            <Control normalimage="file='bk_tab_selected.png' source='125,0,140,36' corner='5,5,5,5'"/>
        </HBox>
    </TabBox>

    <Control name="friend_option_icon" mouse="false" width="auto" height="auto" halign="center" valign="center"
             normalimage="icon_tab_user_unselected.png" pushedimage="file='icon_tab_user_selected.png'"/>
    <Button name ="unread_number" bkimage="file='../public/icon/icon_number.png' corner='8,0,8,0'" font="1" normaltextcolor="white"
            margin="60,0,0,0" halign="center" valign="center" visible="false"/>
</OptionBox>

為了達到切換功能,需要用到Option的單選功能。但是因為我們的需求需要包含選中和非選中狀態的效果,而且每種效果中涉及到多個背景圖片,同時里面還需要包含消息未讀數等界面效果,所以Option控件完全無法滿足需求。這時我們使用OptionBox控件,在里面包含了多個子控件來打到了需求的效果。同時我們為OptionBox添加了多個Event,讓他可以自動的處理選中和非選中狀態下背景圖片的切換功能。這樣做就不需要自定義控件、也不需要c++代碼來控制切換效果了。

Event

還是使用上面的代碼例子,說明下Event,下面介紹了Event的屬性,代碼是從上面控件屬性列表xml中摘抄下來的

<Events>
    <Event comment="此需要包含在某個控件標簽內使用。當包含Event標簽的控件觸發接收的消息時會動態設置接受者控件的屬性,設置為applyattribute代表的值">
        <Attribute name="type" default="" type="STRING" comment="接收的消息類型,用空格分隔多個消息,如(killfocus,完整的消息類型見duilib庫Define.h文件)"/>
        <Attribute name="receiver" default="" type="STRING" comment="接受者控件的名字,用空格分隔多個名字,如(btn_test).如果名字以“./”或者“.\開頭”,則代表接受者控件是包含Event標簽的控件的子控件,否則代表整個窗體內的某個控件"/>
        <Attribute name="applyattribute" default="" type="STRING" comment="動態設置的屬性值,可以設置多個屬性"/>
    </Event>
    <BubbledEvent comment="此需要包含在某個控件標簽內使用。當包含BubbledEvent標簽的控件或者其子控件觸發接收的消息時會動態設置接受者控件的屬性,設置為applyattribute代表的值,此標簽只能用於容器控件">
        <Attribute name="type" default="" type="STRING" comment="接收的消息類型,用空格分隔多個消息,如(killfocus,完整的消息類型見duilib庫Define.h文件)"/>
        <Attribute name="receiver" default="" type="STRING" comment="接受者控件的名字,用空格分隔多個名字,如(btn_test).如果名字以“./”或者“.\開頭”,則代表接受者控件是包含Event標簽的控件的子控件,否則代表整個窗體內的某個控件"/>
        <Attribute name="applyattribute" default="" type="STRING" comment="動態設置的屬性值,可以設置多個屬性"/>
    </BubbledEvent>
</Events>

Event的所有類型在Define.h中定義:

再次把上一節的代碼貼出來詳細說明下Event的含義,

<OptionBox group="session_friend_tab" name="btn_friend_list" tooltiptextid="STRID_MIANWINDOW_ADDRESSBOOK" cursortype="hand">
    <!--類型是select,接收控件是select_tab也就是下面的TabBox,當前控件被選中后接受控件的selectedid會被設置成1-->
    <Event type="select" receiver=".\select_tab" applyattribute="selectedid="1""/>    
    <!--類型是unselect,接收控件是select_tab也就是下面的TabBox,當前控件被選中后接受控件的selectedid會被設置成0-->
    <Event type="unselect" receiver=".\select_tab" applyattribute="selectedid="0""/>
    <!--類型是unselect,接收控件是friend_option_icon,當前控件被設置成unselect之后,接受控件的state被設置成normal-->
    <Event type="unselect" receiver=".\friend_option_icon" applyattribute="state="normal""/>
    <Event type="select" receiver=".\friend_option_icon" applyattribute="state="pushed""/>
    <Event type="select" receiver="session_or_friend_list_tabbox" applyattribute="selectedid="1""/>
    
    <TabBox name="select_tab" mouse="false" mousechild="false">
        <HBox>
            <Control normalimage="file='bk_tab_unselected.png' source='0,0,15,36' corner='5,5,5,5'"/>
            <Control width="20" normalimage="file='bk_tab_unselected.png' source='60,0,80,36' corner='5,5,5,5'"/>
            <Control normalimage="file='bk_tab_unselected.png' source='125,0,140,36' corner='5,5,5,5'"/>
        </HBox> 
        <HBox>
            <Control normalimage="file='bk_tab_selected.png' source='0,0,15,36' corner='5,5,5,5'"/>
            <Control width="20" normalimage="file='bk_tab_selected.png' source='60,0,80,36' corner='5,5,5,5'"/>
            <Control normalimage="file='bk_tab_selected.png' source='125,0,140,36' corner='5,5,5,5'"/>
        </HBox>
    </TabBox>

    <Control name="friend_option_icon" mouse="false" width="auto" height="auto" halign="center" valign="center"
             normalimage="icon_tab_user_unselected.png" pushedimage="file='icon_tab_user_selected.png'"/>
    <Button name ="unread_number" bkimage="file='../public/icon/icon_number.png' corner='8,0,8,0'" font="1" normaltextcolor="white"
            margin="60,0,0,0" halign="center" valign="center" visible="false"/>
</OptionBox>

控件

button、Label

上文示例已經用了很多了,不再贅述。

其他

https://github.com/feipeng8848/NIM_Duilib_Framework/blob/master/docs/SUMMARY.md

一些原版Duilib的布局資料 https://blog.csdn.net/zhuhongshu/article/details/38531447


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM