從零開始的股票預測程式開發（二）
前端開發：QtDesigner
第二篇：應用程式開發－前端
一、前言
在上一篇文章中，我們提到了一些開發環境上的建置設定，也做了一些簡單的練習。在本篇中，我們會就練習更多前端的功能：
1. 控制字體大小、顏色及位置
2. 控制使用者輸入欄位
3. 修改窗口的標題、Icon及背景
現在，就讓我們開始：）
二、控制字體大小、顏色及位置
我們將上次的 Function.py 再拿出來！這次我們要再加幾行程式碼：
我們會使用上一篇的 Label 元件進行。我們在第20行設定字體、大小；第21行設定字框的位置、大小。這邊值得注意的是：這邊需要於開頭處 import QtGui、QtCore，後面的 function 會用到！另外，在 QRect 中的x、y分別代表顯示文字，以左上角為原點，向右、向下多少像素（#QRect(int x, int y, int width, int height)）！
接下來點按按鈕，成果就會出現了！（圖一）◝( ﾟ∀ ﾟ )◟
但這樣還不夠，我們還想要更多！ヾ(●゜▽゜●)♡
接下來，我們要調整文字的顏色，這邊就可以用第23–27行的 function：QPalette()。注意：要使用這個功能，須先在開頭加入 package：QPalette，始得執行。（圖二）
這邊可以設定喜歡的顏色，愈來愈有樣子了！(╭￣3￣)╭
三、控制使用者輸入欄位
如果要讓使用者選擇想要看哪款股票，我們就必須有使用者輸入欄位（如果你們還記得我們要做的是股票預測的話^^）。為此，我們將使用 QLineEdit。
首先，打開 QtDesigner，開啟之前做的.ui。（圖三）
接下來，在左手邊分別將 Push Button、Line Edit 與 Label 拖曳至版面上。此時，版面上會出現上次的 Label、Button 以及剛剛拉出的三個元件。（圖四）
最後，一樣延續上一篇的方法，用 PyUIC 將 .ui 轉 .py 即可。
下面是我們得到的 .py：
新增元件後，接下來就是要想辦法控制它。
在解釋之前要特別提醒一下：程式碼中的路徑建議使用雙反斜線，才能避免被認為是DOS命令提示符喔！
第18行我們放 ”Hi” 於 LineEdit；第43行 button2Clicked 負責讀取使用者輸入，並與第19行連結，將使用者輸入呈現於 Label 上。這邊要特別注意button objectName 有沒有輸入正確！（圖五）
四、修改窗口的標題、Icon及背景
在第20行中，我們使用 setWindowTitle() 來修改窗口的標題。在第21行中，我們使用 setWindowIcon() 來修改 Icon（要填入正確的路徑喔！）（圖六）
最後，我們要加入背景了！先在開頭 import QPixmap。然後在第23–25行，我們利用 Pixmap 讀出圖片、調整大小；在第27–29行，我們利用 Palette 將背景放上。（圖七）
如果將第28行的 QBrush(image) 改成 QtGui.QColor(200,200,100)（數值可以自己設，用來調整顏色），就可以顯示單色背景！（圖八）
在這篇中，我們練習了如何控制字體大小、顏色及位置、使用者輸入欄位，並修改了窗口的標題、Icon與背景。
在下一篇中，我們將進一步的利用目前為止練習的 QtDesigner 功能做出簡單的股票呈現程式，如果有任何想對我們說的，都可以留言回應喔！
那我們就下一篇見啦！(*ﾟ∀ﾟ*)
我們是 Craig & Jason，下次見！
