# wxWidgets 中的布局管理 > 原文： [http://zetcode.com/gui/wxwidgets/layoutmanagement/](http://zetcode.com/gui/wxwidgets/layoutmanagement/) 典型的應用由各種小部件組成。 這些小部件放置在容器小部件內。 程序員必須管理應用的布局。 這不是一件容易的事。 在 wxWidgets 中，我們有兩個選擇： * 絕對定位。 * 大小調整器。 ## 絕對定位 程序員以像素為單位指定每個小部件的位置和大小。 使用絕對定位時，我們必須了解以下幾點： * 如果我們調整窗口大小，則小部件的大小和位置不會改變。 * 在各種平臺上，應用看起來有所不同（通常很差）。 * 在我們的應用中更改字體可能會破壞布局。 * 如果我們決定更改布局，則必須完全重做您的布局，這既繁瑣又耗時。 在某些情況下，例如在簡單的教程中，我們可能會使用絕對定位。 我們不想讓示例太難，所以我們經常使用絕對定位來解釋某個主題。 但是大多數情況下，在現實世界的程序中，程序員使用大小調整器。 在我們的示例中，我們有一個簡單的文本編輯器框架。 如果我們調整窗口大小，則`wxTextCtrl`的大小不會像我們期望的那樣改變。 `absolute.h` ```cpp #include <wx/wx.h> #include <wx/menu.h> class Absolute : public wxFrame { public: Absolute(const wxString& title); wxMenuBar *menubar; wxMenu *file; wxMenu *edit; wxMenu *help; wxTextCtrl *textctrl; }; ``` `absolute.cpp` ```cpp #include "absolute.h" Absolute::Absolute(const wxString& title) : wxFrame(NULL, -1, title, wxDefaultPosition, wxSize(350, 250)) { wxPanel *panel = new wxPanel(this, -1); menubar = new wxMenuBar; file = new wxMenu; edit = new wxMenu; help = new wxMenu; menubar->Append(file, wxT("&File")); menubar->Append(edit, wxT("&Edit")); menubar->Append(help, wxT("&Help")); SetMenuBar(menubar); textctrl = new wxTextCtrl(panel, -1, wxT(""), wxDefaultPosition, wxSize(250, 150), wxTE_MULTILINE); } ``` `main.h` ```cpp #include <wx/wx.h> class MyApp : public wxApp { public: virtual bool OnInit(); }; ``` `main.cpp` ```cpp #include "main.h" #include "absolute.h" IMPLEMENT_APP(MyApp) bool MyApp::OnInit() { Absolute *absolute = new Absolute(wxT("Absolute")); absolute->Show(true); return true; } ``` 本示例使用絕對定位。 我們將`wxTextCtrl`小部件放置在面板小部件上。 ```cpp textctrl = new wxTextCtrl(panel, -1, wxT(""), wxDefaultPosition, wxSize(250, 150), wxTE_MULTILINE); ``` 我們在`wxTextCtrl`小部件的構造器中進行絕對定位。 在我們的情況下，我們為小部件提供默認位置。 寬度為 250 像素，高度為 150 像素。  圖：調整大小之前  圖：調整大小之后 調整窗口大小時，文本控件的大小不會更改。 ## 使用大小調整器 wxWidgets 中的大小調整器確實解決了所有這些問題，我們通過絕對定位提到了這些問題。 我們可以在這些大小調整器中進行選擇。 * `wxBoxSizer` * `wxStaticBoxSizer` * `wxGridSizer` * `wxFlexGridSizer` * `wxGridBagSizer`  圖：調整大小之前  圖：調整大小之后 `sizer.h` ```cpp #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` ```cpp #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, wxT("&File")); menubar->Append(edit, wxT("&Edit")); menubar->Append(help, wxT("&Help")); SetMenuBar(menubar); textctrl = new wxTextCtrl(this, -1, wxT(""), wxPoint(-1, -1), wxSize(250, 150)); Centre(); } ``` `main.h` ```cpp #include <wx/wx.h> class MyApp : public wxApp { public: virtual bool OnInit(); }; ``` `main.cpp` ```cpp #include "main.h" #include "sizer.h" IMPLEMENT_APP(MyApp) bool MyApp::OnInit() { Sizer *sizer = new Sizer(wxT("Sizer")); sizer->Show(true); return true; } ``` `wxTextCtrl`放置在`wxFrame`小部件內。 `wxFrame`小部件具有特殊的內置大小調整器。 我們只能在`wxFrame`容器中放入一個小部件。 子窗口小部件占據了所有空間，邊框，菜單，工具欄和狀態欄未分配該空間。 ## `wxBoxSizer` 這個 sizer 使我們能夠將幾個小部件放在一行或一列中。 我們可以將另一個調整器放到現有的調整器中。 這樣，我們可以創建非常復雜的布局。 ```cpp wxBoxSizer(int orient) wxSizerItem* Add(wxWindow* window, int proportion = 0, int flag = 0, int border = 0) ``` 方向可以是`wxVERTICAL`或`wxHORIZONTAL`。 通過`Add()`方法將小部件添加到`wxBoxSizer`中。 為了理解它，我們需要查看它的參數。 比例參數定義控件在定義的方向上如何變化的比例。 假設我們有比例為 0、1 和 2 的樹按鈕。它們被添加到水平`wxBoxSizer`中。 比例為 0 的按鈕完全不會改變。 在水平方向上比例為 2 的按鈕的變化比比例為 1 的按鈕大兩倍。 使用`flag`參數，您可以進一步在`wxBoxSizer`中配置小部件的行為。 我們可以控制小部件之間的邊界。 我們在小部件之間添加一些像素間距。 為了應用邊框，我們需要定義要使用邊框的邊。 我們可以將它們與`|`運算符，例如`wxLEFT | wxBOTTOM`結合使用。 我們可以在這些標志之間進行選擇： * `wxLEFT` * `wxRIGHT` * `wxBOTTOM` * `wxTOP` * `wxALL`  圖：面板周圍的邊框 `border.h` ```cpp #include <wx/wx.h> class Border : public wxFrame { public: Border(const wxString& title); }; ``` `border.cpp` ```cpp #include "border.h" Border::Border(const wxString& title) : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(250, 200)) { wxColour col1, col2; col1.Set(wxT("#4f5049")); col2.Set(wxT("#ededed")); wxPanel *panel = new wxPanel(this, -1); panel->SetBackgroundColour(col1); wxBoxSizer *vbox = new wxBoxSizer(wxVERTICAL); wxPanel *midPan = new wxPanel(panel, wxID_ANY); midPan->SetBackgroundColour(col2); vbox->Add(midPan, 1, wxEXPAND | wxALL, 20); panel->SetSizer(vbox); Centre(); } ``` `main.h` ```cpp #include <wx/wx.h> class MyApp : public wxApp { public: virtual bool OnInit(); }; ``` `main.cpp` ```cpp #include "main.h" #include "border.h" IMPLEMENT_APP(MyApp) bool MyApp::OnInit() { Border *border = new Border(wxT("Border")); border->Show(true); return true; } ``` 在此示例中，我們創建兩個面板。 第二個面板周圍有一些空間。 ```cpp vbox->Add(midPan, 1, wxEXPAND | wxALL, 20); ``` 我們在`midPan`面板周圍放置了 20 像素的邊框。 `wxALL`標志將邊框大小應用于所有四個側面。 如果我們使用`wxEXPAND`標志，則該小部件將使用分配給它的所有空間。 最后，我們還可以定義小部件的對齊方式。 我們使用以下標志來實現： * `wxALIGN_LEFT` * `wxALIGN_RIGHT` * `wxALIGN_TOP` * `wxALIGN_BOTTOM` * `wxALIGN_CENTER_VERTICAL` * `wxALIGN_CENTER_HORIZONTAL` * `wxALIGN_CENTER` 假設我們要在窗口的右下方放置兩個按鈕。 `align.h` ```cpp #include <wx/wx.h> class Align : public wxFrame { public: Align(const wxString& title); }; ``` `align.cpp` ```cpp #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, -1, wxT("Ok")); wxButton *cancel = new wxButton(panel, -1, wxT("Cancel")); hbox1->Add(new wxPanel(panel, -1)); vbox->Add(hbox1, 1, wxEXPAND); hbox2->Add(ok); hbox2->Add(cancel); vbox->Add(hbox2, 0, wxALIGN_RIGHT | wxRIGHT | wxBOTTOM, 10); panel->SetSizer(vbox); Centre(); } ``` `main.h` ```cpp #include <wx/wx.h> class MyApp : public wxApp { public: virtual bool OnInit(); }; ``` `main.cpp` ```cpp #include "main.h" #include "align.h" IMPLEMENT_APP(MyApp) bool MyApp::OnInit() { Align *align = new Align(wxT("Align")); align->Show(true); return true; } ``` 我們創建三個大小調整器。 一臺垂直分級機和兩臺水平分級機。 我們將這兩個水平大小調整器放到垂直大小調整器中。 ```cpp hbox1->Add(new wxPanel(panel, -1)); vbox->Add(hbox1, 1, wxEXPAND); ``` 我們將`wxPanel`放入第一個水平縮放器中。 我們將比例設置為`1`并設置一個`wxEXPAND`標志。 這樣，大小調整器將占據`hbox2`以外的所有空間。 ```cpp vbox->Add(hbox2, 0, wxALIGN_RIGHT | wxRIGHT | wxBOTTOM, 10); ``` 我們已將按鈕放入`hbox2`大小調整器中。 `hbox2`右對齊，我們還在按鈕的底部和右側留了一些空間。  圖：對齊按鈕 ## `GotoClass` 在下面的示例中，我們介紹了幾個重要的想法。 `gotoclass.h` ```cpp #include <wx/wx.h> class GotoClass : public wxFrame { public: GotoClass(const wxString& title); }; ``` `gotoclass.cpp` ```cpp #include "gotoclass.h" GotoClass::GotoClass(const wxString& title) : wxFrame(NULL, -1, title, wxPoint(-1, -1), wxSize(450, 400)) { wxPanel *panel = new wxPanel(this, -1); wxBoxSizer *vbox = new wxBoxSizer(wxVERTICAL); wxBoxSizer *hbox1 = new wxBoxSizer(wxHORIZONTAL); wxStaticText *st1 = new wxStaticText(panel, wxID_ANY, wxT("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); wxBoxSizer *hbox2 = new wxBoxSizer(wxHORIZONTAL); wxStaticText *st2 = new wxStaticText(panel, wxID_ANY, wxT("Matching Classes")); hbox2->Add(st2, 0); vbox->Add(hbox2, 0, wxLEFT | wxTOP, 10); vbox->Add(-1, 10); wxBoxSizer *hbox3 = new wxBoxSizer(wxHORIZONTAL); wxTextCtrl *tc2 = new wxTextCtrl(panel, wxID_ANY, wxT(""), wxPoint(-1, -1), wxSize(-1, -1), wxTE_MULTILINE); hbox3->Add(tc2, 1, wxEXPAND); vbox->Add(hbox3, 1, wxLEFT | wxRIGHT | wxEXPAND, 10); vbox->Add(-1, 25); wxBoxSizer *hbox4 = new wxBoxSizer(wxHORIZONTAL); wxCheckBox *cb1 = new wxCheckBox(panel, wxID_ANY, wxT("Case Sensitive")); hbox4->Add(cb1); wxCheckBox *cb2 = new wxCheckBox(panel, wxID_ANY, wxT("Nested Classes")); hbox4->Add(cb2, 0, wxLEFT, 10); wxCheckBox *cb3 = new wxCheckBox(panel, wxID_ANY, wxT("Non-Project Classes")); hbox4->Add(cb3, 0, wxLEFT, 10); vbox->Add(hbox4, 0, wxLEFT, 10); vbox->Add(-1, 25); wxBoxSizer *hbox5 = new wxBoxSizer(wxHORIZONTAL); wxButton *btn1 = new wxButton(panel, wxID_ANY, wxT("Ok")); hbox5->Add(btn1, 0); wxButton *btn2 = new wxButton(panel, wxID_ANY, wxT("Close")); hbox5->Add(btn2, 0, wxLEFT | wxBOTTOM , 5); vbox->Add(hbox5, 0, wxALIGN_RIGHT | wxRIGHT, 10); panel->SetSizer(vbox); Centre(); } ``` `main.h` ```cpp #include <wx/wx.h> class MyApp : public wxApp { public: virtual bool OnInit(); }; ``` `main.cpp` ```cpp #include "main.h" #include "gotoclass.h" IMPLEMENT_APP(MyApp) bool MyApp::OnInit() { GotoClass *gotoclass = new GotoClass(wxT("GotoClass")); gotoclass->Show(true); return true; } ``` 這是使用`wxBoxSizer`的復雜示例。 布局僵硬。 我們創建一個垂直大小調整器。 然后，我們將五個水平大小調整器放入其中。 ```cpp vbox->Add(hbox3, 1, wxLEFT | wxRIGHT | wxEXPAND, 10); vbox->Add(-1, 25); ``` 我們已經知道可以通過組合`flag`參數和`border`參數來控制小部件之間的距離。 但是有一個真正的約束。 在`Add()`方法中，我們只能為所有給定的邊指定一個邊框。 在我們的示例中，我們在右側和左側分別設置了 10 像素。 但是我們不能給底部 25 像素。 我們可以做的是在底部加上 10 像素或 0 像素。 如果我們省略`wxBOTTOM`。 因此，如果我們需要不同的值，則可以添加一些額外的空間。 使用`Add()`方法，我們也可以插入小部件和空間。 ```cpp vbox->Add(hbox5, 0, wxALIGN_RIGHT | wxRIGHT, 10); ``` 我們將兩個按鈕放在窗口的右側。 我們該怎么做呢？ 實現這一點很重要的三件事：比例，對齊標志和`wxEXPAND`標志。 比例必須為零。 調整窗口大小時，按鈕不應更改其大小。 我們一定不要指定`wxEXPAND`標志。 按鈕僅占用已分配給它的區域。 最后，我們必須指定`wxALIGN_RIGHT`標志。 水平大小調整器從窗口的左側擴展到右側。 因此，如果我們指定`wxALIGN_RIGHT`標志，則按鈕將放置在右側。 正是我們想要的。  圖：`GotoClass` ## `wxGridSizer` `wxGridSizer`在二維表中布置小部件。 表格中的每個單元格都具有相同的大小。 ```cpp wxGridSizer(int rows, int cols, int vgap, int hgap) ``` 在構造器中，我們指定表中的行數和列數。 以及我們細胞之間的垂直和水平空間。 在我們的示例中，我們創建了計算器的骨架。 這是`wxGridSizer`的完美示例。 `gridsizer.h` ```cpp #include <wx/wx.h> class GridSizer : public wxFrame { public: GridSizer(const wxString& title); wxMenuBar *menubar; wxMenu *file; wxBoxSizer *sizer; wxGridSizer *gs; wxTextCtrl *display; }; ``` `gridsizer.cpp` ```cpp #include "gridsizer.h" GridSizer::GridSizer(const wxString& title) : wxFrame(NULL, -1, title, wxPoint(-1, -1), wxSize(270, 220)) { menubar = new wxMenuBar; file = new wxMenu; SetMenuBar(menubar); sizer = new wxBoxSizer(wxVERTICAL); display = new wxTextCtrl(this, -1, wxT(""), wxPoint(-1, -1), wxSize(-1, -1), wxTE_RIGHT); sizer->Add(display, 0, wxEXPAND | wxTOP | wxBOTTOM, 4); gs = new wxGridSizer(4, 4, 3, 3); gs->Add(new wxButton(this, -1, wxT("Cls")), 0, wxEXPAND); gs->Add(new wxButton(this, -1, wxT("Bck")), 0, wxEXPAND); gs->Add(new wxStaticText(this, -1, wxT("")), 0, wxEXPAND); gs->Add(new wxButton(this, -1, wxT("Close")), 0, wxEXPAND); gs->Add(new wxButton(this, -1, wxT("7")), 0, wxEXPAND); gs->Add(new wxButton(this, -1, wxT("8")), 0, wxEXPAND); gs->Add(new wxButton(this, -1, wxT("9")), 0, wxEXPAND); gs->Add(new wxButton(this, -1, wxT("/")), 0, wxEXPAND); gs->Add(new wxButton(this, -1, wxT("4")), 0, wxEXPAND); gs->Add(new wxButton(this, -1, wxT("5")), 0, wxEXPAND); gs->Add(new wxButton(this, -1, wxT("6")), 0, wxEXPAND); gs->Add(new wxButton(this, -1, wxT("*")), 0, wxEXPAND); gs->Add(new wxButton(this, -1, wxT("1")), 0, wxEXPAND); gs->Add(new wxButton(this, -1, wxT("2")), 0, wxEXPAND); gs->Add(new wxButton(this, -1, wxT("3")), 0, wxEXPAND); gs->Add(new wxButton(this, -1, wxT("-")), 0, wxEXPAND); gs->Add(new wxButton(this, -1, wxT("0")), 0, wxEXPAND); gs->Add(new wxButton(this, -1, wxT(".")), 0, wxEXPAND); gs->Add(new wxButton(this, -1, wxT("=")), 0, wxEXPAND); gs->Add(new wxButton(this, -1, wxT("+")), 0, wxEXPAND); sizer->Add(gs, 1, wxEXPAND); SetSizer(sizer); SetMinSize(wxSize(270, 220)); Centre(); } ``` `main.h` ```cpp #include <wx/wx.h> class MyApp : public wxApp { public: virtual bool OnInit(); }; ``` `main.cpp` ```cpp #include "main.h" #include "gridsizer.h" IMPLEMENT_APP(MyApp) bool MyApp::OnInit() { GridSizer *gs = new GridSizer(wxT("GridSizer")); gs->Show(true); return true; } ``` 在我們的示例中，我們為`wxFrame`設置了垂直大小調整器。 我們將靜態文本和網格大小調整器放入垂直大小調整器中。 注意我們如何在`Bck`和`Close`按鈕之間放置空格。 我們只是在其中放一個空的`wxStaticText`。 ```cpp gs->Add(new wxButton(this, -1, wxT("Cls")), 0, wxEXPAND); ``` 我們多次調用`Add()`方法。 將小部件按順序放置在表中，然后將它們添加。 第一行先填充，然后第二行等。  圖：`GridSizer` ## `wxFlexGridSizer` 該大小調整器類似于`wxGridSizer`。 它還確實將其小部件布置在二維表中。 它增加了一些靈活性。 `wxGridSizer`細胞大小相同。 `wxFlexGridSizer`中的所有單元格都具有相同的高度。 一列中所有單元格的寬度均相同。 但是，所有行和列不一定都具有相同的高度或寬度。 ```cpp wxFlexGridSizer(int rows, int cols, int vgap, int hgap) ``` `rows`和`cols`指定大小調整器中的行數和列數。 `vgap`和`hgap`在兩個方向的小部件之間添加了一些空間。 很多時候，開發者必須開發用于數據輸入和修改的對話框。 我發現`wxFlexGridSizer`適用于此類任務。 開發者可以使用此大小調整器輕松設置對話框窗口。 也可以使用`wxGridSizer`完成此操作，但由于每個單元格的大小相同，因此看起來不太好。 `flexgridsizer.h` ```cpp #include <wx/wx.h> class FlexGridSizer : public wxFrame { public: FlexGridSizer(const wxString& title); }; ``` `flexgridsizer.cpp` ```cpp #include "flexgridsizer.h" FlexGridSizer::FlexGridSizer(const wxString& title) : wxFrame(NULL, -1, title, wxPoint(-1, -1), wxSize(270, 220)) { wxPanel *panel = new wxPanel(this, -1); wxBoxSizer *hbox = new wxBoxSizer(wxHORIZONTAL); wxFlexGridSizer *fgs = new wxFlexGridSizer(3, 2, 9, 25); wxStaticText *thetitle = new wxStaticText(panel, -1, wxT("Title")); wxStaticText *author = new wxStaticText(panel, -1, wxT("Author")); wxStaticText *review = new wxStaticText(panel, -1, wxT("Review")); wxTextCtrl *tc1 = new wxTextCtrl(panel, -1); wxTextCtrl *tc2 = new wxTextCtrl(panel, -1); wxTextCtrl *tc3 = new wxTextCtrl(panel, -1, wxT(""), wxPoint(-1, -1), wxSize(-1, -1), 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(); } ``` `main.h` ```cpp #include <wx/wx.h> class MyApp : public wxApp { public: virtual bool OnInit(); }; ``` `main.cpp` ```cpp #include "main.h" #include "flexgridsizer.h" IMPLEMENT_APP(MyApp) bool MyApp::OnInit() { FlexGridSizer *fgs = new FlexGridSizer(wxT("FlexGridSizer")); fgs->Show(true); return true; } ``` 在我們的示例中，我們創建一個簡單的對話框。 它可以用于將數據插入數據庫。 ```cpp wxBoxSizer *hbox = new wxBoxSizer(wxHORIZONTAL); ... hbox->Add(fgs, 1, wxALL | wxEXPAND, 15); ``` 我們創建一個水平框大小調整器，以便在小部件表周圍放置一些空間（15 像素）。 ```cpp fgs->Add(thetitle); ``` 完全與`GridSizer`一樣，將小部件添加到大小調整器中。 ```cpp fgs->AddGrowableRow(2, 1); fgs->AddGrowableCol(1, 1); ``` 我們使第三行和第二列可增長。 這樣，當調整窗口大小時，我們使文本控件變大。 前兩個文本控件將在水平方向上增長，第三個文本控件將在兩個方向上增長。 我們一定不要忘記使小部件可擴展（`wxEXPAND`）以使其真正起作用。  圖：`FlexGridSizer` wxWidgets 教程的這一部分專門用于布局管理。