目標

1. 做出一個很像iphone計算機的東東(今天會完成外觀)
2. 將每個按鈕寫功能，但不是真正計算機的功能(下一篇會完成全部)

一、做計算機外觀

Step1:拉一個 label
objectName:showLabel
X:20
Y:220
寬:361
高:71
alignment:置右對齊，垂直置中
margin:10
font:36
styleSheet:

QLabel{
	color:white;
}

備註：儲存成 calculate.ui
Step2: 調整 MainWindow 的 property
寬:390
高:844
styleSheet:

QWidget {
    background-color: #000000;
}

Step3:做出 5 rows, 4 columns(共20個按鈕)

1. 先拉一個 Push Button
   寬：90
   高：90
   text：0
   styleSheet：

QPushButton {
    background-color: #A5A5A5;
    color: white;
    border: none;
    border-radius: 45px; /* 一半的寬高才能是圓形，這裡是 90x90 */
    font-size: 36px;
}
QPushButton:pressed {
    background-color: #555555;
}

備註：這邊為了讓整體看起來更像iphone界面，有特別去下載很像的字型，Inter-4.1，然後將font改為下載的字型(可做可不做)

2. 複製貼上剛剛做好的按鈕(共要四個)
   將這三顆按鈕分別擺在
   x:0 y:300
   x:100 y:300
   x:200 y:300
   x:300 y:300 (這個按鈕 stylesheeet 裡面 background-color 要設成 #A5A5A5)

3. 複製剛剛四個按鈕往下面一排貼上(現在總共八個按鈕)，我們現在要將第二排左邊三個按鈕改成黑色，很簡單把他們styleSheet 裡面 background-color 都設成 #333333

4. 現在將剛剛完成的第二排按鈕，複製貼上三次，如此我們現在已經有20個按鈕了！

5. 將每個按鈕裡面的 text：設成相對應的功能(這個步驟很繁瑣)

6. 將每個按鈕裡面的 objectName 取名字
   例如：7 這個按鈕就給它取 sevenButton，這裡幫按鈕們取名字，是因為之後如果要對他們操作才會方便，不然你想每個按鈕都叫PushButton12345，就很難分辨哪個是哪個

Step4: 將左下的按鈕設定成計算機的圖案，這邊你可以去找自己喜歡的計算機icon，我的話是用這個
接下來就將下載下來的圖片塞到按鈕裡面，點選要塞圖片的按鈕
icon：選擇你下載的圖片
iconSize:60x60

恭喜完成以上全部的設置，外觀看起來有模有樣了，成功的話畫面如下：

二、幫按鈕加功能

首先，要先將 calculate.ui 轉成 calculate.py 檔，我們輸入pyuic5 -x calculate.ui -o calculate.py

接著，打開 calculate.py，加上這個 press的函式

def press(self, pressed):
    self.showLabel.setText(pressed)

然後，找到類似這行self.acButton = QtWidgets.QPushButton(self.centralwidget)
在裡面加上我們剛剛建立的函式，像這樣：self.acButton = QtWidgets.QPushButton(self.centralwidget, clicked=lambda: self.press("AC"))

再來，執行看看python3 calculate.py，按下"AC"那個按鈕，畫面如下：

最後，將剩下的按鈕都完成，按下去分別都能顯示個別的功能，例如：按下5就會在showLabel那邊顯示5

恭喜大家今天完成了！！明天就來完成計算機的所有功能啦