0%

wxWidgets入门教程之五：布局管理

发表于 更新于 分类于 Disqus：

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

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

2.使用布局控件

绝对位置

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

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

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

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

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

然而有些地方也许能够使用绝对位置去布局。例如，例如我的教程，我不想使我的例子变得太难理解，所以我经常使用绝对位置布局来解释一些主题。但是，在真正的应用程序中，程序员通常使用布局控件。

在我们的例子中，我们有一个简单的文本编辑器的骨架，如果我们缩放主窗口，wxTextCtrl这个组件的大小不会像我们预期的那样去改变。

absolute.h

1
2
3
4
5
6
7
8
9
10
11
12
13
#include <wx/wx.h>

class Absolute : public wxFrame
{
public:
    Absolute(const wxString & title);

    wxMenuBar * menubar;
    wxMenu * file;
    wxMenu * edit;
    wxMenu * help;
    wxTextCtrl * textctrl;
};

absolute.cpp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#include "absolute.h"

Absolute::Absolute(const wxString & title)
        : wxFrame(NULL, -1, title, wxPoint(-1, -1), wxSize(250, 180))
{
    wxPanel * panel = new wxPanel(this, wxID_ANY);

    menubar = new wxMenuBar;
    file = new wxMenu;
    edit = new wxMenu;
    help = new wxMenu;

    menubar->Append(file, _T("&File"));
    menubar->Append(edit, _T("&Edit"));
    menubar->Append(help, _T("&Help"));

    SetMenuBar(menubar);

    textctrl = new wxTextCtrl(panel, -1, _T(""), wxPoint(-1, -1), wxSize(250, 150));

    Centre();
}

这是一个使用绝对位置布局的例子，我们把一个wxTextCtrl组件放置在一个面板组件中。

Textctrl = new wxTextCtrl(panel, -1, _T(“”), wxPoint(-1, -1), wxSize(250, 150));

我们在wxTextCtrl组件的构造函数中完成了绝对位置布局，在我们的例子中，我们把它放置在默认的位置，指定宽度250px和高度150px。

使用布局控件

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

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

1.wxBoxSizer

2.wxStaticBoxSizer

3.wxGridSizer

4.wxFlexGridSizer

5.wxGridBagSizer

图为：调整大小之前

图为：调整大小之后

sizer.h

1
2
3
4
5
6
7
8
9
10
11
12
13
#include <wx/wx.h>

class Sizer : public wxFrame
{
public:
    Sizer(const wxString & title);

    wxMenuBar * menubar;
    wxMenu * file;
    wxMenu * edit;
    wxMenu * help;
    wxTextCtrl * textctrl;
};

sizer.cpp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#include "sizer.h"

Sizer::Sizer(const wxString & title)
     : wxFrame(NULL, -1, title, wxPoint(-1, -1), wxSize(250, 180))
{
    menubar = new wxMenuBar;
    file = new wxMenu;
    edit = new wxMenu;
    help = new wxMenu;

    menubar->Append(file, _T("&File"));
    menubar->Append(edit, _T("&Edit"));
    menubar->Append(help, _T("&Help"));
    SetMenuBar(menubar);

    textctrl = new wxTextCtrl(this, -1, _T(""), wxPoint(-1, -1), wxSize(250, 150));

    Centre();
}

wxBoxSizer

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

wxBoxSizer(int orient)
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组件周围的边框

border.h

1
2
3
4
5
6
7
#include <wx/wx.h>

class Border : public wxFrame
{
public:
    Border(const wxString & title);
};

border.cpp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#include "border.h"

Border::Border(const wxString & title)
      : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(250, 200))
{
    wxColor col1, col2;
    col1.Set(_T("#4F5049"));
    col2.Set(_T("#EDEDED"));

    wxPanel * panel = new wxPanel(this, -1);
    panel->SetBackgroundColour(col1);

    wxPanel * midPan = new wxPanel(panel, wxID_ANY);
    midPan->SetBackgroundColour(col2);

    wxBoxSizer * vbox = new wxBoxSizer(wxVERTICAL);
    vbox->Add(midPan, 1, wxEXPAND | wxALL, 20);
    panel->SetSizer(vbox);

    Centre();
}

在这个例子中，我们创建了两个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

接下来我们把两个按钮放置到窗口的右下角：

align.h

1
2
3
4
5
6
7
#include <wx/wx.h>

class Align : public wxFrame
{
public:
    Align(const wxString & title);
};

align.cpp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#include "align.h"

Align::Align(const wxString & title)
     : wxFrame(NULL, -1, title, wxPoint(-1, -1), wxSize(300, 200))
{
    wxPanel * panel = new wxPanel(this, -1);

    wxBoxSizer * vbox = new wxBoxSizer(wxVERTICAL);
    wxBoxSizer * hbox1 = new wxBoxSizer(wxHORIZONTAL);
    wxBoxSizer * hbox2 = new wxBoxSizer(wxHORIZONTAL);

    wxButton * ok = new wxButton(panel, wxID_ANY, _T("OK"));
    wxButton * cancel = new wxButton(panel, wxID_ANY, _T("Cancel"));

    hbox1->Add(new wxPanel(panel, wxID_ANY));
    hbox2->Add(ok);
    hbox2->Add(cancel);

    vbox->Add(hbox1, 1, wxEXPAND);
    vbox->Add(hbox2, 0, wxALIGN_RIGHT | wxRIGHT | wxBOTTOM, 10);
    panel->SetSizer(vbox);

    Centre();
}

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

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

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

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

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

