轉自 https://blog.csdn.net/thanklife/article/details/80091826
不知不覺中使用Duilib已經兩周有余了，在使用過程中遇到了很多問題，最終自己也有了一丟丟的認識見解，特記錄並分享。
控件
控件及繼承關系圖
【Window】窗口
【Control】除Window外其他所有組件都繼承自Control
布局：
【Container】
【VerticalLayout】垂直布局：其內元素按照豎直方式排列
【HorizontalLayout】水平布局：其內元素按照水平方式排列
【TileLayout】平鋪布局：例如360工具箱。屬性columns[列數,如(4)]與itemsize[子項固定大小，如(128,128)]不能同時使用。
【TabLayout】標簽頁，配合Option使用。
【ChildLayout】
功能控件：
【ActiveX】
【WebBrowser】瀏覽器
【Label】標簽
【Button】按鈕
【Text】文本
【Progress】--【Slider】進度條--進度條按鈕
【Edit】輸入框，支持showhtml。
【RichEdit】輸入框，不支持showhtml。支持多行，直接打回車即可。
【Option】標簽
【ScrollBar】滾動條
【GifAnimGif】動畫
【Combo】下拉框
【List--ListHeader】--【ListHeaderItem】--【ListLabelElement】--【ListTextElement】--【ListContainerElement】列表
【TreeView】--【TreeNode】樹
屬性
詳細屬性查看官方Duilib文件夾內的"屬性列表.xml"。
【name】控件名字，同一窗口內必須唯一。建議命名格式"控件類型名稱",例如:"btnClose";"optionMain"。
【bkcolor】背景顏色。如：0xFFFFFFFF。一般的顏色RGB表示都是六位，這里的八位中的前兩位為FF，后面六位與普通RGB顏色編碼相同。RGB顏色參考
【bkcolor2】背景漸變色2,和bkcolor配合使用,如(0xFFFFFF00)。
【bkcolor3】背景漸變色3,和bkcolor、bkcolor2配合使用,如(0xFFFF00FF)"。
【bkimage】背景圖片,如(bk.bmp或file='aaa.jpg' res='' restype='0' dest='0,0,0,0' source='0,0,0,0' corner='0,0,0,0' mask='#FF0000' fade='255' hole='false' xtiled='false' ytiled='false')。
【width】控件預設的寬度，如(100)。
【height】控件預設的高度，如(30)。
【text】顯示文本,如(測試文本)。
【tooltip】鼠標懸浮提示,如(請在這里輸入你的密碼)。
【enabled】是否可以響應用戶操作,如(true)。
【mouse】本控件是否可以響應鼠標操作,如(true)。
【mousechild】本控件的子控件是否可以響應用戶操作,如(true)。
【visible】是否可見，如(true)。
【menu】是否需要右鍵菜單。
【float】【pos】是否采用絕對定位以及位置(左上右下)。如float="true" pos="10,10,10,10"。只有float為true時，pos才有效，只有float為true，無pos時內容不顯示。更多用法見補充的布局技巧
【padding】外邊距,如(2,2,2,2)。邊距不屬於此控件。
【inset】容器的內邊距,如(2,2,2,2)。邊距屬於此控件。
【bordercolor】邊框顏色,如(0xFF000000)。
【focusbordercolor】獲得焦點時邊框的顏色,如(0xFFFF0000)。
【align】文字對齊方式。在option中可以取left、right、center、top、button，如(center)。
【textpadding】文字顯示的邊距,如(2,2,2,2)。
【endellipsis】句末顯示不全是否使用...代替,如(true)"/>
【showhtml】是否使用類html富文本繪制,如(false)。
【vscrollbar】是否使用豎向滾動條,如(true)。只有內容超出容器后才會顯示滾動條。
自己需要先定義vscrollbar滾動條
-
<Default name="VScrollBar" value="" />
-
【hscrollbar】是否使用橫向滾動條,如(true)。只有內容超出容器后才會顯示滾動條。
-
<Default name="HScrollBar" value="" />
-
【bkimage】【normalimage】【hotimage】【focusedimage】【pushedimage】【selectedimage】【disabledimage】
【textcolor】【hottextcolor】【focusedtextcolor】【pushedtextcolor】【selectedtextcolor】【disabledtextcolor】
普通狀態--鼠標懸浮狀態--獲得焦點時狀態--鼠標按下狀態--選中狀態--禁用狀態
【foreimage】option，process，slider具有的前景圖片。
實例
時間控件
<DateTime name="DateTimeDemo1" bkcolor="#FFE2E5EA"/>
按鈕
<Button name="closebtn" tooltip="關閉" float="true" pos="44,5,74,24" width="28" normalimage=" file='SysBtn\CloseNormal.bmp' " hotimage=" file='SysBtn\CloseFocus.bmp' " pushedimage=" file='SysBtn\CloseFocus.bmp' "/>
進度條
-
<Progress name="ProgressDemo1" text="Progress" width="100" height="20" foreimage="Progress/progress_fore.png" min="0" max="100" value="50" hor="true" align="center"/>
-
-
<Slider name="SliderDemo1" width="100" height="18" thumbsize="12,20" bkimage="file='Slider/slider_fore.bmp' mask='0xffff00ff'" thumbimage="file='Slider/SliderBar.png' mask='0xffffffff'"/>
下拉框
-
<Combo name="ComboDemo1" width="100" height="30" normalimage="file='ComboBox/Combo_nor.bmp'" hotimage="file='ComboBox/Combo_over.bmp' " pushedimage="file='ComboBox/Combo_over.bmp' ">
-
<ListLabelElement text="zdy" selected="true"/>
-
<ListLabelElement text="zzz"/>
-
</Combo>
編輯框
<Edit text="姜糖不語" font="2" textcolor="#FF00a0e9" bordersize="2" bordercolor="#FF000000" focusbordercolor="#FFFF0000"/>
圖片
<Container width="30" height="30" bkimage="file='SysBtn\setting_o.png' dest='10,5,30,25'"/>
橫線
<Control height="1" bkcolor="#FF000000"/>
導航欄與標簽頁
-
//需要配合邏輯代碼實現
-
<Option name="OptionDemo1" text="1" bkcolor="#FFC5D4F2" group="tabDemo" selected="true"/>
-
<Option name="OptionDemo2" text="1" bkcolor="#FFFFDC78" group="tabDemo"/>
-
<Option name="OptionDemo3" text="1" bkcolor="#FFBECEA1" group="tabDemo"/>
-
-
<TabLayout name="tabTest" bkcolor="#FFB2D1E3">
-
<HorizontalLayout>
-
<Label text="Option1" bkcolor="#FFC5D4F2" align="center" />
-
</HorizontalLayout>
-
<HorizontalLayout>
-
<Text text="Option2" bkcolor="#FFFFDC78" align="center" />
-
</HorizontalLayout>
-
<HorizontalLayout>
-
<Button text="Option3" bkcolor="#FFBECEA1" align="center" />
-
</HorizontalLayout>
-
</TabLayout>
樹
注意那個按鈕的實現。
-
<Default name="TreeNode" value="width="9999""/>
-
<TreeView vscrollbar="true" >
-
<TreeNode height="24" folderattr="normalimage="file='SysBtn/list_icon_e.png' dest='6,6,18,18'" selectedimage="file='SysBtn/list_icon_f.png' dest='6,6,18,18'"" >
-
<Text text="錯誤項" textcolor="#FFFF0000" font="3" float="true" pos="20,0,9999,9999" />
-
<TreeNode text="xxx" >
-
<Button text="修復" textcolor="#FF1ddb6e" width="50"/>
-
</TreeNode>
-
</TreeNode>
-
</TreeView>
控件響應消息類型
| 消息 | 說明 | Sender |
|---|---|---|
| click | 鼠標點擊 | CButtonUI |
| dropdown | 下拉顯示 | CComboUI |
| headerclick | 點擊列標題 | CListHeaderItemUI |
| itemactivate | CListElementUI、CListContainerElementUI | |
| itemclick | 單擊選項 | CListLabelElementUI、CListContainerElementUI |
| itemselect | 選擇選項 | CComboUI、CListUI |
| killfocus | 失去焦點 | CControlUI |
| link | CTextUI、CListTextElementUI | |
| menu | CButtonUI、CControlUI | |
| return | 回車 | CEditWnd、CRichEditUI |
| scroll | 滾動 | CScrollBarUI |
| selectchanged | 變更選項 | COptionUI |
| setfocus | 獲得焦點 | CControlUI |
| showactivex | CActiveXUI | |
| textchanged | 文本被改變 | CEditWnd |
| tabselect | 標簽頁被選中 | CTabLayoutUI |
| timer | CControlUI | |
| valuechanged | 值發生變化 | CSliderUI |
| windowinit | 窗體初始化 |
部分方法實現
-
SetText();
-
SetColor();
-
…
控件創建
增加控件：pNode->Add(pText);
TreeNode增加TreeNode：pNode->AddAt(pNodeLeaf, 0);
標簽頁
相關xml：
-
<!--導航欄-->
-
<HorizontalLayout height="113" bkcolor="#FF267FFC" bkcolor2="#FF0782FB">
-
<HorizontalLayout width="920">
-
<Option name="AdSafe1" text="凈網首頁" align="right" textcolor="#FFFFFFFF" font="1" textpadding="0,0,20,0" normalimage="file='Option\Option1m.png' dest='36,36,76,76'" hotimage="file='Option\Option1w.png' dest='36,36,76,76'" pushedimage="file='Option\Option1w.png' dest='36,36,76,76'" selectedimage="file='Option\Option1w.png' dest='36,36,76,76'" group="AdSafeOption" selected="true"/>
-
<Option name="AdSafe2" text="深度優化" align="right" textcolor="#FFFFFFFF" font="1" textpadding="0,0,20,0" normalimage="file='Option\Option2m.png' dest='36,36,76,76'" hotimage="file='Option\Option2w.png' dest='36,36,76,76'" pushedimage="file='Option\Option2w.png' dest='36,36,76,76'" selectedimage="file='Option\Option2w.png' dest='36,36,76,76'" group="AdSafeOption" />
-
<Option name="AdSafe3" text="彈窗抓取" align="right" textcolor="#FFFFFFFF" font="1" textpadding="0,0,20,0" normalimage="file='Option\Option3m.png' dest='36,36,76,76'" hotimage="file='Option\Option3w.png' dest='36,36,76,76'" pushedimage="file='Option\Option3w.png' dest='36,36,76,76'" selectedimage="file='Option\Option3w.png' dest='36,36,76,76'" group="AdSafeOption" />
-
<Option name="AdSafe4" text="攔截記錄" align="right" textcolor="#FFFFFFFF" font="1" textpadding="0,0,20,0" normalimage="file='Option\Option4m.png' dest='36,36,76,76'" hotimage="file='Option\Option4w.png' dest='36,36,76,76'" pushedimage="file='Option\Option4w.png' dest='36,36,76,76'" selectedimage="file='Option\Option4w.png' dest='36,36,76,76'" group="AdSafeOption" />
-
<Option name="AdSafe5" text="移動凈網版" align="right" textcolor="#FFFFFFFF" font="1" textpadding="0,0,20,0" normalimage="file='Option\Option5m.png' dest='32,36,62,76'" hotimage="file='Option\Option5w.png' dest='32,36,62,76'" pushedimage="file='Option\Option5w.png' dest='32,36,62,76'" selectedimage="file='Option\Option5w.png' dest='32,36,62,76'" group="AdSafeOption" />
-
</HorizontalLayout>
-
<HorizontalLayout />
-
</HorizontalLayout>
-
<!--窗體-->
-
<TabLayout name="AdSafeContent" bkcolor="#FFFFFFFF">
-
<!-- <ChildLayout xmlfile="PageOne.xml" />
-
<ChildLayout xmlfile="PageTwo.xml" />
-
<ChildLayout xmlfile="PageThree.xml" />
-
<ChildLayout xmlfile="PageFour.xml" />
-
<ChildLayout xmlfile="PageFive.xml" /> -->
-
<Include source="PageOne.xml" />
-
<Include source="PageTwo.xml" />
-
<Include source="PageThree.xml" />
-
<Include source="PageFour.xml" />
-
<Include source="PageFive.xml" />
-
</TabLayout>
相關代碼片段：
-
if (msg.sType == _T("selectchanged"))
-
{
-
CDuiString strName = msg.pSender->GetName();
-
CTabLayoutUI* pControl = static_cast<CTabLayoutUI*>(m_PaintManager.FindControl(_T("AdSafeContent")));
-
if (strName == _T("AdSafe1"))
-
{
-
pControl->SelectItem(0);
-
}
-
if (strName == _T("AdSafe2"))
-
{
-
pControl->SelectItem(1);
-
}
-
if (strName == _T("AdSafe3"))
-
{
-
pControl->SelectItem(2);
-
}
-
if (strName == _T("AdSafe4"))
-
{
-
pControl->SelectItem(3);
-
}
-
if (strName == _T("AdSafe5"))
-
{
-
pControl->SelectItem(4);
-
}
-
}
-
Combo
相關xml:
-
<Combo name="comboUpdateFrequency" width="60" height="30" normalimage="file='ComboBox/Combo_nor.bmp' corner='5,2,30,2'" hotimage="file='ComboBox/Combo_over.bmp' corner='5,2,30,2'" pushedimage="file='ComboBox/Combo_over.bmp' corner='5,2,30,2'" >
-
<ListLabelElement name="listDay" text=" 每天" selected="true"/>
-
<ListLabelElement name="listWeek" text=" 每周" />
-
<ListLabelElement name="listMonth" text=" 每月" />
-
</Combo>
相關代碼片段：
-
void SetUpdateFrequency(int iUpdateFrequency)
-
{
-
CComboUI* pComboUpdateFrequency = static_cast<CComboUI*>(m_PaintManager.FindControl(_T("comboUpdateFrequency")));
-
pComboUpdateFrequency->SetInternVisible(true);
-
if (iUpdateFrequency == 0)
-
{
-
pComboUpdateFrequency->SelectItem(0);
-
}
-
else if (iUpdateFrequency == 1)
-
{
-
pComboUpdateFrequency->SelectItem(1);
-
}
-
else if (iUpdateFrequency == 2)
-
{
-
pComboUpdateFrequency->SelectItem(2);
-
}
-
}
-
補充
陰影實現
在WinMain入口函數內添加
-
CWndShadow::Initialize(hInstance);
-
在窗口類內定義一個成員變量
CWndShadow m_WndShadow;
在初始化窗口InitWindow函數內部進行實現
-
m_WndShadow.Create(m_hWnd);
-
m_WndShadow.SetSize(3);
-
m_WndShadow.SetDarkness(200);
-
//m_WndShadow.SetColor(0x0AFF00);
-
m_WndShadow.SetPosition(0, 0);
-
關於【ChildLayout】
作用就是從一個xml文件中加載布局來嵌入到ChildLayout布局所在的地方，使用這個布局一般只需要指定xmlfile屬性來設置xml文件位置就可以了。他的意義在於可以把繁雜的大量xml代碼分隔開。比如他和TabLayout布局結合，讓TabLayout布局包含5個ChildLayout布局，而每個ChildLayout布局分別從5個xml文件加載自己的布局文件，這樣就可以分塊化的編寫布局代碼。
實際上有個比他更好用的標簽，就是Include標簽，Include不屬於布局，但他的作用在布局方面非常類似ChildLayout，指定他的Source屬性到某個xml文件就可以了。相對ChildLayout，Include的優點是可以自動識別自定義控件，而ChildLayout不可以！
布局技巧
1.一般是垂直布局，水平布局嵌套使用。
2.使用【inset】屬性和【padding】。【inset】的邊框依舊屬於控件內部，而【padding】的邊框不屬於控件。
3.使用float。float="0.5,0.5,0.5,0.5" pos="-10,-10,10,10"。在上一層控件的正中間。距離中間點左上右下都是10的矩形。
float="0.1,0.3,0.2,0.4" pos="0,0,0,0"。占據上一層控件的水平0.1-0.2，垂直0.3-0.4的區域。
關於在邏輯代碼中SetPos無效的問題。
1.設置控件的Pos的時候控件必須已經Add到了某個Contain中，否則SetPos無效
2.如果一定想在之前設置的話，那么請使用SetAttribute ，轉Duilib ApplyAttributeList和SetPos陷阱
Combo不顯示值的問題
需要pCombo->SetInternVisible(true); 具體實例見上面的combo實例
RECT類型示例
-
RECT rc;
-
rc.left = 20;
-
rc.top = 0;
-
rc.right = 9999;
-
rc.bottom = 9999;
-
CTextUI* pText = new CTextUI;
-
pText->SetFloat(true);
-
pText->SetPos(rc);
-
TreeNode的bug
如果直接在TreeNode設置文字，那么textcolor屬性無效，需要使用
itemattr="textcolor="#FFFF0000" font="3""
但是此屬性在鼠標懸浮后失效（如果是黑色的無影響），目前為深入研究解決方案。所以推薦采用TreeNode嵌套Text實現。
不顯示邊框陰影
經過個人使用發現：window必須roundcorner屬性才能實現陰影。
-
<Window size="920,600" mininfo="920,600" roundcorner="5,5" caption="0,0,0,30" sizebox="4,4,4,4" >
-
</Window>
-
關於ini文件的讀寫以及一個坑
相對路徑設置如下將跟cpp文件在同一目錄
-
#define inisrc TEXT(".//config.ini")
-
使用方式
-
int iCloseStatus = GetPrivateProfileInt(TEXT("CloseStatus"), TEXT("status"), 1, inisrc);
-
int iUpdateFrequency = GetPrivateProfileInt(TEXT("Update"), TEXT("frequency"), 1, inisrc);
-
WritePrivateProfileString(TEXT("CloseStatus"), TEXT("status"), _T("0"), inisrc);
-
WritePrivateProfileString(TEXT("Update"), TEXT("frequency"), _T("0"), inisrc);
-
相關文件【config.ini】內容
-
[
CloseStatus]
-
status=
0
-
[
Update]
-
frequency=
0
實現效果圖
作者：靜候那一米陽光
鏈接：https://www.jianshu.com/p/4474f7a9b8b6
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。