小部件 · ZetCode 中文系列教程

# 小部件 > 原文： [http://zetcode.com/wxpython/widgets/](http://zetcode.com/wxpython/widgets/) 在本節中，我們將介紹 wxPython 中的基本小部件。每個小部件都有一個小的代碼示例。小部件是應用的基本構建塊。 wxPython 有各種各樣的小部件，包括按鈕，復選框，滑塊和列表框。 * [`wx.Button`](#button) * [`wx.ToggleButton`](#togglebutton) * [`wx.StaticText`](#statictext) * [`wx.StaticLine`](#staticline) * [`wx.StaticBox`](#staticbox) * [`wx.ComboBox`](#combobox) * [`wx.CheckBox`](#checkbox) * [`wx.StatusBar`](#statusbar) * [`wx.RadioButton`](#radiobutton) * [`wx.Gauge`](#gauge) * [`wx.Slider`](#slider) * [`wx.SpinCtrl`](#spinctrl) ## `wx.Button` `wx.Button`是一個簡單的小部件。它包含一個文本字符串。用于觸發動作。 `button_wid.py` ```py #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ ZetCode wxPython tutorial In this code example, we create a button widget. author: Jan Bodnar website: www.zetcode.com last modified: April 2018 """ import wx class Example(wx.Frame): def __init__(self, *args, **kw): super(Example, self).__init__(*args, **kw) self.InitUI() def InitUI(self): pnl = wx.Panel(self) closeButton = wx.Button(pnl, label='Close', pos=(20, 20)) closeButton.Bind(wx.EVT_BUTTON, self.OnClose) self.SetSize((350, 250)) self.SetTitle('wx.Button') self.Centre() def OnClose(self, e): self.Close(True) def main(): app = wx.App() ex = Example(None) ex.Show() app.MainLoop() if __name__ == '__main__': main() ``` 在代碼示例中，我們創建一個“關閉”按鈕，當按下該按鈕時，它將終止應用。 ```py cbtn = wx.Button(pnl, label='Close', pos=(20, 20)) ``` `wx.Button`小部件已創建。在小部件的構造器中，我們提供按鈕的標簽和面板上的位置。 ```py cbtn.Bind(wx.EVT_BUTTON, self.OnClose) ``` 當我們單擊按鈕時，將觸發`wx.EVT_BUTTON`事件。我們為事件指定事件處理器。 ```py def OnClose(self, e): self.Close(True) ``` 在`OnClose()`方法中，我們使用`Close()`方法終止應用。 ![wx.Button](https://img.kancloud.cn/aa/eb/aaebba1a2ac80bf512eafca1b14119e0_350x250.jpg) 圖：`wx.Button` ## `wx.ToggleButton` `wx.ToggleButton`是具有兩種狀態的按鈕：已按下和未按下。通過單擊可以在這兩種狀態之間切換。在某些情況下此功能非常合適。 `toggle_buttons.py` ```py #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ ZetCode wxPython tutorial In this code example, we create three toggle button widgets. author: Jan Bodnar website: www.zetcode.com last modified: April 2018 """ import wx class Example(wx.Frame): def __init__(self, *args, **kw): super(Example, self).__init__(*args, **kw) self.InitUI() def InitUI(self): pnl = wx.Panel(self) self.col = wx.Colour(0, 0, 0) rtb = wx.ToggleButton(pnl, label='red', pos=(20, 25)) gtb = wx.ToggleButton(pnl, label='green', pos=(20, 60)) btb = wx.ToggleButton(pnl, label='blue', pos=(20, 100)) self.cpnl = wx.Panel(pnl, pos=(150, 20), size=(110, 110)) self.cpnl.SetBackgroundColour(self.col) rtb.Bind(wx.EVT_TOGGLEBUTTON, self.ToggleRed) gtb.Bind(wx.EVT_TOGGLEBUTTON, self.ToggleGreen) btb.Bind(wx.EVT_TOGGLEBUTTON, self.ToggleBlue) self.SetSize((350, 250)) self.SetTitle('Toggle buttons') self.Centre() def ToggleRed(self, e): obj = e.GetEventObject() isPressed = obj.GetValue() green = self.col.Green() blue = self.col.Blue() if isPressed: self.col.Set(255, green, blue) else: self.col.Set(0, green, blue) self.cpnl.SetBackgroundColour(self.col) self.cpnl.Refresh() def ToggleGreen(self, e): obj = e.GetEventObject() isPressed = obj.GetValue() red = self.col.Red() blue = self.col.Blue() if isPressed: self.col.Set(red, 255, blue) else: self.col.Set(red, 0, blue) self.cpnl.SetBackgroundColour(self.col) self.cpnl.Refresh() def ToggleBlue(self, e): obj = e.GetEventObject() isPressed = obj.GetValue() red = self.col.Red() green = self.col.Green() if isPressed: self.col.Set(red, green, 255) else: self.col.Set(red, green, 0) self.cpnl.SetBackgroundColour(self.col) self.cpnl.Refresh() def main(): app = wx.App() ex = Example(None) ex.Show() app.MainLoop() if __name__ == '__main__': main() ``` 我們有紅色，綠色和藍色的切換按鈕和一個面板。我們通過單擊切換按鈕來更改面板的顏色。 ```py rtb = wx.ToggleButton(pnl, label='red', pos=(20, 25)) ``` `wx.ToggleButton`小部件已創建。 ```py self.cpnl = wx.Panel(pnl, pos=(150, 20), size=(110, 110)) self.cpnl.SetBackgroundColour(self.col) ``` 這是一個面板的顏色，我們將使用切換按鈕對其進行修改。 ```py rtb.Bind(wx.EVT_TOGGLEBUTTON, self.ToggleRed) ``` 當我們單擊`rtb`切換按鈕時，將調用`ToggleRed()`事件處理器。 ```py def ToggleRed(self, e): obj = e.GetEventObject() isPressed = obj.GetValue() green = self.col.Green() blue = self.col.Blue() if isPressed: self.col.Set(255, green, blue) else: self.col.Set(0, green, blue) self.cpnl.SetBackgroundColour(self.col) ``` 在`ToggleRed()`方法中，我們對按下`rtb`按鈕這一事實作出反應。我們找出顏色部分并更新顏色面板的顏色。 ![Toggle buttons](https://img.kancloud.cn/82/0f/820fed0b4767bb23a0b194c9cbe61d71_300x200.jpg) 圖：開關按鈕 ## `wx.StaticText` `wx.StaticText`小部件顯示一行或多行只讀文本。 `static_text.py` ```py #!/usr/bin/python # -*- coding: utf-8 -*- """ ZetCode wxPython tutorial In this code example, we create a static text. author: Jan Bodnar website: www.zetcode.com last modified: April 2018 """ import wx class Example(wx.Frame): def __init__(self, *args, **kw): super(Example, self).__init__(*args, **kw) self.InitUI() def InitUI(self): txt1 = '''I'm giving up the ghost of love in the shadows cast on devotion She is the one that I adore creed of my silent suffocation Break this bittersweet spell on me lost in the arms of destiny''' txt2 = '''There is something in the way You're always somewhere else Feelings have deserted me To a point of no return I don't believe in God But I pray for you''' pnl = wx.Panel(self) vbox = wx.BoxSizer(wx.VERTICAL) font = wx.Font(13, wx.DEFAULT, wx.NORMAL, wx.DEFAULT) st1 = wx.StaticText(pnl, label=txt1, style=wx.ALIGN_LEFT) st2 = wx.StaticText(pnl, label=txt2, style=wx.ALIGN_LEFT) st1.SetFont(font) st2.SetFont(font) vbox.Add(st1, flag=wx.ALL, border=15) vbox.Add(st2, flag=wx.ALL, border=15) pnl.SetSizer(vbox) self.SetTitle('Bittersweet') self.Centre() def main(): app = wx.App() ex = Example(None) ex.Show() app.MainLoop() if __name__ == '__main__': main() ``` 在示例中，我們使用`wx.StaticText`小部件顯示了兩首 Bittersweet 歌曲的節奏。 ```py font = wx.Font(13, wx.DEFAULT, wx.NORMAL, wx.DEFAULT) ``` 我們為文本創建一個字體對象。 ```py txt1 = '''I'm giving up the ghost of love in the shadows cast on devotion She is the one that I adore creed of my silent suffocation Break this bittersweet spell on me lost in the arms of destiny''' ``` 這是要在`wx.StaticText`小部件中顯示的字符串。 ```py st1 = wx.StaticText(pnl, label=txt1, style=wx.ALIGN_LEFT) ``` 我們創建`wx.StaticText`小部件。文本將向左對齊。 ```py st1.SetFont(font) st2.SetFont(font) ``` 我們使用`SetFont()`將字體設置為靜態文本小部件。 ![wx.StaticText](https://img.kancloud.cn/47/15/4715e7dd877684b05740ba40325a3e02_322x300.jpg) 圖：`wx.StaticText` ## `wx.StaticLine` 此小部件在窗口上顯示一條簡單的線。它可以是水平或垂直的。 `static_line.py` ```py #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ ZetCode wxPython tutorial In this code example, we create a static line. author: Jan Bodnar website: www.zetcode.com last modified: April 2018 """ import wx class Example(wx.Frame): def __init__(self, *args, **kw): super(Example, self).__init__(*args, **kw) self.InitUI() def InitUI(self): pnl = wx.Panel(self) font = wx.Font(10, wx.DEFAULT, wx.NORMAL, wx.BOLD) heading = wx.StaticText(self, label='The Central Europe', pos=(25, 15), size=(200, -1)) heading.SetFont(font) wx.StaticLine(self, pos=(25, 50), size=(300,1)) wx.StaticText(self, label='Slovakia', pos=(25, 80)) wx.StaticText(self, label='Hungary', pos=(25, 100)) wx.StaticText(self, label='Poland', pos=(25, 120)) wx.StaticText(self, label='Czech Republic', pos=(25, 140)) wx.StaticText(self, label='Germany', pos=(25, 160)) wx.StaticText(self, label='Slovenia', pos=(25, 180)) wx.StaticText(self, label='Austria', pos=(25, 200)) wx.StaticText(self, label='Switzerland', pos=(25, 220)) wx.StaticText(self, label='5 445 000', pos=(250, 80)) wx.StaticText(self, label='10 014 000', pos=(250, 100)) wx.StaticText(self, label='38 186 000', pos=(250, 120)) wx.StaticText(self, label='10 562 000', pos=(250, 140)) wx.StaticText(self, label='81 799 000', pos=(250, 160)) wx.StaticText(self, label='2 050 000', pos=(250, 180)) wx.StaticText(self, label='8 414 000', pos=(250, 200)) wx.StaticText(self, label='7 866 000', pos=(250, 220)) wx.StaticLine(self, pos=(25, 260), size=(300,1)) tsum = wx.StaticText(self, label='164 336 000', pos=(240, 280)) sum_font = tsum.GetFont() sum_font.SetWeight(wx.BOLD) tsum.SetFont(sum_font) btn = wx.Button(self, label='Close', pos=(140, 310)) btn.Bind(wx.EVT_BUTTON, self.OnClose) self.SetSize((360, 380)) self.SetTitle('wx.StaticLine') self.Centre() def OnClose(self, e): self.Close(True) def main(): app = wx.App() ex = Example(None) ex.Show() app.MainLoop() if __name__ == '__main__': main() ``` 該腳本顯示了中歐國家及其人口。 `wx.StatLine`使它看起來更具視覺吸引力。 ```py wx.StaticLine(self, pos=(25, 50), size=(300,1)) ``` 這是`wx.StaticLine`的構造器 ![wx.StaticLine](https://img.kancloud.cn/fc/b4/fcb40c337c33a18b2ad1f4af624b00db_360x380.jpg) 圖：`wx.StaticLine` ## `wx.StaticBox` 這是一種裝飾器小部件。它用于對各種小部件進行邏輯分組。請注意，必須在其包含的窗口小部件之前創建此窗口小部件，并且這些窗口小部件應該是靜態框的同級，而不是子級。 ```py #!/usr/bin/python # -*- coding: utf-8 -*- import wx class Example(wx.Frame): def __init__(self, *args, **kw): super(Example, self).__init__(*args, **kw) self.InitUI() def InitUI(self): pnl = wx.Panel(self) wx.StaticBox(pnl, label='Personal Info', pos=(5, 5), size=(240, 170)) wx.CheckBox(pnl, label='Male', pos=(15, 30)) wx.CheckBox(pnl, label='Married', pos=(15, 55)) wx.StaticText(pnl, label='Age', pos=(15, 95)) wx.SpinCtrl(pnl, value='1', pos=(55, 90), size=(60, -1), min=1, max=120) btn = wx.Button(pnl, label='Ok', pos=(90, 185), size=(60, -1)) btn.Bind(wx.EVT_BUTTON, self.OnClose) self.SetSize((270, 250)) self.SetTitle('Static box') self.Centre() self.Show(True) def OnClose(self, e): self.Close(True) def main(): ex = wx.App() Example(None) ex.MainLoop() if __name__ == '__main__': main() ``` 我們有一個`wx.StaticBox`來裝飾其他四個小部件。 ![Static box](https://img.kancloud.cn/5b/71/5b7179344e2cec7b115a21f66b1963aa_270x250.jpg) 圖：靜態框 ## `wx.ComboBox` `wx.ComboBox`是單行文本字段，帶有向下箭頭圖像的按鈕和列表框的組合。當您按下按鈕時，將出現一個列表框。用戶只能從提供的字符串列表中選擇一個選項。 ```py #!/usr/bin/python # -*- coding: utf-8 -*- import wx class Example(wx.Frame): def __init__(self, *args, **kw): super(Example, self).__init__(*args, **kw) self.InitUI() def InitUI(self): pnl = wx.Panel(self) distros = ['Ubuntu', 'Arch', 'Fedora', 'Debian', 'Mint'] cb = wx.ComboBox(pnl, pos=(50, 30), choices=distros, style=wx.CB_READONLY) self.st = wx.StaticText(pnl, label='', pos=(50, 140)) cb.Bind(wx.EVT_COMBOBOX, self.OnSelect) self.SetSize((250, 230)) self.SetTitle('wx.ComboBox') self.Centre() self.Show(True) def OnSelect(self, e): i = e.GetString() self.st.SetLabel(i) def main(): ex = wx.App() Example(None) ex.MainLoop() if __name__ == '__main__': main() ``` 從組合框中選擇的選項顯示在下面的標簽中。 ```py distros = ['Ubuntu', 'Arch', 'Fedora', 'Debian', 'Mint'] ``` 組合框將包含此字符串列表。 ```py cb = wx.ComboBox(pnl, pos=(50, 30), choices=distros, style=wx.CB_READONLY) ``` `wx.ComboBox`小部件已創建。 `choices`參數采用要在組合框顯示的字符串列表。 `wx.CB_READONLY`樣式使列表的字符串為只讀。 ```py cb.Bind(wx.EVT_COMBOBOX, self.OnSelect) ``` 當我們從組合框中選擇一個選項時，將觸發`wx.EVT_COMBOBOX`事件。我們將`OnSelect()`事件處理器插入此事件。 ```py def OnSelect(self, e): i = e.GetString() self.st.SetLabel(i) ``` 我們從組合框中獲取選定的項目并將其設置為標簽。 ![wx.ComboBox](https://img.kancloud.cn/40/93/4093d23ff26db85851742ff800567a52_250x230.jpg) 圖：`wx.ComboBox` ## `wx.CheckBox` `wx.CheckBox`是具有兩種狀態的窗口小部件：開和關。這是一個帶有標簽的盒子。標簽可以設置在框的右側或左側。如果選中`wx.CheckBox`，則在方框中用勾號表示。 `checkbox.py` ```py #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ ZetCode wxPython tutorial In this example we create a checkbox widget. author: Jan Bodnar website: www.zetcode.com last modified: April 2018 """ import wx class Example(wx.Frame): def __init__(self, *args, **kw): super(Example, self).__init__(*args, **kw) self.InitUI() def InitUI(self): pnl = wx.Panel(self) vbox = wx.BoxSizer(wx.HORIZONTAL) cb = wx.CheckBox(pnl, label='Show title') cb.SetValue(True) cb.Bind(wx.EVT_CHECKBOX, self.ShowOrHideTitle) vbox.Add(cb, flag=wx.TOP|wx.LEFT, border=30) pnl.SetSizer(vbox) self.SetTitle('wx.CheckBox') self.Centre() def ShowOrHideTitle(self, e): sender = e.GetEventObject() isChecked = sender.GetValue() if isChecked: self.SetTitle('wx.CheckBox') else: self.SetTitle('') def main(): app = wx.App() ex = Example(None) ex.Show() app.MainLoop() if __name__ == '__main__': main() ``` 在上面的示例中，我們使用`wx.CheckBox`小部件顯示或隱藏窗口標題。 ```py cb = wx.CheckBox(pnl, label='Show title') ``` 這是`wx.CheckBox`小部件的構造器。 ```py cb.SetValue(True) ``` 默認情況下顯示框架窗口的標題，因此我們使用`SetValue()`方法檢查`wx.CheckBox`小部件。 ```py cb.Bind(wx.EVT_CHECKBOX, self.ShowOrHideTitle) ``` 當我們單擊`wx.CheckBox`小部件時，將觸發`wx.EVT_CHECKBOX`事件。在此事件上調用`ShowOrHideTitle()`事件處理器。 ```py def ShowOrHideTitle(self, e): sender = e.GetEventObject() isChecked = sender.GetValue() if isChecked: self.SetTitle('wx.CheckBox') else: self.SetTitle('') ``` 在`ShowOrHideTitle()`方法中，我們根據`wx.CheckBox`小部件的狀態顯示或隱藏標題。 ![wx.CheckBox](https://img.kancloud.cn/e0/a6/e0a6c32427a939244170bcc1be248891_400x250.jpg) 圖：`wx.CheckBox` ## `wx.StatusBar` `wx.StatusBar`小部件用于顯示應用狀態信息。它可以分為幾個部分以顯示不同類型的信息。我們可以在`wx.StatusBar`中插入其他小部件。它可以用作對話框的替代方法，因為對話框經常被濫用，并且大多數用戶不喜歡它們。我們可以通過兩種方式創建`wx.StatusBar`。我們可以手動創建自己的`wx.StatusBar`并調用`SetStatusBar()`方法，也可以簡單地調用`CreateStatusBar()`方法。后一種方法為我們創建了默認的`wx.StatusBar`。 ```py #!/usr/bin/python # -*- coding: utf-8 -*- import wx class Example(wx.Frame): def __init__(self, *args, **kw): super(Example, self).__init__(*args, **kw) self.InitUI() def InitUI(self): pnl = wx.Panel(self) button = wx.Button(pnl, label='Button', pos=(20, 20)) text = wx.CheckBox(pnl, label='CheckBox', pos=(20, 90)) combo = wx.ComboBox(pnl, pos=(120, 22), choices=['Python', 'Ruby']) slider = wx.Slider(pnl, 5, 6, 1, 10, (120, 90), (110, -1)) pnl.Bind(wx.EVT_ENTER_WINDOW, self.OnWidgetEnter) button.Bind(wx.EVT_ENTER_WINDOW, self.OnWidgetEnter) text.Bind(wx.EVT_ENTER_WINDOW, self.OnWidgetEnter) combo.Bind(wx.EVT_ENTER_WINDOW, self.OnWidgetEnter) slider.Bind(wx.EVT_ENTER_WINDOW, self.OnWidgetEnter) self.sb = self.CreateStatusBar() self.SetSize((250, 230)) self.SetTitle('wx.Statusbar') self.Centre() self.Show(True) def OnWidgetEnter(self, e): name = e.GetEventObject().GetClassName() self.sb.SetStatusText(name + ' widget') e.Skip() def main(): ex = wx.App() Example(None) ex.MainLoop() if __name__ == '__main__': main() ``` 在我們的示例中，我們有一個`wx.Frame`小部件以及其他五個小部件。如果將鼠標指針懸停在窗口小部件上，則其名稱將顯示在`wx.StatusBar`中。 ```py pnl.Bind(wx.EVT_ENTER_WINDOW, self.OnWidgetEnter) ``` 如果我們輸入小部件的區域，則會生成`EVT_ENTER_WINDOW`事件。 ```py self.sb = self.CreateStatusBar() ``` 使用`CreateStatusBar()`方法創建狀態欄。 ```py def OnWidgetEnter(self, e): name = e.GetEventObject().GetClassName() self.sb.SetStatusText(name + ' widget') e.Skip() ``` 在`OnWidgetEnter()`方法內部，我們找出使用鼠標指針輸入的小部件的名稱。我們使用`SetStatusText()`方法設置狀態文本。 ![StatusBar](https://img.kancloud.cn/12/82/1282f6fb3f470f28d18eccaa1d9ab672_250x230.jpg) 圖：`wx.StatusBar` ## `wx.RadioButton` `wx.RadioButton`是一個小部件，允許用戶從一組選項中選擇一個唯一選項。通過使組中的第一個單選按鈕包含`wx.RB_GROUP`樣式來定義單選按鈕組。在第一個帶有此樣式標記的單選按鈕之后定義的所有其他單選按鈕將添加到第一個單選按鈕的功能組中。用`wx.RB_GROUP`標志聲明另一個單選按鈕將啟動一個新的單選按鈕組。 ```py #!/usr/bin/python # -*- coding: utf-8 -*- import wx class Example(wx.Frame): def __init__(self, *args, **kw): super(Example, self).__init__(*args, **kw) self.InitUI() def InitUI(self): pnl = wx.Panel(self) self.rb1 = wx.RadioButton(pnl, label='Value A', pos=(10, 10), style=wx.RB_GROUP) self.rb2 = wx.RadioButton(pnl, label='Value B', pos=(10, 30)) self.rb3 = wx.RadioButton(pnl, label='Value C', pos=(10, 50)) self.rb1.Bind(wx.EVT_RADIOBUTTON, self.SetVal) self.rb2.Bind(wx.EVT_RADIOBUTTON, self.SetVal) self.rb3.Bind(wx.EVT_RADIOBUTTON, self.SetVal) self.sb = self.CreateStatusBar(3) self.sb.SetStatusText("True", 0) self.sb.SetStatusText("False", 1) self.sb.SetStatusText("False", 2) self.SetSize((210, 210)) self.SetTitle('wx.RadioButton') self.Centre() self.Show(True) def SetVal(self, e): state1 = str(self.rb1.GetValue()) state2 = str(self.rb2.GetValue()) state3 = str(self.rb3.GetValue()) self.sb.SetStatusText(state1, 0) self.sb.SetStatusText(state2, 1) self.sb.SetStatusText(state3, 2) def main(): ex = wx.App() Example(None) ex.MainLoop() if __name__ == '__main__': main() ``` 我們有一組三個單選按鈕。每個單選按鈕的狀態顯示在狀態欄中。 ```py self.rb1 = wx.RadioButton(pnl, label='Value A', pos=(10, 10), style=wx.RB_GROUP) self.rb2 = wx.RadioButton(pnl, label='Value B', pos=(10, 30)) self.rb3 = wx.RadioButton(pnl, label='Value C', pos=(10, 50)) ``` 我們創建三個單選按鈕。第一個單選按鈕設置為`wx.RB_GROUP`樣式。它將啟動一個新的廣播組。 ```py self.rb1.Bind(wx.EVT_RADIOBUTTON, self.SetVal) ``` 我們將`wx.EVT_RADIOBUTTON`事件綁定到`SetVal()`事件處理器。 ```py self.sb = self.CreateStatusBar(3) self.sb.SetStatusText("True", 0) self.sb.SetStatusText("False", 1) self.sb.SetStatusText("False", 2) ``` 我們創建一個帶有三個字段的狀態欄。我們將初始文本設置為與單選按鈕狀態相對應的狀態欄。 ```py def SetVal(self, e): state1 = str(self.rb1.GetValue()) state2 = str(self.rb2.GetValue()) state3 = str(self.rb3.GetValue()) self.sb.SetStatusText(state1, 0) self.sb.SetStatusText(state2, 1) self.sb.SetStatusText(state3, 2) ``` 在`SetVal()`方法內，我們找出單選按鈕的狀態。我們將狀態欄字段更新為當前的單選按鈕值。 ![wx.RadioButton](https://img.kancloud.cn/cc/5c/cc5c76a60c312060c269735e5e43e7a4_210x210.jpg) 圖：`wx.RadioButton` ## `wx.Gauge` `wx.Gauge`是在處理冗長的任務時使用的小部件。它具有一個指示器以顯示任務的當前狀態。 `gauge_wid.py` ```py #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ ZetCode wxPython tutorial In this example we create gauge widget. author: Jan Bodnar website: www.zetcode.com last modified: April 2018 """ import wx TASK_RANGE = 50 class Example(wx.Frame): def __init__(self, *args, **kw): super(Example, self).__init__(*args, **kw) self.InitUI() def InitUI(self): self.timer = wx.Timer(self, 1) self.count = 0 self.Bind(wx.EVT_TIMER, self.OnTimer, self.timer) pnl = wx.Panel(self) vbox = wx.BoxSizer(wx.VERTICAL) hbox1 = wx.BoxSizer(wx.HORIZONTAL) hbox2 = wx.BoxSizer(wx.HORIZONTAL) hbox3 = wx.BoxSizer(wx.HORIZONTAL) self.gauge = wx.Gauge(pnl, range=TASK_RANGE, size=(250, -1)) self.btn1 = wx.Button(pnl, wx.ID_OK) self.btn2 = wx.Button(pnl, wx.ID_STOP) self.text = wx.StaticText(pnl, label='Task to be done') self.Bind(wx.EVT_BUTTON, self.OnOk, self.btn1) self.Bind(wx.EVT_BUTTON, self.OnStop, self.btn2) hbox1.Add(self.gauge, proportion=1, flag=wx.ALIGN_CENTRE) hbox2.Add(self.btn1, proportion=1, flag=wx.RIGHT, border=10) hbox2.Add(self.btn2, proportion=1) hbox3.Add(self.text, proportion=1) vbox.Add((0, 30)) vbox.Add(hbox1, flag=wx.ALIGN_CENTRE) vbox.Add((0, 20)) vbox.Add(hbox2, proportion=1, flag=wx.ALIGN_CENTRE) vbox.Add(hbox3, proportion=1, flag=wx.ALIGN_CENTRE) pnl.SetSizer(vbox) self.SetTitle('wx.Gauge') self.Centre() def OnOk(self, e): if self.count >= TASK_RANGE: return self.timer.Start(100) self.text.SetLabel('Task in Progress') def OnStop(self, e): if self.count == 0 or self.count >= TASK_RANGE or not self.timer.IsRunning(): return self.timer.Stop() self.text.SetLabel('Task Interrupted') def OnTimer(self, e): self.count = self.count + 1 self.gauge.SetValue(self.count) if self.count == TASK_RANGE: self.timer.Stop() self.text.SetLabel('Task Completed') def main(): app = wx.App() ex = Example(None) ex.Show() app.MainLoop() if __name__ == '__main__': main() ``` 我們有一個壓力表和兩個按鈕。一個按鈕啟動壓力表，另一按鈕停止壓力表。 ```py self.timer = wx.Timer(self, 1) self.count = 0 ``` 我們使用`wx.Timer`在特定間隔執行代碼。屆時我們將更新量規。 `count`變量用于確定已完成任務的一部分。 ```py self.gauge = wx.Gauge(pnl, range=TASK_RANGE, size=(250, -1)) ``` 這是`wx.Gauge`小部件的構造器。 `range`參數設置窗口小部件的最大整數值。 ```py def OnOk(self, e): if self.count >= TASK_RANGE: return self.timer.Start(100) self.text.SetLabel('Task in Progress') ``` 當我們單擊確定按鈕時，將調用`OnOk()`方法。我們首先檢查`count`變量是否在任務范圍內。如果沒有，我們從方法中返回。如果任務尚未完成，我們將啟動計時器并更新靜態文本。 ```py def OnStop(self, e): if self.count == 0 or self.count >= TASK_RANGE or not self.timer.IsRunning(): return self.timer.Stop() self.text.SetLabel('Task Interrupted') ``` 當我們單擊停止按鈕時，將調用`OnStop()`方法。我們檢查停止任務的條件。如果遇到他們，我們將停止計時器并更新靜態文本。 ```py def OnTimer(self, e): self.count = self.count + 1 self.gauge.SetValue(self.count) if self.count == TASK_RANGE: self.timer.Stop() self.text.SetLabel('Task Completed') ``` 啟動計時器后，會定期調用`OnTimer()`方法。在該方法中，我們更新了`count`變量和`gauge`控件。如果`count`變量等于`TASK_RANGE`，我們將停止計時器并更新靜態文本。 ![wx.Gauge](https://img.kancloud.cn/a5/14/a51402b14a53b968f173c80a24992eb6_400x250.jpg) 圖：`wx.Gauge` ## `wx.Slider` `wx.Slider`是具有簡單句柄的小部件。該手柄可以前后拉動。這樣，我們可以選擇特定任務。 `slider_wid.py` ```py #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ ZetCode wxPython tutorial In this example we create slider control. author: Jan Bodnar website: www.zetcode.com last modified: April 2018 """ import wx class Example(wx.Frame): def __init__(self, *args, **kw): super(Example, self).__init__(*args, **kw) self.InitUI() def InitUI(self): pnl = wx.Panel(self) sizer = wx.GridBagSizer(5, 5) sld = wx.Slider(pnl, value=200, minValue=150, maxValue=500, style=wx.SL_HORIZONTAL) sld.Bind(wx.EVT_SCROLL, self.OnSliderScroll) sizer.Add(sld, pos=(0, 0), flag=wx.ALL|wx.EXPAND, border=25) self.txt = wx.StaticText(pnl, label='200') sizer.Add(self.txt, pos=(0, 1), flag=wx.TOP|wx.RIGHT, border=25) sizer.AddGrowableCol(0) pnl.SetSizer(sizer) self.SetTitle('wx.Slider') self.Centre() def OnSliderScroll(self, e): obj = e.GetEventObject() val = obj.GetValue() self.txt.SetLabel(str(val)) def main(): app = wx.App() ex = Example(None) ex.Show() app.MainLoop() if __name__ == '__main__': main() ``` 靜態文本中顯示了在滑塊中選擇的值。 ```py sld = wx.Slider(pnl, value=200, minValue=150, maxValue=500, style=wx.SL_HORIZONTAL) ``` 創建了`wx.Slider`。我們使用值參數提供滑塊的初始位置，并使用`minValue`和`maxValue`參數提供最小和最大滑塊位置。 `wx.SL_HORIZONTAL`使滑塊變為水平。 ```py sld.Bind(wx.EVT_SCROLL, self.OnSliderScroll) ``` 遇到`wx.EVT_SCROLL`事件時，將調用`OnSliderScroll()`方法。 ```py self.txt = wx.StaticText(pnl, label='200') ``` 當前選擇的滑塊值顯示在靜態文本中，該文本位于滑塊下方。 ```py def OnSliderScroll(self, e): obj = e.GetEventObject() val = obj.GetValue() self.txt.SetLabel(str(val)) ``` 在`OnSliderScroll()`方法中，我們獲取事件的發送者。我們獲取滑塊的當前值并將其設置為靜態文本。 ![wx.Slider](https://img.kancloud.cn/b6/1c/b61cd40ede4f805ad5f0cce806f19419_400x250.jpg) 圖：`wx.Slider` ## `wx.SpinCtrl` `wx.SpinCtrl`小部件使我們可以增加和減少值。 `spin_ctrl.py` ```py #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ ZetCode wxPython tutorial In this example we create spin control. author: Jan Bodnar website: www.zetcode.com last modified: April 2018 """ import wx class Example(wx.Frame): def __init__(self, *args, **kw): super(Example, self).__init__(*args, **kw) self.InitUI() def InitUI(self): pnl = wx.Panel(self) sizer = wx.GridBagSizer(5, 5) st1 = wx.StaticText(pnl, label='Convert Fahrenheit temperature to Celsius') sizer.Add(st1, pos=(0, 0), span=(1, 2), flag=wx.ALL, border=15) st2 = wx.StaticText(pnl, label='Fahrenheit:') sizer.Add(st2, pos=(1, 0), flag=wx.ALL | wx.ALIGN_CENTER, border=15) self.sc = wx.SpinCtrl(pnl, value='0') self.sc.SetRange(-459, 1000) sizer.Add(self.sc, pos=(1, 1), flag=wx.ALIGN_CENTER) st3 = wx.StaticText(pnl, label='Celsius:') sizer.Add(st3, pos=(2, 0), flag=wx.ALL|wx.ALIGN_RIGHT, border=15) self.celsius = wx.StaticText(pnl, label='') sizer.Add(self.celsius, pos=(2, 1), flag=wx.ALL, border=15) computeButton = wx.Button(pnl, label='Compute') computeButton.SetFocus() sizer.Add(computeButton, pos=(3, 0), flag=wx.ALIGN_RIGHT|wx.TOP, border=30) closeButton = wx.Button(pnl, label='Close') sizer.Add(closeButton, pos=(3, 1), flag=wx.ALIGN_LEFT|wx.TOP, border=30) computeButton.Bind(wx.EVT_BUTTON, self.OnCompute) closeButton.Bind(wx.EVT_BUTTON, self.OnClose) pnl.SetSizer(sizer) self.SetTitle('wx.SpinCtrl') self.Centre() def OnClose(self, e): self.Close(True) def OnCompute(self, e): fahr = self.sc.GetValue() cels = round((fahr - 32) * 5 / 9.0, 2) self.celsius.SetLabel(str(cels)) def main(): app = wx.App() ex = Example(None) ex.Show() app.MainLoop() if __name__ == '__main__': main() ``` 該腳本將華氏溫度轉換為攝氏溫度。我們使用`wx.SpinCtrl`小部件為華氏溫度選擇一個值。 ```py self.sc = wx.SpinCtrl(pnl, value='0') self.sc.SetRange(-459, 1000) ``` 我們創建一個初始值為 0 的`wx.SpinCtrl`小部件。`SetRange()`設置該小部件的值范圍。 ```py def OnCompute(self, e): fahr = self.sc.GetValue() cels = round((fahr - 32) * 5 / 9.0, 2) self.celsius.SetLabel(str(cels)) ``` 當我們單擊計算按鈕時，將調用`OnCompute()`方法。在方法的主體中，我們從旋轉控件中獲取當前值。我們計算攝氏溫度并將計算的溫度設置為靜態文本小部件。 ![wx.SpinCtrl](https://img.kancloud.cn/4d/81/4d81d31cfdd281859442cee07df0de40_400x250.jpg) 圖：`wx.SpinCtrl` wxPython 教程的這一部分專用于核心 wxPython 小部件。