使用的網易版本的duilib:

https://github.com/netease-im/NIM_Duilib_Framework

重寫demo中basic.xml頁面的布局，熟悉布局語法，類似于html語言，這里模仿百度網盤的UI：

<?xml version="1.0" encoding="UTF-8"?> <Window size="662,442" caption="0,0,0,35"> <VBox><VBox bkcolor="bk_wnd_darkcolor"><HBox width="stretch" height="35" bkcolor=""><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 = "60"><Control /><Label bkimage = "logo.png"/><Control /></HBox><HBox width="stretch" bkcolor="white"><Control width="70"/><VBox valign="center" halign="center"><Control height = "40"/><Label name="tooltip" text="掃一掃登錄"/><Control height = "20"/><Label name="tooltip" text="使用百度APP掃碼登錄" normaltextcolor="blue"/><Control height = "20"/><Label bkimage = "QrCode.png" /><Control height = "20"/><Button text ="刷新二維碼" name = "refresh_code" height = "30" width = "100" bordercolor="blue" bordersize="1" normaltextcolor="blue"/></VBox><Control width = "30"/><VBox valign="center" halign="center"><Control height = "40"/><HBox width="stretch" bkcolor="white"><Label text="賬號密碼登錄"/><Control width = "30"/><Label text="短信快捷登錄>" normaltextcolor="blue" /></HBox><RichEdit name="name" multiline="false" bordersize="1" bordercolor="blue" height = "30" width = "220"autohscroll="true"/><Control height = "10"/><RichEdit name="password" multiline="false" bordersize="1" bordercolor="blue" height = "30" width = "220" autohscroll="true" password="true"/><Control height = "10"/><HBox width="stretch" bkcolor="white"><CheckBox /><Label text="記住密碼" /><Control width = "10"/><CheckBox /><Label text="自動登錄" /></HBox><Button text ="登錄" name = "login" height = "30" width = "220" bkcolor="blue" normaltextcolor="white"/><Control height = "10"/><Label text="注冊賬號" normaltextcolor="blue"/><Control /></VBox> <Control width="50"/></HBox></VBox></VBox></Window>

通過實現GetSkinFile接口告訴render去渲染basic.xml頁面：

std::wstring BasicForm::GetSkinFile() {return L"basic.xml"; }

在之前xml中定義的登錄button名字為login,代碼中通過名字找到對象，然后綁定按鈕事件：

void BasicForm::InitWindow() {this->SetShadowAttached(true);/* Show settings menu */ui::Button* msg = dynamic_cast<ui::Button*>(FindControl(L"login"));msg->AttachClick([this](ui::EventArgs* args) {ui::RichEdit* edit_name = dynamic_cast<ui::RichEdit*>(FindControl(L"name"));ui::RichEdit* edit_password = dynamic_cast<ui::RichEdit*>(FindControl(L"password"));auto str_name = edit_name->GetText();auto str_pass = edit_password->GetText();if (str_name == str_pass){MessageBoxA(0, "ok", "", 0);}return true;}); }

最后實現的效果：

總結

以上是生活随笔為你收集整理的duilib基本布局学习（模仿百度网盘）及绑定按钮事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。