#桌面上的計算機(二)--建立計算機

--使用PyQt套件

#原文出處

https://realpython.com/python-pyqt-gui-calculator/

#摘要紀錄與說明

--python的GUI套件，有 Tkinter, wxPython, PyQt, PySide2...等等

--PyQt5 是基於Qt5而來

--請直接下載檔案執行^。如果是複製網頁上的程式，貼上後請注意縮排問題。

#一步一步建立「py小計算機」

• 先把視窗架起來  pycalc01.py

1. #01-建立外殼  pycalc01.py
   
2. import sys
3. 
   
4. from PyQt5.QtWidgets import QApplication  #qt應用程式
5. from PyQt5.QtWidgets import QMainWindow  #qt主視窗
6. from PyQt5.QtWidgets import QWidget  #qt總部件
7. #from PyQt5 import QtGui  #為了加一個window icon，這裡可以省略。
8. 
   
9. #這是原作者，感謝。
10. __version__ = '0.1'
11. __author__ = 'Leodanis Pozo Ramos'
12. 
    
13. #定義主視窗，繼承自QMainWindow
14. class PyCalcUi(QMainWindow):
15.     #初始化，訂定視窗外觀
16.     def __init__(self):
17.         super().__init__()
18.         self.setWindowTitle('py小計算機')
19.         self.setFixedSize(235, 235) #固定大小，免得計算機變形。
20.         # 建立中央部件
21.         self._centralWidget = QWidget(self)  #先建立總部件實體(self相當於parent=self，top level的物件沒有parent了，所以不能省略。)
22.         self.setCentralWidget(self._centralWidget)  #再設定成中央部件
23.         #self.setWindowIcon(QtGui.QIcon('icon.png'))  #這行將icon放上去。這行可以省略。
24. 
    
25. # 主程式
26. def main():
27.     pycalc = QApplication(sys.argv)  #建立app
28.     view = PyCalcUi()  #建立主視窗實體
29.     
30.     view.show()  
31.     sys.exit(pycalc.exec())
32. 
    
33. if __name__ == '__main__':
34.     main()

• 建立外觀 pycalc02.py
  

1. #02-建立外觀  pycalc02.py
2. import sys
3. 
   
4. from PyQt5.QtWidgets import QApplication  #qt應用程式
5. from PyQt5.QtWidgets import QMainWindow  #qt主視窗
6. from PyQt5.QtWidgets import QWidget  #qt總部件
7. from PyQt5 import QtGui  #為了加一個window icon，這裡可以省略。
8. from PyQt5.QtCore import Qt  #一般性質的設定
9. from PyQt5.QtWidgets import QGridLayout  #格狀排列
10. from PyQt5.QtWidgets import QLineEdit   #單行文字
11. from PyQt5.QtWidgets import QPushButton  #按鈕
12. from PyQt5.QtWidgets import QVBoxLayout  #垂直排列
13. 
    
14. #這是原作者，感謝。
15. __version__ = '0.1'
16. __author__ = 'Leodanis Pozo Ramos'
17. 
    
18. #定義主視窗，繼承自QMainWindow
19. class PyCalcUi(QMainWindow):
20.     #初始化，訂定視窗外觀
21.     def __init__(self):
22.         super().__init__()
23.         self.setWindowTitle('py小計算機')
24.         self.setFixedSize(235, 235) #固定大小，免得計算機變形。
25.         self.generalLayout = QVBoxLayout() #整體的部件是垂直排列
26.         # 建立中央部件
27.         self._centralWidget = QWidget(self)  #先建立總部件實體(self相當於parent=self，top level的物件沒有parent了，所以不能省略。)
28.         self.setCentralWidget(self._centralWidget)  #再設定成中央部件
29.         self._centralWidget.setLayout(self.generalLayout)  #中央部件就設定為整體垂直排列
30.         self._createDisplay() #計算機顯示數字的部件
31.         self._createButtons() #計算機顯示按鈕的部件
32. 
    
