5、wxWidgets布局管理

布局管理

一个典型的应用程序由各种各样的组件组成，这些组件被放置在容器组件内。一个程序员必须要管理应用程序的界面布局，这不是一个简单的工作，在wxWidgets里面我们有两个选择：

　　1.使用绝对位置放置组件

　　2.使用布局控件

绝对位置

程序员以像素单位去指定一个组件的位置和大小，当你使用绝对位置时，你会明白以下几点：

　　1.当你缩放主窗口时，组件的位置和大小不会改变。

　　2.程序在不同的平台上看起来不同（蹩脚的）。

　　3.在你的程序中更改字体也许会破坏布局。

　　4.如果你决定改变你的布局，你必须要完全重做你的布局，这将是单调乏味且浪费时间的工作。

【实例】

下面是一个使用绝对位置布局的例子：

main.h

 1 #include <wx/wx.h>
 2 //定义主框架类
 3 class MyFrame : public wxFrame
 4 {
 5 public:
 6     MyFrame(const wxString & title);
 7     //定义菜单条
 8     wxMenuBar * menubar;
 9     wxMenu * file;
10     wxMenu * edit;
11     wxMenu * help;
12     //定义一个静态文本框
13     wxTextCtrl * textctrl;
14 };
15 //定义应用程序类
16 class MyApp : public wxApp
17 {
18 public:
19     virtual bool OnInit();
20 };

main.cpp

 1 #include "main.h"
 2 //主框架类的实现
 3 MyFrame::MyFrame(const wxString & title)
 4         : wxFrame(NULL, -1, title, wxPoint(-1, -1), wxSize(250, 180))
 5 {
 6     //定义一个面板容器
 7     wxPanel * panel = new wxPanel(this, wxID_ANY);
 8     //添加菜单条
 9     menubar = new wxMenuBar;
10     file = new wxMenu;
11     edit = new wxMenu;
12     help = new wxMenu;
13 
14     menubar->Append(file, _T("&File"));
15     menubar->Append(edit, _T("&Edit"));
16     menubar->Append(help, _T("&Help"));
17 
18     SetMenuBar(menubar);
19     //向面板添加一个静态文本框，使用wxPoint（-1， -1）对静态文本框绝对位置布局
20     textctrl = new wxTextCtrl(panel, -1, _T(""), wxPoint(-1, -1), wxSize(250, 150));
21 
22     Centre();
23 }
24 //声明应用程序
25 IMPLEMENT_APP(MyApp)
26 
27 bool MyApp::OnInit()
28 {
29     MyFrame * myFrame = new MyFrame(_T("MyFrame"));
30     myFrame->Show(true);
31 
32     return true;
33 }

展示效果：

调整大小之前：

调整大小之后：

 

可以看出使用绝对位置布局的静态文本框，不会随着整体框架大小的改变而改变。

使用布局控件

wxWidgets里面的布局控件处理关于组件的位置的所有问题。

我们能够在以下这些布局控件中选择：

1.wxBoxSizer

2.wxStaticBoxSizer

3.wxGridSizer

4.wxFlexGridSizer

5.wxGridBagSizer

【实例】

下面是一个静态文本框会随着主框架的大小而改变大小的实例。

main.h

 1 #include <wx/wx.h>
 2 /*
 3     使用绝对位置进行布局
 4 */
 5 //定义主框架类
 6 class MyFrame : public wxFrame
 7 {
 8 public:
 9     MyFrame(const wxString & title);
10     //定义菜单条
11     wxMenuBar * menubar;
12     wxMenu * file;
13     wxMenu * edit;
14     wxMenu * help;
15     //定义一个静态文本框
16     wxTextCtrl * textctrl;
17 };
18 //定义应用程序类
19 class MyApp : public wxApp
20 {
21 public:
22     virtual bool OnInit();
23 };

main.cpp

 1 #include "main.h"
 2 //主框架类的实现
 3 MyFrame::MyFrame(const wxString & title)
 4         : wxFrame(NULL, -1, title, wxPoint(-1, -1), wxSize(250, 180))
 5 {
 6     //添加菜单条
 7     menubar = new wxMenuBar;
 8     file = new wxMenu;
 9     edit = new wxMenu;
10     help = new wxMenu;
11 
12     menubar->Append(file, _T("&File"));
13     menubar->Append(edit, _T("&Edit"));
14     menubar->Append(help, _T("&Help"));
15 
16     SetMenuBar(menubar);
17     //向面板添加一个静态文本框
18     textctrl = new wxTextCtrl(this, -1, _T(""), wxPoint(-1, -1), wxSize(250, 150));
19 
20     Centre();
21 }
22 //声明应用程序
23 IMPLEMENT_APP(MyApp)
24 
25 bool MyApp::OnInit()
26 {
27     MyFrame * myFrame = new MyFrame(_T("MyFrame"));
28     myFrame->Show(true);
29 
30     return true;
31 }