Go To Class

在接下来的例子中，我们将介绍几个重要的观念。

gotoclass.h

1
2
3
4
5
6
7
#include <wx/wx.h>

class GotoClass : public wxFrame
{
public:
    GotoClass(const wxString & title);
};

gotoclass.cpp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
#include "gotoclass.h"

GotoClass::GotoClass(const wxString & title)
         : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(450, 400))
{
    wxPanel * panel = new wxPanel(this, wxID_ANY);

    /**< Main sizer */
    wxBoxSizer * vbox = new wxBoxSizer(wxVERTICAL);

    /**< hbox1 */
    wxBoxSizer * hbox1 = new wxBoxSizer(wxHORIZONTAL);
    //(*
    wxStaticText * st1 = new wxStaticText(panel, wxID_ANY, _T("CLass Name"));
    hbox1->Add(st1, 0, wxRIGHT, 8);
    wxTextCtrl * tc = new wxTextCtrl(panel, wxID_ANY);
    hbox1->Add(tc, 1);
    vbox->Add(hbox1, 0, wxEXPAND | wxLEFT | wxRIGHT | wxTOP, 10);
    vbox->Add(-1, 10); // 10 pix space
    //*)

    /**< hbox2 */
    wxBoxSizer * hbox2 = new wxBoxSizer(wxHORIZONTAL);
    //(*
    wxStaticText * st2 = new wxStaticText(panel, wxID_ANY, _T("Matching classes"));
    hbox2->Add(st2, 0);
    vbox->Add(hbox2, 0, wxLEFT | wxTOP, 10);
    vbox->Add(-1, 10);
    //*)

    /**< hbox3 */
    wxBoxSizer * hbox3 = new wxBoxSizer(wxHORIZONTAL);
    //(*
    wxTextCtrl * tc2 = new wxTextCtrl(panel, wxID_ANY, _T(""),
                                      wxDefaultPosition, wxDefaultSize, wxTE_MULTILINE);
    hbox3->Add(tc2, 1, wxEXPAND);
    vbox->Add(hbox3, 1, wxLEFT | wxRIGHT | wxEXPAND, 10);
    vbox->Add(-1, 25);
    //*)

    /**< hbox4 */
    wxBoxSizer * hbox4 = new wxBoxSizer(wxHORIZONTAL);
    //(*
    wxCheckBox * cb1 = new wxCheckBox(panel, wxID_ANY, _T("Case Sensitive"));
    hbox4->Add(cb1);
    wxCheckBox * cb2 = new wxCheckBox(panel, wxID_ANY, _T("Nexted Classes"));
    hbox4->Add(cb2, 0, wxLEFT, 10);
    wxCheckBox * cb3 = new wxCheckBox(panel, wxID_ANY, _T("Non-Project Classes"));
    hbox4->Add(cb3, 0, wxLEFT, 10);
    vbox->Add(hbox4, 0, wxLEFT, 10);
    vbox->Add(-1, 25);
    //*)

    /**< hbox5 */
    wxBoxSizer * hbox5 = new wxBoxSizer(wxHORIZONTAL);
    //(*
    wxButton * btn1 = new wxButton(panel, wxID_ANY, _T("OK"));
    hbox5->Add(btn1, 0);
    wxButton * btn2 = new wxButton(panel, wxID_ANY, _T("Close"));
    hbox5->Add(btn2, 0, wxLEFT | wxBOTTOM, 5);
    vbox->Add(hbox5, 0, wxALIGN_RIGHT | wxRIGHT, 10);
    //*)

    panel->SetSizer(vbox);
}

这是一个综合使用wxBoxSizer的例子，布局得比较紧凑，我们创建了一个垂直布局控件，然后我们把5个水平布局控件添加进去。

Vbox->Add(hbox3, 1, wxLEFT | wxRIGHT | wxEXPAND, 10);
Vbox->Add(-1, 25);

我们已经知道我们可以使用flag参数和border参数控制控件之间的间距。但是有一点很不自然，在Add()方法中我们只能给所有的方向指定同一个边界宽度。在我们的例子中，我们在右和左边缘给出10px空白，但是我们不能给底部指定25px的空白，我们所能做的只是给底部10px空白或者省略wxBOTTOM给底部0px空白。所以我们需要另一种重载的Add()方法添加一些额外的空白。

Vbox->Add(hbox5, 0, wxALIGN_RIGHT | wxRIGHT, 10);

