登入 | English

感謝您對「自由軟體鑄造場」的支持與愛護，十多年來「自由軟體鑄造場」受中央研究院支持，並在資訊科學研究所以及資訊科技創新研究中心執行，現已完成階段性的任務。原網站預計持續維運至 2021年底，網站內容基本上不會再更動。本網站由 Denny Huang 備份封存。
也紀念我們永遠的朋友李士傑先生（Shih-Chieh Ilya Li）。

wxPython基礎視窗程式

建立日期 2007-01-11 04:27 最近更新在 2007-08-16 23:53 作者是紀博文

視窗程式設計是一件相當專業的工作，就像發射火箭升空一樣困難又複雜。其實視窗程式設計並沒有那樣的遙不可及，只要熟悉主要的視窗概念，並選擇適當的開發工具，你也可以很快的設計出一個像樣的視窗程式。

基礎視窗程式概念

在電腦的操作介面上，大致分為兩種。即 Command Line Interface(CLI) 命令列介面與 Graphical User Interface(GUI) 圖形使用者介面。

在命令列的模式中，所有的動作，像是複製檔案、搬移檔案、建立目錄、刪除目錄、執行程式等，幾乎都是在一塊黑色

背景的螢幕上，以輸入指令方式操作電腦。

然而，命令列介面，卻是在圖形使用者介面普及之前，最為普及的電腦使用者介面。

而在圖形使用者介面中，則透過滑鼠進行操作。

Figure 1. Command Line Interface(CLI) 命令列介面

{mosimage}

Figure 2. Graphical User Interface(GUI) 圖形使用者介面

{mosimage}

通常來講，一個視窗的組成類似積木的堆疊，主要包括「Frame」(框架)、「Panel」(面板)、「Controls」(控制項)

三個主要部分。以下以 Windows 內建的「超級終端機」為例，來說明視窗的各主要零件。

視窗的底層畫板－Frame(框架)

Frame 是一個視窗的最底層，所有的視窗元件都是建構在 Frame 裡面，而一般常見的 Frame 中，會有「MenuBar」(選單列)、「ToolBar」(工具列)、「StatusBar」(狀態列)和「Panel」(面版)。以下簡單說明各個

部分。

MenuBar(選單列)：為下拉式選單，通常所有應用程式的功能，都可在選單列中找到。
ToolBar(工具列)：將各種常用的功能，以圖示的方式展現出來，方便取用。
StatusBar(狀態列)：用來顯示應用程式的狀態訊息。
Panel(面板)：用來配置視窗操作時，需要使用的各種 Controls(控制項)。

Figure 3. 常見 Frame 的組成

{mosimage}

組合各種元素的畫布－Panel(面板)

前面提到，Panel 是用來放置各種 Controls(控制項)的地方。

而 Controls(控制項)指的就是各種視窗控制項，像這裡看到的有「Button(按鈕)」、「TextCtrl(文字方塊)」。

Figure 4. Panel 中的各種元素

{mosimage}

原料－Controls(控制項)

Controls(控制項)除了前面提到的 Button(按鈕)、TextCtrl(文字方塊)以外，還包括許多大家常見的元件。

Figure 5. Button (按鈕)

{mosimage}

Figure 6. TextCtrl (文字方塊控制項)

{mosimage}

Figure 7. CheckBox (核取方塊控制項)

{mosimage}

Figure 8. StaticText (靜態文字控制項)

{mosimage}

Figure 9. ListBox (清單控制項)

{mosimage}

Figure 10. RadioBox (選取按鈕控制項)

{mosimage}

建置開發 wxPython 的環境

由於 wxPython 專為 Python 程式語言所設計，因此必須先安裝 Python 之後，再安裝 wxPython。

安裝 Python

https://www.python.org/

Figure 11. 在 Python 首頁點選 DOWNLOAD 連結

{mosimage}

Figure 12. 選擇適當的作業系統版本

{mosimage}

安裝 wxPython

https://www.wxpython.org/

Figure 13. 首頁點選 Binaries 連結

{mosimage}

Figure 14. 選擇適當的對應版本

{mosimage}

Figure 15. 選擇適當的下載地點

{mosimage}

實例介紹－以「薪資試算程式」為例

這裡將以同學們曾經練習過的「薪資試算程式」為例。來說明如何將該程式，從一支命令列使用者介面，

轉變成美觀的圖形使用者介面。

設計一個「視窗介面」的薪資試算程式
要求使用者輸入月薪為何？
以及工作年數為何？
並結算該年之中可以獲得東少薪資？
以及平均每日賺得多少薪資？

Figure 16. 薪資試算程式的 CLI(Command Line Interface) 介面

{mosimage}

Figure 17. 薪資試算程式的 GUI(Graphics User Interface) 介面