效果展示

调整大小之前：

 

调整大小之后：

 

wxBoxSizer

这个布局控件允许我们把多个组件放在一行或者一列上，我们能在一个布局控件中放入另一个布局控件。这种设计使得我们能够设计非常复杂的布局。

1 wxBoxSizer(int orient)
2 wxSIzerItem * Add(wxWindow * window, int proportion = 0, int flag = 0, int border = 0)

　　参数orient可以是wxVERTICAL或者wxHORIZONTAL。通过Add()方法添加组件到wxBoxSizer内，为了能够更好的理解它，我们需要看它的参数。

　　参数proportion定义了组件在指定的排列方向内自由缩放的比例，让我们假定有三个按钮，它们的proportion分别是0、1、2它们被添加进一个水平布局控，proportion = 0的按钮始终都不会改变，proportion = 2的按钮会比proportion = 1的按钮在水平尺寸上多缩放一倍的尺寸。

　　有了flag参数你能够进一步设置wxBoxSizer内的组件的行为，我们能够控制两个组件之间的边界距离，我们可以在两个组件之间填充一些空白像素。为了显示边框，我们需要定义哪个方向上的边框需要使用。我们能够使用|运算符把它们组合起来，例如wxLEFT | wxBOTTOM，我们能够下面这些标志中选择：

1.wxLEFT
2.wxRIGHT
3.wxBOTTOM
4.wxTOP
5.wxALL

 【实例】一个wxPanel组件周围的边框

main.h

 1 #include <wx/wx.h>
 2 /*
 3     使用wxBoxSizer进行布局
 4 */
 5 //定义主框架类
 6 class MyFrame : public wxFrame
 7 {
 8 public:
 9     MyFrame(const wxString & title);
10 };
11 //定义应用程序类
12 class MyApp : public wxApp
13 {
14 public:
15     virtual bool OnInit();
16 };

main.cpp

 1 #include "main.h"
 2 //主框架类的实现
 3 MyFrame::MyFrame(const wxString & title)
 4         : wxFrame(NULL, -1, title, wxPoint(-1, -1), wxSize(250, 180))
 5 {
 6     //颜色定义
 7     wxColor col1, col2;
 8     col1.Set(_T("#4F50F9"));
 9     col2.Set(_T("#EDEDED"));
10     //定义底层面板，并为面板设置背景色
11     wxPanel * panel = new wxPanel(this, -1);
12     panel->SetBackgroundColour(col1);
13     //定义顶层面板，并为面板设置背景色
14     wxPanel * midPan = new wxPanel(panel, wxID_ANY);
15     midPan->SetBackgroundColour(col2);
16     //定义wxBoxSizer容器，布局方式为垂直布局
17     wxBoxSizer * vbox = new wxBoxSizer(wxVERTICAL);
18     //将midpan加载到vbox中
19     vbox->Add(midPan, 1, wxEXPAND | wxALL, 30);
20     //将wxBoxSizer容器放入Panel面板中
21     panel->SetSizer(vbox);
22 
23     Centre();
24 }
25 //声明应用程序
26 IMPLEMENT_APP(MyApp)
27 
28 bool MyApp::OnInit()
29 {
30     MyFrame * myFrame = new MyFrame(_T("MyFrame"));
31     myFrame->Show(true);
32 
33     return true;
34 }

　　在这个例子中，我们创建了两个panels，第二个panel在其自身周围有一圈空白。

Box->Add(midPan, 1, wxEXPAND | wxALL, 20);

　　我们在midPan这个panel周围放置了宽度为20px的边框，wxALL表示边框适用于全部四个方向。如果我们使用wxEXPAND标识，这个组件会在允许的边框内扩展到最大。

最后，我们也可以定义组件的对齐标识，我们使用以下标识去定义：

