新增 pyqt5 readme
This commit is contained in:
parent
4b01871bc6
commit
9cd21bb219
|
@ -0,0 +1,94 @@
|
||||||
|
# Pyqt5
|
||||||
|
## Python QT安裝設定
|
||||||
|
### 1. 下載相關套件
|
||||||
|
輸入指令
|
||||||
|
pip install pyqt5-tools
|
||||||
|
|
||||||
|
![](http://140.125.21.65:8418/Education/Python/raw/branch/master/pyqt5/img/%E5%9C%96%E7%89%871.png)
|
||||||
|
### 並等待出現類似如下
|
||||||
|
![](http://140.125.21.65:8418/Education/Python/raw/branch/master/pyqt5/img/%E5%9C%96%E7%89%872.png)
|
||||||
|
|
||||||
|
### 2. 設定QT Designer快速操作功能
|
||||||
|
1. 按下setting->Tools->External Tools
|
||||||
|
2. 進入設定頁面後按下+號
|
||||||
|
3. Name:QtDesigner
|
||||||
|
4. Program:anaconda路徑\Library\bin\designer.exe
|
||||||
|
5. Arguments:$FileName$
|
||||||
|
6. Working directory:$FileDir$
|
||||||
|
|
||||||
|
![](http://140.125.21.65:8418/Education/Python/raw/branch/master/pyqt5/img/%E5%9C%96%E7%89%873.png)
|
||||||
|
|
||||||
|
### *. 如果不知道Anaconda安裝路徑
|
||||||
|
1. 在windows底下找到anaconda Navigator
|
||||||
|
2. 右鍵->更多->開啟檔案位置
|
||||||
|
3. 選到anaconda Navigator右鍵->內容
|
||||||
|
4. 選擇開啟檔案位置即可知道anaconda安裝位置
|
||||||
|
|
||||||
|
![](http://140.125.21.65:8418/Education/Python/raw/branch/master/pyqt5/img/%E5%9C%96%E7%89%874.png)
|
||||||
|
|
||||||
|
### 3. 設定UIC
|
||||||
|
1. 如果pyuic5在對應的路徑底下找不到
|
||||||
|
2. 請至anaconda資料夾底下直接搜尋
|
||||||
|
3. 並將對應的路徑填入Program中
|
||||||
|
|
||||||
|
![](http://140.125.21.65:8418/Education/Python/raw/branch/master/pyqt5/img/%E5%9C%96%E7%89%875.png)
|
||||||
|
##
|
||||||
|
## UI 教學
|
||||||
|
### 1. 創建一個UI介面
|
||||||
|
1. 在專案資料夾按下右鍵->External Tools->QtDesigner(此名稱會依據剛剛設定快速操作功能時名稱設定不同顯示不同)
|
||||||
|
2. 跳出最右邊的畫面即可開始編制UI介面
|
||||||
|
|
||||||
|
![](http://140.125.21.65:8418/Education/Python/raw/branch/master/pyqt5/img/%E5%9C%96%E7%89%876.png)
|
||||||
|
|
||||||
|
3. 選擇MainWindows範本
|
||||||
|
4. 可從旁邊工具箱中拖曳所需之物件
|
||||||
|
|
||||||
|
![](http://140.125.21.65:8418/Education/Python/raw/branch/master/pyqt5/img/%E5%9C%96%E7%89%877.png)
|
||||||
|
|
||||||
|
### 2. UI內部需注意之參數
|
||||||
|
1. 選擇到物件時即可查看此元件能設定之參數
|
||||||
|
2. 須注意objectName,python呼叫元件皆需要知道元件名稱,須清楚知道自己取了甚麼名稱
|
||||||
|
|
||||||
|
![](http://140.125.21.65:8418/Education/Python/raw/branch/master/pyqt5/img/%E5%9C%96%E7%89%878.png)
|
||||||
|
|
||||||
|
### 3. 儲存UI畫面
|
||||||
|
1. 選擇到物件時即可查看此元件
|
||||||
|
2. 儲存名字隨興後續程式呼叫名稱統一即可
|
||||||
|
|
||||||
|
![](http://140.125.21.65:8418/Education/Python/raw/branch/master/pyqt5/img/%E5%9C%96%E7%89%879.png)
|
||||||
|
|
||||||
|
### *. 佈局
|
||||||
|
畫面佈局使用Layouts與Spacers工具規劃,UI元件可動態變更大小
|
||||||
|
|
||||||
|
![](http://140.125.21.65:8418/Education/Python/raw/branch/master/pyqt5/img/%E5%9C%96%E7%89%8710.png)
|
||||||
|
|
||||||
|
### 4. 轉換UI畫面(.ui轉.py)
|
||||||
|
1. 回到專案資料夾中可以看到剛剛儲存的UI畫面
|
||||||
|
2. 右鍵->External Tools->UIC
|
||||||
|
3. 此時會出現一個依樣名稱的py檔,此檔案即為後續程式呼叫所需之檔案
|
||||||
|
|
||||||
|
![](http://140.125.21.65:8418/Education/Python/raw/branch/master/pyqt5/img/%E5%9C%96%E7%89%8711.png)
|
||||||
|
|
||||||
|
##
|
||||||
|
## 執行
|
||||||
|
### 第一次執行pythonQT
|
||||||
|
1. 第一次執行pythonQT
|
||||||
|
2. 創建一個主py檔
|
||||||
|
3. 資料夾底下最少需要3個檔案
|
||||||
|
|
||||||
|
![](http://140.125.21.65:8418/Education/Python/raw/branch/master/pyqt5/img/%E5%9C%96%E7%89%8712.png)
|
||||||
|
### 主程式內部
|
||||||
|
* 呼叫剛剛建立的UI至主程式中,須注意名稱需要一樣
|
||||||
|
|
||||||
|
![](http://140.125.21.65:8418/Education/Python/raw/branch/master/pyqt5/img/%E5%9C%96%E7%89%8713.png)
|
||||||
|
|
||||||
|
### 按鈕觸發
|
||||||
|
1. 呼叫UI上對應的按鈕
|
||||||
|
2. 設定按鈕點即時的動作
|
||||||
|
|
||||||
|
![](http://140.125.21.65:8418/Education/Python/raw/branch/master/pyqt5/img/%E5%9C%96%E7%89%8714.png)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user