#桌面上的計算機(三)--一些外觀上的修訂

• 只是在顯示效果，計算機並不能執行，請自行加在適當的地方。
• 必要的地方，使用「##」做了註解。
• 說明不多，請直接看程式的註解。
  

• 完整程式  icon

(以下只是練習，只有外觀，無法操作。)

• 原來的計算機外觀

• 練習加icon的方法  pycalc-r1.py
  

每一個視窗左上角都會有一個小圖示。你也可以自己加。

#加window icon import sys #只是為了使用在釋放程式的記憶體 from PyQt5.QtWidgets import QApplication #qt的應用程式 from PyQt5.QtWidgets import QLabel #qt的Label from PyQt5.QtWidgets import QWidget #qt的部件，就是我們要的視窗 ##目錄中要有icon.png from PyQt5 import QtGui  ##為了加一個window icon app = QApplication(sys.argv) #建立主程式的實體 app ，參數是一個list，如果不需要sys.argv，可以改成[] #以下一一建立程式中的顯示部件 window = QWidget() #建立視窗實體 window.setWindowTitle('第一個視窗程式') #視窗的抬頭 window.setGeometry(200, 200, 280, 80) #視窗的位置和大小(x,y,長,寬) #window.move(60, 15) #重新將視窗移到電腦螢幕的(60,15)位置 helloMsg = QLabel('<h1>Hello World!</h1>', parent=window) #建立標籤實體 helloMsg.move(60, 15) #標籤移到視窗中的某位置 window.setWindowIcon(QtGui.QIcon('icon.png'))  ##這行將icon放上去。 window.show() #將視窗設定為顯示 sys.exit(app.exec()) #開始執行應用程式，並在結束後，釋放記憶體。如果是python2，要用app.exec_()。

• 練習按鈕加顏色字型加大  pycalc-r2.py

##改變按鈕換字型和顏色 import sys from PyQt5.QtWidgets import QApplication  #qt應用程式 from PyQt5.QtWidgets import QMainWindow  #qt主視窗 from PyQt5.QtWidgets import QWidget  #qt總部件 from PyQt5 import QtGui  #為了加一個window icon，這裡可以省略。 from PyQt5.QtCore import Qt  ##一般性質的設定 from PyQt5.QtWidgets import QGridLayout  #格狀排列 from PyQt5.QtWidgets import QLineEdit   #單行文字 from PyQt5.QtWidgets import QPushButton  #按鈕 from PyQt5.QtWidgets import QVBoxLayout  #垂直排列 from functools import partial  #有關function的工作 #這是原作者，感謝。 __version__ = '0.1' __author__ = 'Leodanis Pozo Ramos' #定義主視窗，繼承自QMainWindow class PyCalcUi(QMainWindow):     #初始化，訂定視窗外觀     def __init__(self):         super().__init__()         self.setWindowTitle('py小計算機')         self.setFixedSize(235, 235) #固定大小，免得計算機變形。         self.generalLayout = QVBoxLayout() #整體的部件是垂直排列         # 建立中央部件         self._centralWidget = QWidget(self)  #先建立總部件實體(self相當於parent=self，top level的物件沒有parent了，所以不能省略。)         self.setCentralWidget(self._centralWidget)  #再設定成中央部件         self._centralWidget.setLayout(self.generalLayout)  #中央部件就設定為整體垂直排列         self._createDisplay() #計算機顯示數字的部件         self._createButtons() #計算機顯示按鈕的部件         #self.setWindowIcon(QtGui.QIcon('icon.png'))  #這行將icon放上去。這行可以省略。          #計算機顯示數字的部件     def _createDisplay(self):         self.display = QLineEdit() #顯示只要一行         self.display.setFixedHeight(35)  #顯示幕的高度         self.display.setAlignment(Qt.AlignRight)  #靠右顯示         self.display.setReadOnly(True)  #設定唯讀                  self.generalLayout.addWidget(self.display) #將以上設定加入整體垂直設定中              def _createButtons(self):         self.buttons = {}         buttonsLayout = QGridLayout()         #在字典中，設定按鈕顯示的數字和在格狀排列中的座標         buttons = {'7': (0, 0),                    '8': (0, 1),                    '9': (0, 2),                    '/': (0, 3),                    'C': (0, 4),                    '4': (1, 0),                    '5': (1, 1),                    '6': (1, 2),                    '*': (1, 3),                    '(': (1, 4),                    '1': (2, 0),                    '2': (2, 1),                    '3': (2, 2),                    '-': (2, 3),                    ')': (2, 4),                    '0': (3, 0),                    '00': (3, 1),                    '.': (3, 2),                    '+': (3, 3),                    '=': (3, 4),                   }         #取出字典中的文字和座標，一一擺進格狀排列中         for btnText, pos in buttons.items():             self.buttons[btnText] = QPushButton(btnText)  #設定按鈕實體，以及顯示的文字             ##設定字體             self.buttons[btnText].setStyleSheet('QPushButton {font: bold;font-size: 30px;}')                          ##set button color             if btnText in ['/','*','-','+','(',')']:                 self.buttons[btnText].setStyleSheet('QPushButton {background-color: #ff8028; color: white;font: bold;font-size: 30px;}')             elif btnText == '=':                 self.buttons[btnText].setStyleSheet('QPushButton {background-color: #01a2e8; color: white;font: bold;font-size: 30px;}')             elif btnText == 'C':                 self.buttons[btnText].setStyleSheet('QPushButton {background-color: #ed1d25; color: white;font: bold;font-size: 30px;}')                                       buttonsLayout.addWidget(self.buttons[btnText], pos[0], pos[1])  #擺進格狀排列                      self.generalLayout.addLayout(buttonsLayout)#將以上設定加入整體垂直設定中     def setDisplayText(self, text):         """Set display's text."""         self.display.setText(text)         self.display.setFocus()     def displayText(self):         """Get display's text."""         return self.display.text()     def clearDisplay(self):         """Clear the display."""         self.setDisplayText("") # 主程式 def main():     pycalc = QApplication(sys.argv)  #建立app     view = PyCalcUi()  #建立主視窗實體          view.show()       sys.exit(pycalc.exec()) if __name__ == '__main__':     main()

