學習使用 QML，打造超酷炫科幻 UI。

1. 超酷炫科幻 UI
QML 入門

2. Fred Chien
錢逢祥

3. 超酷炫科幻 UI
你會想到什麼？

8. QML
Qt Modeling Language

9. import QtQuick 2.3
import QtQuick.Controls 1.3
ApplicationWindow {
visible: true;
width: 200;
height: 200;
}
長相如下：

10. http://qt.io/

11. 5.0, 5.1, 5.2, 5.3 or 5.4+
Qt 5

12. Windows, Linux, Mac OS
Cross-platform

13. Android, iOS...
Cross-platform

15. 就想到 C++
很多人看到 Qt

16. Don't Worry
別擔心

17. 我們今天絕對不會用到

18. 我們只會提到

19. QML
Qt Modeling Language

21. There are serval way to play QML
你有幾種方式可以跑 QML

22. Linux 使用者唯一的方法
直接裝 Qt

23. Windows & Mac 使用者
使用 OwaViewer

25. 從例子來看
基本用法

26. import QtQuick 2.3
import QtQuick.Controls 1.3
ApplicationWindow {
visible: true;
width: 800;
height: 600;
}
第一個例子

27. import QtQuick 2.3
import QtQuick.Controls 1.3
ApplicationWindow {
visible: true;
width: 800;
height: 600;
}
第一個例子
一個 QML 檔案中
最基本的模組

28. import QtQuick 2.3
import QtQuick.Controls 1.3
ApplicationWindow {
visible: true;
width: 800;
height: 600;
}
第一個例子
控制相關模組

29. import QtQuick 2.3
import QtQuick.Controls 1.3
ApplicationWindow {
visible: true;
width: 800;
height: 600;
}
第一個例子
元件類型 {
屬性: 參數
...
}

30. import QtQuick 2.3
import QtQuick.Controls 1.3
ApplicationWindow {
visible: true;
width: 800;
height: 600;
}
第一個例子
視窗可顯示
視窗寬度
視窗高度

31. 自己打造的視窗！
現在你有一個視窗了！

32. 加入一個元件到視窗中
加入一張圖片吧

33. Image {
x: 50;
y: 80;
width: 200;
height: 200;
source: 'example.jpg'
}
圖片元件的基本使用
x 軸座標位置
y 軸座標位置
圖片寬度
圖片高度
圖片檔案位置

34. import QtQuick 2.3
import QtQuick.Controls 2.3
ApplicationWindow {
visible: true;
width: 800;
height: 600;
}
加入元件到視窗中

35. import QtQuick 2.3
import QtQuick.Controls 2.3
ApplicationWindow {
visible: true;
width: 800;
height: 600;
Image { ... }
}
加入元件到視窗中
Image {
x: 50;
y: 80;
width: 200;
height: 200;
source: 'example.jpg'
}

36. Text 元件
加入一段文字吧

37. Text {
x: 50;
y: 80;
font.pointSize: 20;
text: 'QML Workshop';
color: '#ffffff';
}
文字元件的基本使用
字體大小
字串內容
字體顏色

38. font.bold: true;
font.family: 'Arial';
font.italic: true;
font.underline: true;
font.strikeout: true;
lineHeight: true;
horizontalAlignment: Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter;
文字元件的更多常用屬性

39. Rectangle 元件
矩形色塊

40. Rectangle {
x: 50;
y: 80;
width: 200;
height: 200;
radius: 5;
color: 'red';
}
矩形元件的基本使用

41. gradient: Gradient {
GradientStop { position: 0.0; color: '#000000' }
GradientStop { position: 1.0; color: '#ffffff' }
}
矩形元件的漸層填色屬性

42. 特異功能由此開始
元件的基本屬性

43. visible: true;
opacity: 0.5;
rotation: 45;
scale: 0.5;
常用基本屬性
是否可見
透明度
旋轉角度
尺寸大小

44. Layout
排版

46. anchors.left
anchors.right
anchors.top
anchors.bottom
anchors.centerIn
Anchors 常用屬性

47. Animation
動畫

48. NumberAnimation {
target: box;
running: true;
property: 'opacity';
from: 0;
to: 1;
duration: 1000;
easing.type: Easing.Linear;
}
動畫元件範例
對特定元件套用動畫
對特定屬性做變化
啟用動畫
動畫持續一秒
線性加速
數值起始點
數值終止點

49. ColorAnimation {
target: box;
running: true;
property: 'color';
to: 'yellow';
duration: 1000;
easing.type: Easing.Linear;
}
顏色動畫元件
對特定元件套用動畫
對特定屬性做變化
啟用動畫
動畫持續一秒
線性加速
數值終止點

50. SequentialAnimation {
running: true;
loops: 3;
}
有序動畫元件
循環次數
若想無限循環，可設 loops 為 Animation.Infinite

51. SequentialAnimation {
running: true;
NumberAnimation { ... }
NumberAnimation { ... }
NumberAnimation { ... }
NumberAnimation { ... }
}
有序動畫元件
完成後才跑下一個動畫

52. ParallelAnimation {
running: true;
NumberAnimation { ... }
NumberAnimation { ... }
NumberAnimation { ... }
NumberAnimation { ... }
}
平行動畫元件
全部動畫同時一起跑

53. 更多練習
More Examples