我们把两个按钮放置到窗体的右下角，我们是如何做到的？要达到这种目的，需要注意三样东西，proportion、align flag、wxEXPAND flag，proportion参数一定要等于0，这样两个按钮就不会改变它们的大小，当我们缩放我们的主窗口的时候我们不能指定wxEXPAND标识。最后，我们必须指定wxALIGN_RIGHT标识，这个水平布局控件会从主窗体的左边扩展到右边，所以如果我们指定wxALIGN_RIGHT标识，两个按钮会被放置在右边，这恰好是我们期望的。

wxGridSizer

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

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

在构造函数中我们指定网格的行数和列数和每个格子的垂直、水平间距。

在我们的例子中我们建立了一个计算器的框架，这是一个介绍wxGridSizer的完美的例子。

gridsizer.h

1
2
3
4
5
6
7
8
9
10
11
#include <wx/wx.h>

class GridSizer : public wxFrame
{
public:
    GridSizer(const wxString & title);

    wxBoxSizer * sizer;
    wxGridSizer * gs;
    wxTextCtrl * display;
};

gridsizer.cpp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
#include "gridsizer.h"

GridSizer::GridSizer(const wxString & title)
         : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(270, 220))
{
    sizer = new wxBoxSizer(wxVERTICAL);

    display = new wxTextCtrl(this, wxID_ANY, _T(""), wxDefaultPosition, wxDefaultSize, wxTE_RIGHT);

    sizer->Add(display, 0, wxEXPAND | wxTOP | wxBOTTOM, 4);

    gs = new wxGridSizer(5, 4, 3, 3);

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

    gs->Add(new wxButton(this, -1, _T("7")), 0, wxEXPAND);
    gs->Add(new wxButton(this, -1, _T("8")), 0, wxEXPAND);
    gs->Add(new wxButton(this, -1, _T("9")), 0, wxEXPAND);
    gs->Add(new wxButton(this, -1, _T("/")), 0, wxEXPAND);
    gs->Add(new wxButton(this, -1, _T("4")), 0, wxEXPAND);
    gs->Add(new wxButton(this, -1, _T("5")), 0, wxEXPAND);
    gs->Add(new wxButton(this, -1, _T("6")), 0, wxEXPAND);
    gs->Add(new wxButton(this, -1, _T("*")), 0, wxEXPAND);
    gs->Add(new wxButton(this, -1, _T("1")), 0, wxEXPAND);
    gs->Add(new wxButton(this, -1, _T("2")), 0, wxEXPAND);
    gs->Add(new wxButton(this, -1, _T("3")), 0, wxEXPAND);
    gs->Add(new wxButton(this, -1, _T("-")), 0, wxEXPAND);
    gs->Add(new wxButton(this, -1, _T("0")), 0, wxEXPAND);
    gs->Add(new wxButton(this, -1, _T(".")), 0, wxEXPAND);
    gs->Add(new wxButton(this, -1, _T("=")), 0, wxEXPAND);
    gs->Add(new wxButton(this, -1, _T("+")), 0, wxEXPAND);

    sizer->Add(gs, 1, wxEXPAND);
    SetSizer(sizer);

    SetMinSize(wxSize(270, 220));

    Centre();
}

在我们的例子中，我们为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或许同样可以完成这个任务，但是这样会影响美观，因为每一个网格的大小都一样会显得很不自然。

flexgridsizer.h

1
2
3
4
5
6
7
#include <wx/wx.h>

class FlexGridSizer : public wxFrame
{
public:
    FlexGridSizer(const wxString & title);
};

flexgridsizer.cpp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#include "flexgridsizer.h"

FlexGridSizer::FlexGridSizer(const wxString & title)
             : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(270, 220))
{
    wxPanel * panel = new wxPanel(this, wxID_ANY);

    wxBoxSizer * hbox = new wxBoxSizer(wxHORIZONTAL);

    wxFlexGridSizer * fgs = new wxFlexGridSizer(3, 2, 9, 25);

    wxStaticText * thetitle = new wxStaticText(panel, wxID_ANY, _T("Title"));
    wxStaticText * author   = new wxStaticText(panel, wxID_ANY, _T("Author"));
    wxStaticText * review   = new wxStaticText(panel, wxID_ANY, _T("Review"));

    wxTextCtrl * tc1 = new wxTextCtrl(panel, wxID_ANY);
    wxTextCtrl * tc2 = new wxTextCtrl(panel, wxID_ANY);
    wxTextCtrl * tc3 = new wxTextCtrl(panel, wxID_ANY, _T(""),
                                      wxDefaultPosition, wxDefaultSize, wxTE_MULTILINE);

    fgs->Add(thetitle);
    fgs->Add(tc1, 1, wxEXPAND);
    fgs->Add(author);
    fgs->Add(tc2, 1, wxEXPAND);
    fgs->Add(review, 1, wxEXPAND);
    fgs->Add(tc3, 1, wxEXPAND);

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

    hbox->Add(fgs, 1, wxALL | wxEXPAND, 15);
    panel->SetSizer(hbox);
    Centre();
}

在我们的例子中我们创建了一个简单的对话框，它可以用来把数据插入到数据库。

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

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

fgs->Add(thetitle);

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

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

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