wxWidgets 小部件 · ZetCode 中文系列教程

# wxWidgets 小部件 > 原文： [http://zetcode.com/gui/wxwidgets/widgets/](http://zetcode.com/gui/wxwidgets/widgets/) 在本章中，我們將展示 wxWidgets 中提供的幾個小部件的小示例。小部件是我們應用的構建塊。 wxWidgets 包含大量有用的小部件。小部件是基本的 GUI 對象。一個小部件為 wxWidgets 工具包命名。該術語在 UNIX 系統上使用。在 Windows 上，小部件通常稱為控件。 ## `wxCheckBox` `wxCheckBox`是具有兩種狀態的窗口小部件：打開和關閉。這是一個帶有標簽的盒子。標簽可以設置在框的右側或左側。如果選中此復選框，則在方框中用勾號表示。復選框可用于在啟動時顯示或隱藏啟動畫面，切換工具欄的可見性等。 `checkbox.h` ```cpp #include <wx/wx.h> class CheckBox : public wxFrame { public: CheckBox(const wxString& title); void OnToggle(wxCommandEvent& event); wxCheckBox *m_cb; }; const int ID_CHECKBOX = 100; ``` `checkbox.cpp` ```cpp #include "checkbox.h" CheckBox::CheckBox(const wxString& title) : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(270, 150)) { wxPanel *panel = new wxPanel(this, wxID_ANY); m_cb = new wxCheckBox(panel, ID_CHECKBOX, wxT("Show title"), wxPoint(20, 20)); m_cb->SetValue(true); Connect(ID_CHECKBOX, wxEVT_COMMAND_CHECKBOX_CLICKED, wxCommandEventHandler(CheckBox::OnToggle)); Centre(); } void CheckBox::OnToggle(wxCommandEvent& WXUNUSED(event)) { if (m_cb->GetValue()) { this->SetTitle(wxT("CheckBox")); } else { this->SetTitle(wxT(" ")); } } ``` `main.h` ```cpp #include <wx/wx.h> class MyApp : public wxApp { public: virtual bool OnInit(); }; ``` `main.cpp` ```cpp #include "main.h" #include "checkbox.h" IMPLEMENT_APP(MyApp) bool MyApp::OnInit() { CheckBox *cb = new CheckBox(wxT("CheckBox")); cb->Show(true); return true; } ``` 在我們的示例中，我們在窗口上顯示一個復選框。我們通過單擊復選框來切換窗口的標題。 ```cpp m_cb = new wxCheckBox(panel, ID_CHECKBOX, wxT("Show title"), wxPoint(20, 20)); m_cb->SetValue(true); ``` 我們創建一個復選框。默認情況下，標題是可見的。因此，我們通過調用方法`SetValue()`來選中該復選框。 ```cpp Connect(ID_CHECKBOX, wxEVT_COMMAND_CHECKBOX_CLICKED, wxCommandEventHandler(CheckBox::OnToggle)); ``` 如果單擊復選框，則會生成`wxEVT_COMMAND_CHECKBOX_CLICKED`事件。我們將此事件連接到用戶定義的`OnToggle()`方法。 ```cpp if (m_cb->GetValue()) { this->SetTitle(wxT("CheckBox")); } else { this->SetTitle(wxT(" ")); } ``` 在`OnToggle()`方法內部，我們檢查復選框的狀態。如果選中，我們將在標題欄中顯示`"CheckBox"`字符串，否則我們將清除標題。 ![wxCheckBox](https://img.kancloud.cn/fa/d7/fad71fb80cbf7ada86ba0ca75790d565_278x178.jpg) 圖：`wxCheckBox` ## `wxBitmapButton` 位圖按鈕是顯示位圖的按鈕。位圖按鈕可以具有其他三個狀態。選定，集中并顯示。我們可以為這些狀態設置特定的位圖。 `bitmapbutton.h` ```cpp #include <wx/wx.h> #include <wx/slider.h> class BitmapButton : public wxFrame { public: BitmapButton(const wxString& title); wxSlider *slider; wxBitmapButton *button; int pos; void OnScroll(wxScrollEvent& event); }; const int ID_SLIDER = 100; ``` `bitmapbutton.cpp` ```cpp #include "bitmapbutton.h" BitmapButton::BitmapButton(const wxString& title) : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(250, 130)) { wxImage::AddHandler( new wxPNGHandler ); wxPanel *panel = new wxPanel(this); slider = new wxSlider(panel, ID_SLIDER, 0, 0, 100, wxPoint(10, 30), wxSize(140, -1)); button = new wxBitmapButton(panel, wxID_ANY, wxBitmap(wxT("mute.png"), wxBITMAP_TYPE_PNG), wxPoint(180, 20)); Connect(ID_SLIDER, wxEVT_COMMAND_SLIDER_UPDATED, wxScrollEventHandler(BitmapButton::OnScroll)); Center(); } void BitmapButton::OnScroll(wxScrollEvent& event) { pos = slider->GetValue(); if (pos == 0) { button->SetBitmapLabel(wxBitmap(wxT("mute.png"), wxBITMAP_TYPE_PNG)); } else if (pos > 0 && pos <= 30 ) { button->SetBitmapLabel(wxBitmap(wxT("min.png"), wxBITMAP_TYPE_PNG)); } else if (pos > 30 && pos < 80 ) { button->SetBitmapLabel(wxBitmap(wxT("med.png"), wxBITMAP_TYPE_PNG)); } else { button->SetBitmapLabel(wxBitmap(wxT("max.png"), wxBITMAP_TYPE_PNG)); } } ``` `main.h` ```cpp #include <wx/wx.h> class MyApp : public wxApp { public: virtual bool OnInit(); }; ``` `main.cpp` ```cpp #include "main.h" #include "bitmapbutton.h" IMPLEMENT_APP(MyApp) bool MyApp::OnInit() { BitmapButton *bb = new BitmapButton(wxT("BitmapButton")); bb->Show(true); return true; } ``` 在我們的示例中，我們有一個滑塊和一個位圖按鈕。我們模擬了音量控制。通過拖動滑塊的手柄，我們可以更改按鈕上的位圖。 ```cpp wxImage::AddHandler( new wxPNGHandler ); ``` 我們將使用 PNG 圖像，因此必須初始化 PNG 圖像處理器。 ```cpp button = new wxBitmapButton(panel, wxID_ANY, wxBitmap(wxT("mute.png"), wxBITMAP_TYPE_PNG), wxPoint(180, 20)); ``` 我們創建一個位圖按鈕。我們指定位圖類型，在本例中為`wxBITMAP_TYPE_PNG` ```cpp pos = slider->GetValue(); ``` 我們得到滑塊值。根據此值，我們為按鈕設置一個位圖。我們有四個音量狀態：靜音，最小，中和最大。要更改按鈕上的位圖，我們調用`SetBitmapLabel()`方法。 ![wxBitmapButton](https://img.kancloud.cn/7f/e2/7fe2acb03f66041ba385bba32fef1052_290x189.jpg) 圖：`wxBitmapButton` ## `wxToggleButton` `wxToggleButton`是具有兩種狀態的按鈕：已按下和未按下。通過單擊可以在這兩種狀態之間切換。在某些情況下此功能非常合適。 `togglebutton.h` ```cpp #include <wx/wx.h> #include <wx/tglbtn.h> class ToggleButton : public wxFrame { public: ToggleButton(const wxString& title); void OnToggleRed(wxCommandEvent& event); void OnToggleGreen(wxCommandEvent& event); void OnToggleBlue(wxCommandEvent& event); protected: wxToggleButton *m_tgbutton1; wxToggleButton *m_tgbutton2; wxToggleButton *m_tgbutton3; wxPanel *m_panel; wxColour *colour; }; const int ID_TGBUTTON1 = 101; const int ID_TGBUTTON2 = 102; const int ID_TGBUTTON3 = 103; ``` `togglebutton.cpp` ```cpp #include "togglebutton.h" ToggleButton::ToggleButton(const wxString& title) : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(280, 180)) { wxPanel *panel = new wxPanel(this, wxID_ANY); colour = new wxColour(0, 0, 0); m_tgbutton1 = new wxToggleButton(panel, ID_TGBUTTON1, wxT("Red"), wxPoint(20, 20)); m_tgbutton2 = new wxToggleButton(panel, ID_TGBUTTON2, wxT("Green"), wxPoint(20, 70)); m_tgbutton3 = new wxToggleButton(panel, ID_TGBUTTON3, wxT("Blue"), wxPoint(20, 120)); Connect(ID_TGBUTTON1, wxEVT_COMMAND_TOGGLEBUTTON_CLICKED, wxCommandEventHandler(ToggleButton::OnToggleRed)); Connect(ID_TGBUTTON2, wxEVT_COMMAND_TOGGLEBUTTON_CLICKED, wxCommandEventHandler(ToggleButton::OnToggleGreen)); Connect(ID_TGBUTTON3, wxEVT_COMMAND_TOGGLEBUTTON_CLICKED, wxCommandEventHandler(ToggleButton::OnToggleBlue)); m_panel = new wxPanel(panel, wxID_NEW, wxPoint(150, 20), wxSize(110, 110), wxSUNKEN_BORDER); m_panel->SetBackgroundColour(colour->GetAsString()); } void ToggleButton::OnToggleRed(wxCommandEvent& WXUNUSED(event)) { unsigned char green = colour->Green(); unsigned char blue = colour->Blue(); if ( colour->Red() ) { colour->Set(0, green, blue); } else { colour->Set(255, green, blue); } m_panel->SetBackgroundColour(colour->GetAsString()); } void ToggleButton::OnToggleGreen(wxCommandEvent& WXUNUSED(event)) { unsigned char red = colour->Red(); unsigned char blue = colour->Blue(); if ( colour->Green() ) { colour->Set(red, 0, blue); } else { colour->Set(red, 255, blue); } m_panel->SetBackgroundColour(colour->GetAsString()); } void ToggleButton::OnToggleBlue(wxCommandEvent& WXUNUSED(event)) { unsigned char red = colour->Red(); unsigned char green = colour->Green(); if ( colour->Blue() ) { colour->Set(red, green, 0); } else { colour->Set(red, green, 255); } m_panel->SetBackgroundColour(colour->GetAsString()); } ``` `main.h` ```cpp #include <wx/wx.h> class MyApp : public wxApp { public: virtual bool OnInit(); }; ``` `main.cpp` ```cpp #include "main.h" #include "togglebutton.h" IMPLEMENT_APP(MyApp) bool MyApp::OnInit() { ToggleButton *button = new ToggleButton(wxT("ToggleButton")); button->Centre(); button->Show(true); return true; } ``` 在我們的示例中，我們顯示了三個切換按鈕和一個面板。我們將面板的背景色設置為黑色。切換按鈕將切換顏色值的紅色，綠色和藍色部分。背景顏色取決于我們按下的切換按鈕。 ```cpp colour = new wxColour(0, 0, 0); ``` 這是初始顏色值。紅色，綠色和藍色均不等于黑色。從理論上講，黑色畢竟不是顏色。 ```cpp m_tgbutton1 = new wxToggleButton(panel, ID_TGBUTTON1, wxT("Red"), wxPoint(20, 20)); ``` 在這里，我們創建一個切換按鈕。 ```cpp Connect(ID_TGBUTTON1, wxEVT_COMMAND_TOGGLEBUTTON_CLICKED, wxCommandEventHandler(ToggleButton::OnToggleRed)); ``` 如果單擊切換按鈕，則會生成`wxEVT_COMMAND_TOGGLEBUTTON_CLICKED`事件。我們為此事件連接事件處理器。注意，我們沒有將事件連接到按鈕方法，而是連接到`wxFrame`。小部件，它是切換按鈕的高級父級。之所以可以這樣做，是因為命令事件會傳播到其父對象。在我們的例子中，按鈕 -> 面板 -> 框。如果要將事件連接到按鈕，則必須創建派生的按鈕類，這意味著需要做更多的工作。 ```cpp if ( colour->Blue() ) { colour->Set(red, green, 0); } else { colour->Set(red, green, 255); } ``` 在事件處理器中，我們設置各自的`wxColour`參數。 ```cpp m_panel->SetBackgroundColour(colour->GetAsString()); ``` 我們設置面板的背景。 ![wxToggleButton](https://img.kancloud.cn/b4/49/b4495a6516daaa9170a91cf581ba91a6_320x239.jpg) 圖：`wxToggleButton` ## `wxStaticLine` 此小部件在窗口上顯示一條簡單的線。它可以是水平或垂直的。 `staticline.h` ```cpp #include <wx/wx.h> class Staticline : public wxDialog { public: Staticline(const wxString& title); }; ``` `staticline.cpp` ```cpp #include "staticline.h" #include <wx/stattext.h> #include <wx/statline.h> Staticline::Staticline(const wxString& title) : wxDialog(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(360, 350)) { wxFont font(10, wxDEFAULT, wxNORMAL, wxBOLD); wxStaticText *heading = new wxStaticText(this, wxID_ANY, wxT("The Central Europe"), wxPoint(30, 15)); heading->SetFont(font); wxStaticLine *sl1 = new wxStaticLine(this, wxID_ANY, wxPoint(25, 50), wxSize(300,1)); wxStaticText *st1 = new wxStaticText(this, wxID_ANY, wxT("Slovakia"), wxPoint(25, 80)); wxStaticText *st2 = new wxStaticText(this, wxID_ANY, wxT("Hungary"), wxPoint(25, 100)); wxStaticText *st3 = new wxStaticText(this, wxID_ANY, wxT("Poland"), wxPoint(25, 120)); wxStaticText *st4 = new wxStaticText(this, wxID_ANY, wxT("Czech Republic"), wxPoint(25, 140)); wxStaticText *st5 = new wxStaticText(this, wxID_ANY, wxT("Germany"), wxPoint(25, 160)); wxStaticText *st6 = new wxStaticText(this, wxID_ANY, wxT("Slovenia"), wxPoint(25, 180)); wxStaticText *st7 = new wxStaticText(this, wxID_ANY, wxT("Austria"), wxPoint(25, 200)); wxStaticText *st8 = new wxStaticText(this, wxID_ANY, wxT("Switzerland"), wxPoint(25, 220)); wxStaticText *st9 = new wxStaticText(this, wxID_ANY, wxT("5 379 000"), wxPoint(220, 80), wxSize(90, -1), wxALIGN_RIGHT); wxStaticText *st10 = new wxStaticText(this, wxID_ANY, wxT("10 084 000"), wxPoint(220, 100), wxSize(90, -1), wxALIGN_RIGHT); wxStaticText *st11 = new wxStaticText(this, wxID_ANY, wxT("38 635 000"), wxPoint(220, 120), wxSize(90, -1), wxALIGN_RIGHT); wxStaticText *st12 = new wxStaticText(this, wxID_ANY, wxT("10 240 000"), wxPoint(220, 140), wxSize(90, -1), wxALIGN_RIGHT); wxStaticText *st13 = new wxStaticText(this, wxID_ANY, wxT("82 443 000"), wxPoint(220, 160), wxSize(90, -1), wxALIGN_RIGHT); wxStaticText *st14 = new wxStaticText(this, wxID_ANY, wxT("2 001 000"), wxPoint(220, 180), wxSize(90, -1), wxALIGN_RIGHT); wxStaticText *st15 = new wxStaticText(this, wxID_ANY, wxT("8 032 000"), wxPoint(220, 200), wxSize(90, -1), wxALIGN_RIGHT); wxStaticText *st16 = new wxStaticText(this, wxID_ANY, wxT("7 288 000"), wxPoint(220, 220), wxSize(90, -1), wxALIGN_RIGHT); wxStaticLine *sl2 = new wxStaticLine(this, wxID_ANY, wxPoint(25, 260), wxSize(300, 1)); wxStaticText *sum = new wxStaticText(this, wxID_ANY, wxT("164 102 000"), wxPoint(220, 280)); wxFont sum_font = sum->GetFont(); sum_font.SetWeight(wxBOLD); sum->SetFont(sum_font); this->Centre(); } ``` `main.h` ```cpp #include <wx/wx.h> class MyApp : public wxApp { public: virtual bool OnInit(); }; ``` `main.cpp` ```cpp #include "main.h" #include "staticline.h" IMPLEMENT_APP(MyApp) bool MyApp::OnInit() { Staticline *sl = new Staticline(wxT("The Central Europe")); sl->ShowModal(); sl->Destroy(); return true; } ``` 在前面的示例中，我們顯示了歐洲中部國家及其人口。 `wxStaticLine`的使用在視覺上更具吸引力。 ```cpp wxStaticLine *sl1 = new wxStaticLine(this, wxID_ANY, wxPoint(25, 50), wxSize(300,1)); ``` 在這里，我們創建一條水平靜態線。寬度為 300 像素。高度為 1 像素。 ![wxStaticLine](https://img.kancloud.cn/af/fa/affa443c9170ca91460a97ed99e57065_362x382.jpg) 圖：`wxStaticLine` ## `wxStaticText` `wxStaticText`小部件顯示一行或多行只讀文本。 `statictext.h` ```cpp #include <wx/wx.h> class StaticText : public wxFrame { public: StaticText(const wxString& title); }; ``` `statictext.cpp` ```cpp #include "statictext.h" StaticText::StaticText(const wxString& title) : wxFrame(NULL, wxID_ANY, title) { wxPanel *panel = new wxPanel(this, wxID_ANY); wxString text = wxT("'Cause sometimes you feel tired,\n\ feel weak, and when you feel weak,\ you feel like you wanna just give up.\n\ But you gotta search within you,\ you gotta find that inner strength\n\ and just pull that shit out of you\ and get that motivation to not give up\n\ and not be a quitter,\ no matter how bad you wanna just fall flat on your face and collapse."); wxStaticText *st = new wxStaticText(panel, wxID_ANY, text, wxPoint(10, 10), wxDefaultSize, wxALIGN_CENTRE); this->SetSize(600, 110); this->Centre(); } ``` `main.h` ```cpp #include <wx/wx.h> class MyApp : public wxApp { public: virtual bool OnInit(); }; ``` `main.cpp` ```cpp #include "main.h" #include "statictext.h" IMPLEMENT_APP(MyApp) bool MyApp::OnInit() { StaticText *st = new StaticText(wxT("StaticText")); st->Show(true); return true; } ``` 在我們的示例中，我們在窗口上顯示了 Eminem 的 Till I Collapse 歌詞的一部分。 ```cpp wxStaticText *st = new wxStaticText(panel, wxID_ANY, text, wxPoint(10, 10), wxDefaultSize, wxALIGN_CENTRE); ``` 在這里，我們創建`wxStaticText`小部件。靜態文本與中心對齊。 ![wxStaticText](https://img.kancloud.cn/fb/34/fb34db990a0aced14d48af4ade4ccfd1_640x169.jpg) 圖：`wxStaticText` ## wxSlider `wxSlider`是具有簡單句柄的小部件。該手柄可以前后拉動。這樣，我們可以為特定任務選擇一個值。有時使用滑塊比僅提供數字或使用旋轉控件更自然。 `Slider.h` ```cpp #include <wx/wx.h> #include <wx/slider.h> class MyPanel : public wxPanel { public: MyPanel(wxFrame *parent); void OnPaint(wxPaintEvent& event); void OnScroll(wxScrollEvent& event); wxSlider *slider; int fill; }; class Slider : public wxFrame { public: Slider(const wxString& title); MyPanel *panel; }; const int ID_SLIDER = 100; ``` `Slider.cpp` ```cpp #include "Slider.h" Slider::Slider(const wxString& title) : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(270, 200)) { panel = new MyPanel(this); Center(); } MyPanel::MyPanel(wxFrame * parent) : wxPanel(parent, wxID_ANY) { fill = 0; slider = new wxSlider(this, ID_SLIDER, 0, 0, 140, wxPoint(50, 30), wxSize(-1, 140), wxSL_VERTICAL); Connect(ID_SLIDER, wxEVT_COMMAND_SLIDER_UPDATED, wxScrollEventHandler(MyPanel::OnScroll)); Connect(wxEVT_PAINT, wxPaintEventHandler(MyPanel::OnPaint)); } void MyPanel::OnScroll(wxScrollEvent& event) { fill = slider->GetValue(); Refresh(); } void MyPanel::OnPaint(wxPaintEvent& event) { wxPaintDC dc(this); wxPen pen(wxColour(212, 212, 212)); dc.SetPen(pen); dc.DrawRectangle(wxRect(140, 30, 80, 140)); wxBrush brush1(wxColour(197, 108, 0)); dc.SetBrush(brush1); dc.DrawRectangle(wxRect(140, 30, 80, fill)); } ``` `main.h` ```cpp #include <wx/wx.h> class MyApp : public wxApp { public: virtual bool OnInit(); }; ``` `main.cpp` ```cpp #include "main.h" #include "Slider.h" IMPLEMENT_APP(MyApp) bool MyApp::OnInit() { Slider *slider = new Slider(wxT("Slider")); slider->Show(true); return true; } ``` 在我們的示例中，我們顯示一個滑塊小部件。通過拉動滑塊的手柄，我們可以控制面板的背景色。在這樣的示例中，使用滑塊比使用例如滑塊更自然。自旋控件。 ```cpp slider = new wxSlider(this, ID_SLIDER, 0, 0, 140, wxPoint(50, 30), wxSize(-1, 140), wxSL_VERTICAL); ``` 我們創建一個垂直滑塊。初始值為 0，最小值為 0，最大值為 140。我們不顯示刻度線，也不顯示標簽。 ```cpp Connect(ID_SLIDER, wxEVT_COMMAND_SLIDER_UPDATED, wxScrollEventHandler(MyPanel::OnScroll)); ``` 在這里，我們將`wxEVT_COMMAND_SLIDER_UPDATED`事件連接到`OnScroll()`用戶定義的方法。 ```cpp Connect(wxEVT_PAINT, wxPaintEventHandler(MyPanel::OnPaint)); ``` 我們還將進行一些繪制，因此將`OnPaint()`方法連接到`wxEVT_PAINT`事件。 ```cpp fill = slider->GetValue(); Refresh(); ``` 在`OnScroll()`方法中，我們將獲得當前的滑塊值。我們調用`Refresh()`方法，該方法將生成`wxEVT_PAINT`事件。 ```cpp dc.DrawRectangle(wxRect(140, 30, 80, 140)); ... dc.DrawRectangle(wxRect(140, 30, 80, fill)); ``` 在`OnPaint()`事件處理器內，我們繪制了兩個矩形。第一種方法是繪制帶有灰色邊框的白色矩形。第二種方法繪制帶有某種褐色的矩形。矩形的高度由`fill`值控制，該值由滑塊控件設置。 ![wxSlider](https://img.kancloud.cn/f0/ff/f0ff567d0b5699338edb19f80d793047_272x232.jpg) 圖：`wxSlider` 在 wxWidgets 教程的這一部分中，我們介紹了各種小部件。