• 練習加中文的＋－÷×，看起來比較大方。  pycalc-r3.py

##換一下＋－÷×符號，看起來比較大方。 ##小心，這裡只是顯示用，後續要放到計算式裡面的時候，必需轉換回來/*，這樣eval()才能正確計算。 import sys from PyQt5.QtWidgets import QApplication  #qt應用程式 from PyQt5.QtWidgets import QMainWindow  #qt主視窗 from PyQt5.QtWidgets import QWidget  #qt總部件 from PyQt5 import QtGui  #為了加一個window icon，這裡可以省略。 from PyQt5.QtCore import Qt  #一般性質的設定 from PyQt5.QtWidgets import QGridLayout  #格狀排列 from PyQt5.QtWidgets import QLineEdit   #單行文字 from PyQt5.QtWidgets import QPushButton  #按鈕 from PyQt5.QtWidgets import QVBoxLayout  #垂直排列 from functools import partial  #有關function的工作 #這是原作者，感謝。 __version__ = '0.1' __author__ = 'Leodanis Pozo Ramos' #定義主視窗，繼承自QMainWindow class PyCalcUi(QMainWindow):     #初始化，訂定視窗外觀     def __init__(self):         super().__init__()         self.setWindowTitle('py小計算機')         self.setFixedSize(235, 235) #固定大小，免得計算機變形。         self.generalLayout = QVBoxLayout() #整體的部件是垂直排列         # 建立中央部件         self._centralWidget = QWidget(self)  #先建立總部件實體(self相當於parent=self，top level的物件沒有parent了，所以不能省略。)         self.setCentralWidget(self._centralWidget)  #再設定成中央部件         self._centralWidget.setLayout(self.generalLayout)  #中央部件就設定為整體垂直排列         self._createDisplay() #計算機顯示數字的部件         self._createButtons() #計算機顯示按鈕的部件         #self.setWindowIcon(QtGui.QIcon('icon.png'))  #這行將icon放上去。這行可以省略。          #計算機顯示數字的部件     def _createDisplay(self):         self.display = QLineEdit() #顯示只要一行         self.display.setFixedHeight(35)  #顯示幕的高度         self.display.setAlignment(Qt.AlignRight)  #靠右顯示         self.display.setReadOnly(True)  #設定唯讀                  self.generalLayout.addWidget(self.display) #將以上設定加入整體垂直設定中              def _createButtons(self):         self.buttons = {}         buttonsLayout = QGridLayout()         #在字典中，設定按鈕顯示的數字和在格狀排列中的座標         buttons = {'7': (0, 0),                    '8': (0, 1),                    '9': (0, 2),                    '÷': (0, 3), ##÷                    'C': (0, 4),                    '4': (1, 0),                    '5': (1, 1),                    '6': (1, 2),                    '×': (1, 3), ##×                    '(': (1, 4),                    '1': (2, 0),                    '2': (2, 1),                    '3': (2, 2),                    '－': (2, 3),##－                    ')': (2, 4),                    '0': (3, 0),                    '00': (3, 1),                    '.': (3, 2),                    '＋': (3, 3),##＋                    '=': (3, 4),                   }         #取出字典中的文字和座標，一一擺進格狀排列中         for btnText, pos in buttons.items():             self.buttons[btnText] = QPushButton(btnText)  #設定按鈕實體，以及顯示的文字             #設定字體             self.buttons[btnText].setStyleSheet('QPushButton {font: bold;font-size: 30px;}')                          #set button color             if btnText in ['＋','－','×','÷','(',')']:##這裡也改變了                 self.buttons[btnText].setStyleSheet('QPushButton {background-color: #ff8028; color: white;font: bold;font-size: 30px;}')             elif btnText == '=':                 self.buttons[btnText].setStyleSheet('QPushButton {background-color: #01a2e8; color: white;font: bold;font-size: 30px;}')             elif btnText == 'C':                 self.buttons[btnText].setStyleSheet('QPushButton {background-color: #ed1d25; color: white;font: bold;font-size: 30px;}')                                       buttonsLayout.addWidget(self.buttons[btnText], pos[0], pos[1])  #擺進格狀排列                      self.generalLayout.addLayout(buttonsLayout)#將以上設定加入整體垂直設定中     def setDisplayText(self, text):         """Set display's text."""         self.display.setText(text)         self.display.setFocus()     def displayText(self):         """Get display's text."""         return self.display.text()     def clearDisplay(self):         """Clear the display."""         self.setDisplayText("") # 主程式 def main():     pycalc = QApplication(sys.argv)  #建立app     view = PyCalcUi()  #建立主視窗實體          view.show()       sys.exit(pycalc.exec()) if __name__ == '__main__':     main()