33.         #self.setWindowIcon(QtGui.QIcon('icon.png'))  #這行將icon放上去。這行可以省略。
34.     
35.     #計算機顯示數字的部件
36.     def _createDisplay(self):
37.         self.display = QLineEdit() #顯示只要一行
38.         self.display.setFixedHeight(35)  #顯示幕的高度
39.         self.display.setAlignment(Qt.AlignRight)  #靠右顯示
40.         self.display.setReadOnly(True)  #設定唯讀
41.         
42.         self.generalLayout.addWidget(self.display) #將以上設定加入整體垂直設定中
43.         
44.     def _createButtons(self):
45.         self.buttons = {}
46.         buttonsLayout = QGridLayout()
47.         #在字典中，設定按鈕顯示的數字和在格狀排列中的座標
48.         buttons = {'7': (0, 0),
49.                    '8': (0, 1),
50.                    '9': (0, 2),
51.                    '/': (0, 3),
52.                    'C': (0, 4),
53.                    '4': (1, 0),
54.                    '5': (1, 1),
55.                    '6': (1, 2),
56.                    '*': (1, 3),
57.                    '(': (1, 4),
58.                    '1': (2, 0),
59.                    '2': (2, 1),
60.                    '3': (2, 2),
61.                    '-': (2, 3),
62.                    ')': (2, 4),
63.                    '0': (3, 0),
64.                    '00': (3, 1),
65.                    '.': (3, 2),
66.                    '+': (3, 3),
67.                    '=': (3, 4),
68.                   }
69.         #取出字典中的文字和座標，一一擺進格狀排列中
70.         for btnText, pos in buttons.items():
71.             self.buttons[btnText] = QPushButton(btnText)  #設定按鈕實體，以及顯示的文字
72.             self.buttons[btnText].setFixedSize(40, 40)    #設定按鈕大小
73.             buttonsLayout.addWidget(self.buttons[btnText], pos[0], pos[1])  #擺進格狀排列
74.             
75.           self.generalLayout.addLayout(buttonsLayout)#將以上設定加入整體垂直設定中
76. # 主程式
77. def main():
78.     pycalc = QApplication(sys.argv)  #建立app
79.     view = PyCalcUi()  #建立主視窗實體
80.     
81.     view.show()  
82.     sys.exit(pycalc.exec())
83. 
    
84. if __name__ == '__main__':
85.     main()

• 處理view的部份--也就是計算機面板上的訊號-- pycalc03.py

1. 面板顯示
2. 計算式
3. 按鍵狀態

1. #03-建立Controller，處理view訊號，只剩=還沒處理。  pycalc03.py
2. import sys
3. 
   
4. from PyQt5.QtWidgets import QApplication  #qt應用程式
5. from PyQt5.QtWidgets import QMainWindow  #qt主視窗
6. from PyQt5.QtWidgets import QWidget  #qt總部件
7. from PyQt5 import QtGui  #為了加一個window icon，這裡可以省略。
8. from PyQt5.QtCore import Qt  #一般性質的設定
9. from PyQt5.QtWidgets import QGridLayout  #格狀排列
10. from PyQt5.QtWidgets import QLineEdit   #單行文字
11. from PyQt5.QtWidgets import QPushButton  #按鈕
12. from PyQt5.QtWidgets import QVBoxLayout  #垂直排列
13. from functools import partial  #有關function的工作
14. 
    
15. #這是原作者，感謝。
16. __version__ = '0.1'
17. __author__ = 'Leodanis Pozo Ramos'
18. 
    
19. #定義主視窗，繼承自QMainWindow
20. class PyCalcUi(QMainWindow):
21.     #初始化，訂定視窗外觀
22.     def __init__(self):
23.         super().__init__()
24.         self.setWindowTitle('py小計算機')
25.         self.setFixedSize(235, 235) #固定大小，免得計算機變形。
26.         self.generalLayout = QVBoxLayout() #整體的部件是垂直排列
27.         # 建立中央部件
28.         self._centralWidget = QWidget(self)  #先建立總部件實體(self相當於parent=self，top level的物件沒有parent了，所以不能省略。)
29.         self.setCentralWidget(self._centralWidget)  #再設定成中央部件
30.         self._centralWidget.setLayout(self.generalLayout)  #中央部件就設定為整體垂直排列
31.         self._createDisplay() #計算機顯示數字的部件
32.         self._createButtons() #計算機顯示按鈕的部件
33. 
    
34.         #self.setWindowIcon(QtGui.QIcon('icon.png'))  #這行將icon放上去。這行可以省略。
35.     
36.     #計算機顯示數字的部件
37.     def _createDisplay(self):
38.         self.display = QLineEdit() #設定display，顯示只要一行
39.         self.display.setFixedHeight(35)  #顯示幕的高度
40.         self.display.setAlignment(Qt.AlignRight)  #靠右顯示
41.         self.display.setReadOnly(True)  #設定唯讀
42.         
43.         self.generalLayout.addWidget(self.display) #將以上設定加入整體垂直設定中
44.         
45.     def _createButtons(self):
46.         self.buttons = {}
47.         buttonsLayout = QGridLayout()
48.         #在字典中，設定按鈕顯示的數字和在格狀排列中的座標
49.         buttons = {'7': (0, 0),
50.                    '8': (0, 1),
51.                    '9': (0, 2),
52.                    '/': (0, 3),
53.                    'C': (0, 4),
54.                    '4': (1, 0),
55.                    '5': (1, 1),
56.                    '6': (1, 2),
57.                    '*': (1, 3),
58.                    '(': (1, 4),
59.                    '1': (2, 0),
60.                    '2': (2, 1),
61.                    '3': (2, 2),
62.                    '-': (2, 3),
63.                    ')': (2, 4),
64.                    '0': (3, 0),
65.                    '00': (3, 1),
66.                    '.': (3, 2),
67.                    '+': (3, 3),
68.                    '=': (3, 4),
69.                   }
70.         #取出字典中的文字和座標，一一擺進格狀排列中
71.         for btnText, pos in buttons.items():
72.             self.buttons[btnText] = QPushButton(btnText)  #設定按鈕實體，以及顯示的文字
73.             self.buttons[btnText].setFixedSize(40, 40)    #設定按鈕大小
74.             buttonsLayout.addWidget(self.buttons[btnText], pos[0], pos[1])  #擺進格狀排列
75.             
76.             self.generalLayout.addLayout(buttonsLayout)#將以上設定加入整體垂直設定中
77.     #補PyCalcUi的3個methods，在PyCalcCtrl中被呼叫。
    
