被 Qt 快樂的玩弄

Transcript

1.  打開您的 IE 瀏覽器  在網址列鍵入 http://google.com/chrome/eula.html?standalone=1  下載完成後，關閉您的 IE 瀏覽器 1 前置準備
2. 被 Qt 快樂的玩弄 簡易視窗程式教學 2 作者：兩大類
3.  我不是大師，只是廢物！  Qt 太肥，而小弟太瘦，有錯請包涵。 3 不負責任宣告
4. 4 Qt cute?
5. 安裝 Qt(1/6) 5
6. 安裝 Qt(2/6) 6
7. 安裝 Qt(3/6) 7
8. 安裝 Qt(4/6) 8
9. 安裝 Qt(5/6) 9 Development Tools • Desktop Qt • Qt 4.8.0 (Desktop) • Desktop Qt 4.8 – MinGW Miscellaneous • MinGW 4.4 Documentation • Qt Documentation
10. 安裝 Qt(6/6) 10 搞定！
11. 推薦閱讀(1/3) 11 C++ GUI Programming with Qt 4, 2/e Jasmin Blanchette, Mark Summerfield
12. 推薦閱讀(2/3) 12 Foundations of Qt Development Johan Thelin
13. 推薦閱讀(3/3) 13 官方網站，綻放光芒。
14. 2. 往右走進入 NBA 社窩，搜尋左側書櫃 3. 將心儀的對象拿起，坐在地上開始閱讀 1. 打開教室的門。 沒有錢怎麼辦？ 14
15. C++ 的編譯方式 15 C++ source code 可執行檔 C++ 編譯器
16. Qt 的編譯方式 16 C++ source code 可執行檔 C++ 編譯器 Qt source code 神奇的 Qt 編譯器
17. 17 說法太混，不能接受？…好吧。
18. 真．C++ 編譯方式 18
19. 真．Qt 編譯方式 19 如 moc_blabla.cpp Qt 大部分的程式碼原本就是標準 C++
20.  打開你的 Qt creator  點選 File->New file or Project 開新專案  選擇 Other project 中的 Empty Qt project  在 Name 那一欄寫上專案的名稱  不要選擇 Shadow build (別緊張，方便觀察)  next 到底！ 20 DIY-1(1/3)
21.  選擇 Add New->C++ Source File  新增 main.cpp ./main.cpp 21 DIY-1(2/3)
22.  觀察 22 DIY-1(3/3)
23.  qmake –project  qmake  make 23 Qt 操作流程 src/1/>ls main.cpp src/1/>qmake –project main.cpp 1.pro src/1/>qmake main.cpp 1.pro Makefile src/1/>make … src/1/>ls 1* 1.pro Makefile main.cpp main.o
24.  Qt 可以分為兩個部分  函式庫 和 C++ 的一般的函式庫沒什麼不同  特殊功能 使用特殊功能，需要先經過 qmake 改造！ 有一些函式庫需要使用 Qt 的特殊功能 24
25.  Qt 的函式庫非常強大！  想想 KDE 吧~  我們會先介紹  一些好用的巨集  一些好用的函式  一些好用的容器(container) 25 Qt 函式庫
26.  問題，請條列印出三種動物chick, dog 和 pi  寫法一-使用 C++ 的 iterator 26 foreach(1/3)
27.  寫法一 – c 寫法 27 foreach(2/3) 短很多，但 animalList[i] 是啥？
28.  寫法三– 使用美美的 foreach 28 foreach(3/3) 快加入 python 的行列吧~~~ 注意！要引入 #include<QtGlobal>
29.  想得到的函式前面加個 q 或 Q 即可  qrand()  qAbs()  qSort() <- quick sort  … 29 好用函式
30.  C++ 的容器前面加個 Q 即可  用來完全取代 C++ 的容器  如  QList, QVector, QMap, QSet…  QLinkedList, QStack, QQueue, QStringList… 30 容器 Container
31.  最常用的 Container  不知道該用什麼 Container ？用 QList 就對了！  相容相當多種操作方式。 31 Container – QList(1/3)
32.  QList 32 Container – QList(2/3)
33.  size 的型態為 int  別當成 std::list  可由標準庫的 container 轉換  QList.fromStdList()  QList.fromStdVector()  QList.fromStdSet()  … 33 Container – QList(3/3)
34.  用來完全取代 std::string  裡面有一大堆處理字串的方法  replace, count, compare, insert, append… 34 Container – QString(1/2)
35.  C++ 的格式化字串很糟？  std::cout<<a<<“ “<<b<<“:”<<a<<endl;  放心，我們還有 Qt  QString(“%1 %2:%1\n”).arg(a).arg(b); 35 Container – QString(2/2) 注意：QString 應該 Qt 自己的方法印出， 不能用 std::cout ，除非用 qPrintable()
36. QString 超常用 QList 非常常用  QList<QString> 非常超常常用 but QList<QString> 有 14 字！該死！ 36 Container
37.  只有 11 個字 -> Win  繼承自 QList<QString> ，並做了一些優化 37 Container - QStringList
38.  萬物之始，Qt 的基礎 QObject~  就像是 Java 的 Object  Qt Object Model 的核心 38 QObject(1/9)
39.  這是一個關於 Qt 的非常溫馨的人倫故事。  Qt 的世界裡，每個物件都可以有自己的爸爸。  如果爸爸要死了，死前會把兒子全部殺掉。  若兒子要死了，死前會也通知一下自己的爸爸，免 得爸爸之後要殺死他的時候找不到人。 39 QObject(2/9)
40. 40 QObject(3/9) 爸爸 兒子1 兒子2 兒子3 不要和繼承搞混！
41.  現在~~我們設計一個 MyString 41 QObject(4/9)
42.  然後~ 42 QObject(5/9) 還記得忘記 delete 的時光嗎？還是昨天還在發生呢？
43.  其實可以改成 43 QObject(6/9) 重申一次，不要和繼承搞混了！
44.  現在~ 44 QObject(7/9)
45.  parent and children  可說是 Qt 賦予 C++ 類似 gc 的機制  對 Qt 來說是非常重要的機制  再重申一遍，不要被繼承搞混！ 45 QObject(8/9) parent child gc: Garbage Collection
46. Object Model  Signal and Slot  賦予 Qt 物件一些神奇的特性 46 QObject(9/9)
47.  從前，有一隻小雞，名叫「處處」  而有另一隻小雞，名叫「顯顯」 47 QObject-Signal and Slot(1/7) 處處 顯顯 我負責給顯顯資料 我負責把資料顯示出來
48.  處處會將資料傳給顯顯  顯顯在顯示完資料後，會通知處處  接到通知後，處處會再傳資料給顯顯 48 QObject-Signal and Slot(2/7) 顯顯 處處
49.  第一種做法  處處要傳訊息給顯顯，所以必須「知道」顯顯  顯顯要通知處處，所以也必須「知道」處處  第二種做法  回呼 – 一般 GUI 框架會用的方式  第三種做法  Qt 的 signal and slot ~~ 49 QObject-Signal and Slot(3/7)
50. signal  每個繼承自 QObject 的類別都可以有這個功能  對自己狀態的宣示  自己不需要「知道」要通知誰 50 QObject-Signal and Slot(4/7) 處處 宣示：我處理完資料了 「我不需要知道誰會接到我資料」 「接到的人自己會去處理」
51. slot  每個繼承自 QObject 的類別都可以有這個功能  可以接受 signal  不需要「知道」會被誰通知，只要格式ok即可 51 QObject-Signal and Slot(5/7) 接受：我會顯示收到的資料 「我不需要知道是誰丟資料給我」 「不是顯 顯也行，誰給我，我就做」 顯顯
52.  connect 函式  連接 signal 和 slot  讓 signal 和 slot 建立關連  connect(sender, signal, receiver, slot) 52 QObject-Signal and Slot(6/7)
53.  connect 函式  connect(處處, 送資料, 顯顯, 顯示資料);  connect(顯顯, 我搞定了, 處處, 繼續處理資料) QObject::connect(processorr, SIGNAL(send(string)), displayer, SLOT(display(string)) 53 QObject-Signal and Slot(7/7) SIGNAL, SLOT 是一個巨集
54. 注意事項 .h Q_OBJECT  signals  slots 54 DIY(1/3) 處處=>
55. 注意事項 .h Q_OBJECT  signals  slots 55 DIY(2/3) 顯顯=>
56. 56 DIY(3/3)
57. 57 重頭戲來啦~~
58.  Qt GUI 元件的基石  繼承自 QObject  你看得見的基本上都繼承自 QWidget 58 QWidget(1/3) 58 parent child 接下來會用到的元件，使用前 都要先引入喔~
59.  Widget.show()  顯示 GUI  若有兒子，也會一起顯示  建議設置完再 show  QApplication  GUI 程式都必須包含一個  app.exec() 表進入事件循環 59 QWidget(2/3)
60.  玩玩看  setWindowTitle()  resize() 60 QWidget(3/3)
61.  QLabel  可以顯示文字的標籤  繼承自 QWidget 61 QLabel 如果 Label 不設 爸爸會如何？
62.  按扭  按下去後，會發出 clicked() 這個 signal  Qt 在不同平台上會自動以不同的方式顯示 62 QPushButton
63.  可以用來輸入文字  可以呼叫 text() 來取得內容 63 QLineEdit Qt 中 getter/setter 的命名規則 setter • 會以 set 開始，以駱駝命名法命名 • e.g. setWindowTitle() getter • 一樣以駱駝命名法命名，但不加 get • e.g. windowTitle()
64.  Qt 最常用的元件，通常直接使用靜態函式  這類函式不需要使用 show()  會 block 在那兒~ 64 QMessageBox
65.  QFileDialog::open() 65 常用元件(1/3)
66.  QFontDialog::getFont() 66 常用元件(2/3)
67.  QColorDialog::getColor() 67 常用元件(3/3)
68.  惡作劇程式  點下去後會出現「chicken is smart!」這個錯誤訊息  重覆一百遍！ 68 練習題(1/3)
69.  參考解答 69 練習題(2/3)
70.  靜態函式只是把最常用的包裝，實際上原本的寫法 70 練習題(3/3) 可以用這種方式，改特殊的設定，像是增加透明度什麼的~
71. 一堆 QWidget…(1/2) 71
72. 一堆 QWidget…(2/2) 72 太多了… 自己去找吧~ 我把全部都放在那兒了
73.  Qt 提供二種版面配置的方式 手動配置版面的方式 使用Qt 的版面配置管理系統 73 Layout Manager(1/6)
74.  手動配置版面的方式  每個元件都要設定 自己的大小 父視窗的相對位置 一旦發生改變所要因應的行為 74 Layout Manager(2/6)
75.  手動配置版面的方式  setGeomertry  設定自己的大小  設定與父視窗的相對位置  resizeEvent(QResizeEvent*)  一旦需要重繪所需的行為 75 Layout Manager(3/6) setGeometry(x, y, w, h)
76.  若不實作 resizeEvent … 76 Layout Manager(4/6)
77.  使用Qt 的版面配置管理系統  主要有三項工具  QHBoxLayout：水平方向的排版  QVBoxLayout：垂直方向的排版  QGridLayout：網格排版 77 Layout Manager(5/6)
78.  QVBoxLayout 會自動幫忙管理界面  每個元件都可以自定義排版策略 78 Layout Manager(6/6)
79.  和檔案系統無關  可以和執行檔「黏」在一起 79 Resources System(1/3)
80.  Resource Collection Files(.qrc)  紀錄了 Qt 應用程式所使用的資源  XML 格式的文字檔  RESOURCE += resource.qrc 80 Resources System(2/3)
81.  正常情形下  QFile file(“data/自己的資料”);  使用資源系統  QFile file(“:/data/自己的資料”); 81 Resources System(3/3) <RCC> <qresource prefix=“/"> <file>data/自己的資料</file> </qresource> </RCC> 路徑可以自己指定，不一定是 真實的檔案路徑
82.  程式設計師的悲哀 – 會寫不會畫  UI 設計師的悲哀 – 會畫不會寫  於是 Qt Designer 誕生！ 82 Qt Designer(1/7)
83.  add New  Qt Designer Form Class 83 Qt Designer(2/7)
84.  選擇 Widget  輸入要建立的類別名 84 Qt Designer(3/7)
85.  稍微 see see 一下 85 Qt Designer(4/7)
86.  Form.h  Form.cpp  Form.ui  Designer 的專案格式(實際上為 XML 檔)  使用 uic 編譯，會變成 moc_form.h 檔 86 Qt Designer(5/7)
87. Qt Designer(6/7) 87
88.  怎麼使用 Designer 呢？  做投影片太麻煩了~ 直接動手做故看吧~ 88 Qt Designer(7/7)
89. 補充：Qt 的命名約定(1/2) 89  類別  應是名詞或名詞短語  class Chicken  函式  應是動詞或動詞短語  shout()  常數全部大寫  CHICKEN  布林變數  在 if 上會近似一個句子  bool isQualified  成員變數  使用共同的前綴  m_Color, m_Width  sm_Singleton, sm_ObjCount
90.  屬性有相應的 getters/setters 90 補充：Qt 的命名約定(2/2) 詳細的命名風格參考 Matthias Ettrich 寫的 Designing Qt-Style C++ APIs Getter Setter • 非布林型的 getters • color() // Qt 風 • getColor() //Java 風 • 布林型的 getters • isChecked() 或 isValid() • setColor(const Color& newColor)
91. 91 Qt 5 ? QML and Javascript
92. 92 The End 以後有機會再說吧~