p.s.

在def _buildExpression(self, sub_exp): 中，還必須把符號換回英數，才能正確執行。

#桌面上的計算機(一)--基礎認識

--使用PyQt套件

#原文出處

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

#摘要紀錄與說明

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

--PyQt5 是基於Qt5而來

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

--程式碼的說明，就在程式裡。

#測試小部件

• 建立虛擬環境    python -m venv myenv
  

• 安裝    pip install pyqt5

#第一個視窗hello world(ex1.py)

1. import sys #只是為了使用在釋放程式的記憶體
2. 
   
3. 
   
4. from PyQt5.QtWidgets import QApplication #qt的應用程式
5. from PyQt5.QtWidgets import QLabel #qt的Label
6. from PyQt5.QtWidgets import QWidget #qt的總部件，就是這個程式的視窗
7. 
   
8. app = QApplication(sys.argv) #建立主程式的實體 app ，參數是一個list，如果不需要sys.argv，可以改成[]
9. 
   
10. #以下一一建立程式中的顯示部件
11. window = QWidget() #建立視窗實體
12. window.setWindowTitle('PyQt5 App') #視窗的抬頭
13. window.setGeometry(200, 200, 280, 80) #視窗的位置和大小(x,y,長,寬)
14. #window.move(60, 15) #重新將視窗移到電腦螢幕的(60,15)位置
15. helloMsg = QLabel('<h1>Hello World!</h1>', parent=window) #建立標籤實體，qt5接受html標籤
16. helloMsg.move(60, 15) #標籤移到視窗中的某位置
17. 
    
18. window.show() #將視窗設定為顯示
19. 
    
20. 
    
21. sys.exit(app.exec()) #開始執行應用程式，並在結束後，釋放記憶體。如果是python2，要用app.exec_()。

p.s.載入要花一點時間，結果視窗關閉後，才能再回到命令列視窗。

#建立基本概念

1. Widgets：各種部件
2. Layout managers：排列部件的方式
3. Dialogs：對話視窗
4. Main windows：主視窗
5. Applications：程式
6. Event loops：監聽事件
7. Signals and slots：事件發出的訊號(signals)和對應的處理程式(slots)。

1. 各種部件

• Buttons：按鈕
• Labels：多行文字
• Line edits：單行文字
• Combo boxes：下拉列表
• Radio buttons：單選按鈕

......

2. 排列部件方式

1. QHBoxLayout：水平排列容器 ex2.py
   
2. QVBoxLayout：垂直排列容器 ex3.py
   
3. QGridLayout：格狀排列容器 ex4.py
   
   
   
4. QFormLayout：表單形式容器 ex5.py
   1. 

3. 對話視窗(和主視窗彼此獨立，可以想成就是一般軟體裡跳出來，讓我們設定內容的視窗)--初學應該先學主視窗

特性：

對話視窗有2個內定的按鈕，「ok」、「cancel」。

有model 和 modeless 二種，model要用建class。

model 要用.exec()呼叫，modeless則是用.show()

這裡的範例是使用model的對話視窗 ex6.py

4. 主視窗  ex7.py

特性：

內定有功能列、工具列、狀態列等等的排列部件

一定要有中央部件，才有內容嘛

可以開出對話視窗來完成特定功能

5. 程式

在這裡，運用的是MVC架構，程式就是Control。它從view監聽接收資料，轉到model去，model做好資料的運算，再藉由Control，送到view顯示。

6. 監聽事件

一個無限的迴圈，時時看看有沒有哪個部件發出訊號了。就是.exec()的運作。

註：python2 使用.exec_()，python3 使用.exec()和.exec_()都可以。(因為python2自己內部有.exec())

7. 事件發出的訊號和對應的處理程式  ex8.py

訊號，如滑鼠按鍵或鍵盤被按下等等，代表某一個部件狀態改變了，需要處理程式來做出必要的處置。

它們之間的機制有

一個訊號，發給一個或多個處理程式。

一個訊號，連結到另外一個訊號。

一個處理程式，處理多個訊號。

python程式寫法，widget.signal.connect(slot_function)

ex7.py 中的程式，btn.clicked.connect(greeting) 當按鈕按下去(click)，就執行greeting程式。

程式需要傳遞參數時，

在程式定義的部份，如同一般函數，將參數寫在(  )內，使用在字串之內時，用{  }。

在程式呼叫的部份，要使用functools.partial來間接呼叫。btn.clicked.connect(functools.partial(greeting,"world"))

p.s.使用functools，要先import functools。

請見 ex9.py