1.wxALIGN_LEFT
2.wxALIGN_RIGHT
3.wxALIGN_TOP
4.wxALIGN_BOTTOM
5.wxALIGN_CENTER_VERTICAL
6.wxALIGN_CENTER_HORIZONTAL
7.wxALIGN_CENTER

【实例】组件对齐

main.h

 1 #include <wx/wx.h>
 2 /*
 3     使用wxBoxSizer进行布局，组件的对齐方式
 4 */
 5 //定义主框架类
 6 class MyFrame : public wxFrame
 7 {
 8 public:
 9     MyFrame(const wxString & title);
10 };
11 //定义应用程序类
12 class MyApp : public wxApp
13 {
14 public:
15     virtual bool OnInit();
16 };

main.cpp

 1 #include "main.h"
 2 //主框架类的实现
 3 MyFrame::MyFrame(const wxString & title)
 4         : wxFrame(NULL, -1, title, wxPoint(-1, -1), wxSize(250, 180))
 5 {
 6     //颜色定义
 7     wxColor col1;
 8     col1.Set(_T("#4F50F9"));
 9 
10     //定义底层面板，并为面板设置背景色
11     wxPanel * panel = new wxPanel(this, -1);
12     panel->SetBackgroundColour(col1);
13 
14     //定义了一个垂直布局控件，两个水平布局控件
15     wxBoxSizer * vbox = new wxBoxSizer(wxVERTICAL);
16     wxBoxSizer * hbox1 = new wxBoxSizer(wxHORIZONTAL);
17     wxBoxSizer * hbox2 = new wxBoxSizer(wxHORIZONTAL);
18     //定义两个按钮
19     wxButton * ok = new wxButton(panel, wxID_ANY, _T("OK"));
20     wxButton * cancel = new wxButton(panel, wxID_ANY, _T("Cancel"));
21     //在水平布局控件hbox1中，新建了一个空白面板
22     hbox1->Add(new wxPanel(panel, wxID_ANY));
23     //在水平布局控件hbox2中，加入了两个按钮
24     hbox2->Add(ok);
25     hbox2->Add(cancel);
26     //将两个水平布局控件加载到垂直布局控件中
27     vbox->Add(hbox1, 1, wxEXPAND);
28     //水平布局控件hbox2右对齐，且与底部。右侧的间隔为10像素（注意这些单词的大小写，大小写敏感）
29     vbox->Add(hbox2, 0, wxALIGN_RIGHT | wxRIGHT | wxBOTTOM, 10);
30     //将垂直布局控件vbox加载到panel中
31     panel->SetSizer(vbox);
32 
33     //将wxBoxSizer容器放入Panel面板中
34     panel->SetSizer(vbox);
35 
36     Centre();
37 }
38 //声明应用程序
39 IMPLEMENT_APP(MyApp)
40 
41 bool MyApp::OnInit()
42 {
43     MyFrame * myFrame = new MyFrame(_T("MyFrame"));
44     myFrame->Show(true);
45 
46     return true;
47 }

　　在这个实例中，我们创建了三个布局控件，一个垂直控件和两个水平控件。我们把这两个水平布局控件放置到垂直布局控件中。

1 Hbox->Add(new wxPanel(panel, wxID_ANY));
2 Vbox->Add(hbox, 1, wxEXPAND);

　　我们把一个wxPanel放置在第一个水平控件中，我们把缩放因子设置为1并且设置了wxEXPAND标识，这样做这个布局控件就会占据除了hbox2之外的所有空间。

1 Vbox->Add(hbox2, 0, wxALIGN_RIGHT | wxRIGHT | wxBOTTOM, 10);

　　我们把两个按钮放置在hbox2这个控件中，在hbox2中的控件是右对齐排列的，而且我们在这两个按钮的底部和右边放置了宽度为10px的空白元素。

wxGridSizer

　　wxGridSizer把控件布局在一个格子中，每一个格子都有相同的大小。

1 wxGridSizer(int rows, int cols, int vgap, int hgap);

　　在构造函数中我们指定网格的行数和列数和每个格子的垂直、水平间距。在我们的例子中我们建立了一个计算器的框架，这是一个介绍wxGridSizer的完美的例子。

main.h

 1 #include <wx/wx.h>
 2 //定义主框架类
 3 class GridSizer : public wxFrame
 4 {
 5 public:
 6     GridSizer(const wxString & title);
 7 
 8     wxBoxSizer * sizer;
 9     wxGridSizer * gs;
10     wxTextCtrl * display;
11 };
12 
13 //定义应用程序类
14 class MyApp : public wxApp
15 {
16 public:
17     virtual bool OnInit();
18 };