78.     def setDisplayText(self, text):
79.         """Set display's text."""
80.         self.display.setText(text)
81.         self.display.setFocus()
82. 
    
83.     def displayText(self):
84.         """Get display's text."""
85.         return self.display.text()
86. 
    
87.     def clearDisplay(self):
88.         """Clear the display."""
89.         self.setDisplayText("")
90.             
91. #建立Controller
92. class PyCalcCtrl:
93.     def __init__(self, view):
94.         self._view = view  #初始化參數view(PyCalcUi實體)
95.         self._connectSignals() #呼叫方法
96.     
97.     #顯示幕上的文字處理
98.     def _buildExpression(self, sub_exp):
99.         expression = self._view.displayText() + sub_exp
100.         self._view.setDisplayText(expression)
101.     
102.     #連結事件和處理程式
103.     def _connectSignals(self):
104.         #掃描所有按鍵，有click，就呼叫_buildExpression。
105.         for btnText, btn in self._view.buttons.items():
106.             if btnText not in {'=', 'C'}:
107.                 btn.clicked.connect(partial(self._buildExpression, btnText)) #有click，才會呼叫_buildExpression
108. 
     
109.         self._view.buttons['C'].clicked.connect(self._view.clearDisplay)
110.     
111. # 主程式
112. def main():
113.     pycalc = QApplication(sys.argv)  #建立app
114.     view = PyCalcUi()  #建立主視窗實體
115.     view.show()  #顯示
116.     
117.     #處理按鍵和顯示幕的文字
118.     PyCalcCtrl(view=view)
119. 
     
120.     sys.exit(pycalc.exec())
121. 
     
122. if __name__ == '__main__':
123.     main()

• 最後的計算及按錯時的處理。  pycalc04.py

1. #04-完整程式。
2. #處理「=」「enter」事件及計算答案。  pycalc04.py
3. 
   
4. import sys
5. 
   
6. from PyQt5.QtWidgets import QApplication  #qt應用程式
7. from PyQt5.QtWidgets import QMainWindow  #qt主視窗
8. from PyQt5.QtWidgets import QWidget  #qt總部件
9. from PyQt5 import QtGui  #為了加一個window icon，這裡可以省略。
10. from PyQt5.QtCore import Qt  #一般性質的設定
11. from PyQt5.QtWidgets import QGridLayout  #格狀排列
12. from PyQt5.QtWidgets import QLineEdit   #單行文字
13. from PyQt5.QtWidgets import QPushButton  #按鈕
14. from PyQt5.QtWidgets import QVBoxLayout  #垂直排列
15. from functools import partial  #有關function的工作
16. 
    
17. #這是原作者，感謝。
18. __version__ = '0.1'
19. __author__ = 'Leodanis Pozo Ramos'
20. 
    
21. ERROR_MSG = '算式錯誤'
22. #定義主視窗，繼承自QMainWindow
23. class PyCalcUi(QMainWindow):
24.     #初始化，訂定視窗外觀
25.     def __init__(self):
26.         super().__init__()
27.         self.setWindowTitle('py小計算機')
28.         self.setFixedSize(235, 235) #固定大小，免得計算機變形。
29.         self.generalLayout = QVBoxLayout() #整體的部件是垂直排列
30.         # 建立中央部件
31.         self._centralWidget = QWidget(self)  #先建立總部件實體(self相當於parent=self，top level的物件沒有parent了，所以不能省略。)
32.         self.setCentralWidget(self._centralWidget)  #再設定成中央部件
33.         self._centralWidget.setLayout(self.generalLayout)  #中央部件就設定為整體垂直排列
34.         self._createDisplay() #計算機顯示數字的部件
35.         self._createButtons() #計算機顯示按鈕的部件
36. 
    
