第四章 duilib库布局

       Duilib库包含6个布局以及含有布局的控件类，如下图所示：

各个布局之间可以互相嵌套，从而构造出更复杂的布局。

下面详细讲解6大布局

Container布局

     Container布局是其它布局或含有布局特性控件的基类，在实际项目中很少使用，一般只是用它来构造更高级布局。Container布局中的控件会叠加在一起，填充整个布局。

      现举一个例子说明Container布局用法：

下载地址：https://download.csdn.net/download/junqiand/10431087

#include 
#include 

using namespace DuiLib;

class LoginWnd : public WindowImplBase
{
protected:
	virtual CDuiString GetSkinFolder() override
	{
		return _T("");
	}

	virtual CDuiString GetSkinFile() override
	{
		return _T("cover.xml");
	}

	virtual LPCTSTR GetWindowClassName(void) const override
	{
		return _T("LoginWnd");
	}
};

int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow)
{
	CPaintManagerUI::SetInstance(hInstance);

	LoginWnd loginWnd;
	loginWnd.Create(NULL, _T("LoginWnd"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE);
	loginWnd.CenterWindow();
	loginWnd.ShowModal();

	return 0;
}

运行结果图：

说明：

1. Window窗口属性请参见下图，更详细的请查看duilib安装文件夹下的《属性列表.xml》

2.  为了实现横向居中对齐，最外层中加了3个控件，其中的Container控件是占位控件，类似于QT中的spacer控件。

3.  为了实现纵向居中对齐，中加了3个控件，其中的Container控件是占位控件

4.  为了将3张图叠加在一起，用了Container布局。其中，bk_logo_light.png水平和纵向都拉升了。Bk_logo_image保持原状，纵向位置居中。Bk_logo_text保持原状，左上角坐标位置调整。

HorizontalLayout布局

水平布局中的控件会从左到右水平占位，如下图所示：

示例代码如下：


	
		
		
		
	


#include 
#include 

using namespace DuiLib;

class LoginWnd : public WindowImplBase
{
protected:
	virtual CDuiString GetSkinFolder() override
	{return _T("");}

	virtual CDuiString GetSkinFile() override
	{return _T("horizontalLayout.xml");}

	virtual LPCTSTR GetWindowClassName(void) const override
	{return _T("horizontalLayout");}
};

int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow)
{
	CPaintManagerUI::SetInstance(hInstance);
	LoginWnd loginWnd;
	loginWnd.Create(NULL, _T("horizontalLayout"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE);
	loginWnd.CenterWindow();
	loginWnd.ShowModal();

	return 0;
}

VerticalLayout布局

垂直布局中的控件会从上到下垂直占位，如下图所示：

	
		
		
		
	


#include 
#include 

using namespace DuiLib;

class LoginWnd : public WindowImplBase
{
protected:
	virtual CDuiString GetSkinFolder() override
	{return _T("");}

	virtual CDuiString GetSkinFile() override
	{return _T("verticalLayout.xml");}

	virtual LPCTSTR GetWindowClassName(void) const override
	{return _T("verticalLayout");}
};

int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow)
{
	CPaintManagerUI::SetInstance(hInstance);
	LoginWnd loginWnd;
	loginWnd.Create(NULL, _T("verticalLayout"), UI_WNDSTYLE_FRAME, WS_EX_WINDOWEDGE);
	loginWnd.CenterWindow();
	loginWnd.ShowModal();

	return 0;
}

水平垂直混合布局例子