main.cpp

 1 #include "main.h"
 2 
 3 //主框架类的实现
 4 GridSizer::GridSizer(const wxString & title)
 5          : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(270, 220))
 6 {
 7     sizer = new wxBoxSizer(wxVERTICAL);//垂直布局控件wxBoxSizer
 8     //静态文本框，用于显示数据
 9     display = new wxTextCtrl(this, wxID_ANY, _T(""), wxDefaultPosition, wxDefaultSize, wxTE_RIGHT);
10     //将静态文本框，加载到wxBoxSizer中
11     sizer->Add(display, 0, wxEXPAND | wxTOP | wxBOTTOM, 4);
12     //定义一个wxGridSizer控件，5行 4列  垂直间隔为3 水平间隔为3
13     gs = new wxGridSizer(5, 4, 3, 3);
14     //按照每行4个子组件，先wxGridSizer中添加内容
15     gs->Add(new wxButton(this, -1, _T("Cls")), 0, wxEXPAND);
16     gs->Add(new wxButton(this, -1, _T("Bck")), 0, wxEXPAND);
17     gs->Add(new wxStaticText(this, -1, _T("")), 0, wxEXPAND);
18     gs->Add(new wxButton(this, -1, _T("Close")), 0, wxEXPAND);
19 
20     gs->Add(new wxButton(this, -1, _T("7")), 0, wxEXPAND);
21     gs->Add(new wxButton(this, -1, _T("8")), 0, wxEXPAND);
22     gs->Add(new wxButton(this, -1, _T("9")), 0, wxEXPAND);
23     gs->Add(new wxButton(this, -1, _T("/")), 0, wxEXPAND);
24 
25     gs->Add(new wxButton(this, -1, _T("4")), 0, wxEXPAND);
26     gs->Add(new wxButton(this, -1, _T("5")), 0, wxEXPAND);
27     gs->Add(new wxButton(this, -1, _T("6")), 0, wxEXPAND);
28     gs->Add(new wxButton(this, -1, _T("*")), 0, wxEXPAND);
29 
30     gs->Add(new wxButton(this, -1, _T("1")), 0, wxEXPAND);
31     gs->Add(new wxButton(this, -1, _T("2")), 0, wxEXPAND);
32     gs->Add(new wxButton(this, -1, _T("3")), 0, wxEXPAND);
33     gs->Add(new wxButton(this, -1, _T("-")), 0, wxEXPAND);
34 
35     gs->Add(new wxButton(this, -1, _T("0")), 0, wxEXPAND);
36     gs->Add(new wxButton(this, -1, _T(".")), 0, wxEXPAND);
37     gs->Add(new wxButton(this, -1, _T("=")), 0, wxEXPAND);
38     gs->Add(new wxButton(this, -1, _T("+")), 0, wxEXPAND);
39 
40     //将wxGridSizer加载到wxBoxSizer中
41     sizer->Add(gs, 1, wxEXPAND);
42     //将wxBoxSizer加载到主框架中
43     this->SetSizer(sizer);
44     //设置主框架的最小尺寸
45     this->SetMinSize(wxSize(270, 220));
46 
47     Centre();
48 }
49 //声明应用程序
50 IMPLEMENT_APP(MyApp)
51 //应用程序类初始化函数
52 bool MyApp::OnInit()
53 {
54     GridSizer * gs = new GridSizer(_T("GridSizer"));
55     gs->Show(true);
56 
57     return true;
58 }

　　　　在我们的例子中，我们为wxFrame建立一个垂直布局控件，我们把一个静态文本和一个网格布局控件放进垂直布局控件。注意我们是如何在Bck和Close按钮之间添加空白的，我们只是简单的添加了一个空的wxStaticText，这是一个很常用的技巧。

gs->Add(new wxButton(this, -1, _T("Cls")), 0, wxEXPAND);

　　我们调用Add()方法许多次，组件被顺序放置进网格布局控件，第一行被放满，第二行，第三行同样。

效果展示：

wxFlexGridSizer

　　这个布局控件和wxGridSizer有点相似，它同样把组件布局到有两个尺寸的格子中，但是它添加了一些灵活性，wxGridSizer的格子都是相同大小的，在wxFlexSizer中所有的格子在一行上有相同的高度，一列上有相同的宽度，但是所有的行和列不一定有相同的高度和宽度。