37.         #self.setWindowIcon(QtGui.QIcon('icon.png'))  #這行將icon放上去。這行可以省略。
38.     
39.     #計算機顯示數字的部件
40.     def _createDisplay(self):
41.         self.display = QLineEdit() #設定display，顯示只要一行
42.         self.display.setFixedHeight(35)  #顯示幕的高度
43.         self.display.setAlignment(Qt.AlignRight)  #靠右顯示
44.         self.display.setReadOnly(True)  #設定唯讀
45.         
46.         self.generalLayout.addWidget(self.display) #將以上設定加入整體垂直設定中
47.         
48.     def _createButtons(self):
49.         self.buttons = {}
50.         buttonsLayout = QGridLayout()
51.         #在字典中，設定按鈕顯示的數字和在格狀排列中的座標
52.         buttons = {'7': (0, 0),
53.                    '8': (0, 1),
54.                    '9': (0, 2),
55.                    '/': (0, 3),
56.                    'C': (0, 4),
57.                    '4': (1, 0),
58.                    '5': (1, 1),
59.                    '6': (1, 2),
60.                    '*': (1, 3),
61.                    '(': (1, 4),
62.                    '1': (2, 0),
63.                    '2': (2, 1),
64.                    '3': (2, 2),
65.                    '-': (2, 3),
66.                    ')': (2, 4),
67.                    '0': (3, 0),
68.                    '00': (3, 1),
69.                    '.': (3, 2),
70.                    '+': (3, 3),
71.                    '=': (3, 4),
72.                   }
73.         #取出字典中的文字和座標，一一擺進格狀排列中
74.         for btnText, pos in buttons.items():
75.             self.buttons[btnText] = QPushButton(btnText)  #設定按鈕實體，以及顯示的文字
76.             self.buttons[btnText].setFixedSize(40, 40)    #設定按鈕大小
77.             buttonsLayout.addWidget(self.buttons[btnText], pos[0], pos[1])  #擺進格狀排列
78.             
79.         self.generalLayout.addLayout(buttonsLayout)#將以上設定加入整體垂直設定中
80.     
81.     def setDisplayText(self, text):
82.         """Set display's text."""
83.         self.display.setText(text)
84.         self.display.setFocus()
85. 
    
86.     def displayText(self):
87.         """Get display's text."""
88.         return self.display.text()
89. 
    
90.     def clearDisplay(self):
91.         """Clear the display."""
92.         self.setDisplayText("")
93. 
    
94. #這是一個獨立的functions，就是model部份        
95. def evaluateExpression(expression):
96.     try:
97.         result = str(eval(expression, {}, {})) #eval(expression, globals=None, locals=None)全域變數和區域變數
98.     except Exception:
99.         result = ERROR_MSG
100. 
     
101.     return result
102.     
103. #建立Controller
104. class PyCalcCtrl:
105.     #Control溝通model和view：view處理所有的顯示，model處理所有的後端計算，Control就是二者的交會處。
106.     def __init__(self,model, view):
107.         self._evaluate = model #model就是evaluateExpression
108.         self._view = view  #初始化參數view(PyCalcUi實體)
109.         self._connectSignals() #呼叫方法
110.     
111.     #計算答案，間接承接自model的function，來算答案。
112.     def _calculateResult(self):
113.         result = self._evaluate(expression=self._view.displayText())
114.         self._view.setDisplayText(result)
115. 
     
116.     #顯示幕上的文字處理
117.     def _buildExpression(self, sub_exp):
118.         #先檢查，如果之前是錯誤的訊息，就先清除
119.         if self._view.displayText() == ERROR_MSG:
120.             self._view.clearDisplay()
121. 
     
122.         expression = self._view.displayText() + sub_exp
123.         self._view.setDisplayText(expression)
124.     
125.     #連結事件和處理程式
126.     def _connectSignals(self):
127.         #掃描所有按鍵，有click，就呼叫_buildExpression。
128.         for btnText, btn in self._view.buttons.items():
129.             if btnText not in {'=', 'C'}:
130.                 btn.clicked.connect(partial(self._buildExpression, btnText)) #有click，才會呼叫_buildExpression
131.                 
132.         self._view.buttons['='].clicked.connect(self._calculateResult) #按=就算答案
133.         self._view.display.returnPressed.connect(self._calculateResult) #按enter就算答案
134. 
     
135.         self._view.buttons['C'].clicked.connect(self._view.clearDisplay)
136.     
137. # 主程式
138. def main():
139.     pycalc = QApplication(sys.argv)  #建立app
140.     view = PyCalcUi()  #建立主視窗實體
141.     view.show()  #顯示
142.     
143.     #處理按鍵和顯示幕的文字，model算出答案
144.     model = evaluateExpression
145.     PyCalcCtrl(model=model, view=view)
146. 
     
147.     sys.exit(pycalc.exec())
148. 
     
149. if __name__ == '__main__':
150.     main()