{mosimage}

建立一個Frame

首先必須為我們的視窗程式建立一個框架(Frame)，並且在 Frame 中配置一個面板(Panel)，供後續放置控制項(Controls)之用。

Figure 18. 空無一物的 Frame

{mosimage}

#基本 Frame -- 開始 --
import wx,string
class MySalgar(wx.Frame):
def __init__(self):
#建造一個新的 Frame
wx.Frame.__init__(self, parent=None, title=u"薪資試算程式", size=(250,200))
# 加入一個 Panel
panel = wx.Panel(self)
if __name__ == '__main__':
app = wx.PySimpleApp()
frame = MySalgar()
frame.Show()
app.MainLoop()
#基本 Frame -- 結束 --

配置視窗元件

接著我們要在 Panel 當中，放置需要的控制項。包括四個StaticText(靜態文字)、兩個TextCtrl(文字方塊)、一個Button(按鈕)。

Figure 19. 配置完成後的視窗畫面

{mosimage}

import wx,string
class MySalgar(wx.Frame):
def __init__(self):
wx.Frame.__init__(self, parent=None, title=u"薪資試算程式", size=(250,200))
panel = wx.Panel(self)
#配置視窗元件 -- 開始 --
wx.StaticText(parent=panel,label=u"工作幾年？",pos=(10,10))
self.a = wx.TextCtrl(parent=panel,pos=(100,10))
wx.StaticText(parent=panel,label=u"一個月多少錢？",pos=(10,50))
self.b = wx.TextCtrl(parent=panel,pos=(100,50))
self.btn = wx.Button(parent=panel,label=u"結算薪資",pos=(10,100))
self.message1 = wx.StaticText(parent=panel,pos=(10,130))
self.message2 = wx.StaticText(parent=panel,pos=(10,150))
#配置視窗元件 -- 結束 --
if __name__ == '__main__':
app = wx.PySimpleApp()
frame = MySalgar()
frame.Show()
app.MainLoop()

撰寫事件函式

當配置好整個視窗介面之後，皆下來我們需要告訴作業系統，當我按下「結算薪資」按鈕後，應該要做些什麼事？

Figure 20. 薪資試算程式的執行結果

{mosimage}

import wx,string
class MySalgar(wx.Frame):
def __init__(self):
wx.Frame.__init__(self,parent=None,title=u"薪資試算程式",size=(250,200))
panel = wx.Panel(self)
wx.StaticText(parent=panel,label=u"工作幾年？",pos=(10,10))
self.a = wx.TextCtrl(parent=panel,pos=(100,10))
wx.StaticText(parent=panel,label=u"一個月多少錢？",pos=(10,50))
self.b = wx.TextCtrl(parent=panel,pos=(100,50))
self.btn = wx.Button(parent=panel,label=u"結算薪資",pos=(10,100))
#新增 BtnClick 事件 -- 開始 --
self.Bind(wx.EVT_BUTTON,self.BtnClick,self.btn)
#新增 BtnClick 事件 -- 結束 --
self.message1 = wx.StaticText(parent=panel,pos=(10,130))
self.message2 = wx.StaticText(parent=panel,pos=(10,150))
#撰寫 BtnClick 事件函式 -- 開始 --
def BtnClick(self,event):
a = self.a.GetValue()
a = string.atoi(a)
b = self.b.GetValue()
b = string.atoi(b)
c = b * 12 * a
d = c /(365 * a)
message1Str = u'您工作 '+str(a)+u' 年可以獲得 '+str(c)+u' 元'
message2Str = u'平均每日獲得 '+str(d)+u' 元'
self.message1.SetLabel(message1Str)
self.message2.SetLabel(message2Str)
#撰寫 BtnClick 事件函式 -- 結束 --
if __name__ == '__main__':
app = wx.PySimpleApp()
frame = MySalgar()
frame.Show()
app.MainLoop()

參考資料

wxPython 官方網站：https://www.wxpython.org
wxWidgets 官方網站：https://www.widget.org

自由軟體鑄造場電子報 : 第 72 期 2006年度回顧與展望

分類: 技術專欄

↑ Top

wxPython基礎視窗程式

基礎視窗程式概念

視窗 的底層畫板－Frame(框架)

組合 各種元素的畫布－Panel(面板)

原料 －Controls(控制項)

建置開發 wxPython 的環境

安 裝 Python

安 裝 wxPython

實例介紹－以「薪資試算程式」為例

建 立一個Frame

配 置視窗元件

撰 寫事件函式

參考資料

評論

視窗的底層畫板－Frame(框架)

組合各種元素的畫布－Panel(面板)

原料－Controls(控制項)

安裝 Python

安裝 wxPython

建立一個Frame

配置視窗元件

撰寫事件函式