wxFlexGridSize(int rows, int cols, int vgap, int hgap);

　　rows和cols指定了布局控件中的行数和列数。vgap和hgap在组件之间两个方向上添加了一些空白。

　　许多时候程序员需要开发一个对话框用来进行数据录入或修改，wxFlexGridSIzer很适合这个任务，一个程序员可以使用这个布局控件轻松的创建一个对话框，使用wxGridSizer或许同样可以完成这个任务，但是这样会影响美观，因为每一个网格的大小都一样会显得很不自然。

 【实例】

main.h

 1 #include <wx/wx.h>
 2 //定义主框架类
 3 class FlexGridSizer : public wxFrame
 4 {
 5 public:
 6     FlexGridSizer(const wxString & title);
 7 };
 8 
 9 //定义应用程序类
10 class MyApp : public wxApp
11 {
12 public:
13     virtual bool OnInit();
14 };

main.cpp

 1 #include "main.h"
 2 //主框架类的实现
 3 FlexGridSizer::FlexGridSizer(const wxString & title)
 4              : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(270, 220))
 5 {
 6     //定义一个面板
 7     wxPanel * panel = new wxPanel(this, wxID_ANY);
 8     //定义一个wxBoxSizer水平布局控件
 9     wxBoxSizer * hbox = new wxBoxSizer(wxHORIZONTAL);
10     //定义一个wxFlexGridSizer布局控件，行数为3， 列数为2， 垂直间隔为9， 水平间隔为25
11     wxFlexGridSizer * fgs = new wxFlexGridSizer(3, 2, 9, 25);
12 
13     //定义三个静态文本
14     wxStaticText * thetitle = new wxStaticText(panel, wxID_ANY, _T("Title :"));
15     wxStaticText * author   = new wxStaticText(panel, wxID_ANY, _T("Author:"));
16     wxStaticText * review   = new wxStaticText(panel, wxID_ANY, _T("Review:"));
17     //定义三个文本框
18     wxTextCtrl * tc1 = new wxTextCtrl(panel, wxID_ANY);
19     wxTextCtrl * tc2 = new wxTextCtrl(panel, wxID_ANY);
20     wxTextCtrl * tc3 = new wxTextCtrl(panel, wxID_ANY, _T(""),
21                                       wxDefaultPosition, wxDefaultSize, wxTE_MULTILINE);
22 
23     //将静态文版和文本框加载到wxFlexGridSizer布局控件中
24     fgs->Add(thetitle);
25     fgs->Add(tc1, 1, wxEXPAND);
26     fgs->Add(author);
27     fgs->Add(tc2, 1, wxEXPAND);
28     fgs->Add(review, 1, wxEXPAND);
29     fgs->Add(tc3, 1, wxEXPAND);
30 
31     //将第三行和第二列设置为可扩展的
32     fgs->AddGrowableRow(2, 1);
33     fgs->AddGrowableCol(1, 1);
34 
35     //将wxFlexGridSizer布局控件加载到wxBoxSizer水平布局控件中
36     hbox->Add(fgs, 1, wxALL | wxEXPAND, 15);
37     //将水平布局控件加载到Panel中
38     panel->SetSizer(hbox);
39     Centre();
40 }
41 
42 IMPLEMENT_APP(MyApp)
43 
44 bool MyApp::OnInit()
45 {
46     FlexGridSizer * fgs = new FlexGridSizer(_T("FlexGridSizer"));
47     fgs->Show(true);
48 
49     return true;
50 }

效果展示：

1 wxBoxSizer * hbox = new wxBoxSizer(wxHORIZONTAL);
2 Hbox->Add(fgs, 1, wxALL | wxEXPAND, 15);

　　我们创建了一个水平布局控件，用来在组件的边界制造出15px的空白。

fgs->Add(thetitle);

　　我们像使用wxGridSizer一样把组件添加进布局控件。

1 fgs->AddGrowableRow(2, 1);
2 fgs->AddGrowableCol(1, 1);

　　我们让第三行和第二列成为可扩展的，这样当主窗口缩放时，第三个多行文本控件就可以自动扩展。前两个文本控件会在水平方向自动扩展，第三个会在两个方向自动扩展，我们必须使用wxEXPAND确保它们正常工作。