Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
超酷炫科幻 UI
QML 入門
Fred Chien
錢逢祥
超酷炫科幻 UI
你會想到什麼?
QML
Qt Modeling Language
import QtQuick 2.3
import QtQuick.Controls 1.3
ApplicationWindow {
visible: true;
width: 200;
height: 200;
}
長相如下:
http://qt.io/
5.0, 5.1, 5.2, 5.3 or 5.4+
Qt 5
Windows, Linux, Mac OS
Cross-platform
Android, iOS...
Cross-platform
就想到 C++
很多人看到 Qt
Don't Worry
別擔心
我們今天絕對不會用到
我們只會提到
QML
Qt Modeling Language
There are serval way to play QML
你有幾種方式可以跑 QML
Linux 使用者唯一的方法
直接裝 Qt
Windows & Mac 使用者
使用 OwaViewer
從例子來看
基本用法
import QtQuick 2.3
import QtQuick.Controls 1.3
ApplicationWindow {
visible: true;
width: 800;
height: 600;
}
第一個例子
import QtQuick 2.3
import QtQuick.Controls 1.3
ApplicationWindow {
visible: true;
width: 800;
height: 600;
}
第一個例子
一個 QML ...
import QtQuick 2.3
import QtQuick.Controls 1.3
ApplicationWindow {
visible: true;
width: 800;
height: 600;
}
第一個例子
控制相關模組
import QtQuick 2.3
import QtQuick.Controls 1.3
ApplicationWindow {
visible: true;
width: 800;
height: 600;
}
第一個例子
元件類型 {
...
import QtQuick 2.3
import QtQuick.Controls 1.3
ApplicationWindow {
visible: true;
width: 800;
height: 600;
}
第一個例子
視窗可顯示
視...
自己打造的視窗!
現在你有一個視窗了!
加入一個元件到視窗中
加入一張圖片吧
Image {
x: 50;
y: 80;
width: 200;
height: 200;
source: 'example.jpg'
}
圖片元件的基本使用
x 軸座標位置
y 軸座標位置
圖片寬度
圖片高度
圖片檔案位置
import QtQuick 2.3
import QtQuick.Controls 2.3
ApplicationWindow {
visible: true;
width: 800;
height: 600;
}
加入元件到視窗中
import QtQuick 2.3
import QtQuick.Controls 2.3
ApplicationWindow {
visible: true;
width: 800;
height: 600;
Image { ... }
}...
Text 元件
加入一段文字吧
Text {
x: 50;
y: 80;
font.pointSize: 20;
text: 'QML Workshop';
color: '#ffffff';
}
文字元件的基本使用
字體大小
字串內容
字體顏色
font.bold: true;
font.family: 'Arial';
font.italic: true;
font.underline: true;
font.strikeout: true;
lineHeight: true;
ho...
Rectangle 元件
矩形色塊
Rectangle {
x: 50;
y: 80;
width: 200;
height: 200;
radius: 5;
color: 'red';
}
矩形元件的基本使用
gradient: Gradient {
GradientStop { position: 0.0; color: '#000000' }
GradientStop { position: 1.0; color: '#ffffff' }
}
矩...
特異功能由此開始
元件的基本屬性
visible: true;
opacity: 0.5;
rotation: 45;
scale: 0.5;
常用基本屬性
是否可見
透明度
旋轉角度
尺寸大小
Layout
排版
anchors.left
anchors.right
anchors.top
anchors.bottom
anchors.centerIn
Anchors 常用屬性
Animation
動畫
NumberAnimation {
target: box;
running: true;
property: 'opacity';
from: 0;
to: 1;
duration: 1000;
easing.type: Easing.Lin...
ColorAnimation {
target: box;
running: true;
property: 'color';
to: 'yellow';
duration: 1000;
easing.type: Easing.Linear;
...
SequentialAnimation {
running: true;
loops: 3;
}
有序動畫元件
循環次數
若想無限循環,可設 loops 為 Animation.Infinite
SequentialAnimation {
running: true;
NumberAnimation { ... }
NumberAnimation { ... }
NumberAnimation { ... }
NumberAnimati...
ParallelAnimation {
running: true;
NumberAnimation { ... }
NumberAnimation { ... }
NumberAnimation { ... }
NumberAnimation...
更多練習
More Examples
超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門
Upcoming SlideShare
Loading in …5
×

超酷炫科幻 UI:QML 入門

8,659 views

Published on

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

Published in: Software
  • Be the first to comment

超酷炫科幻 UI:QML 入門

  1. 1. 超酷炫科幻 UI QML 入門
  2. 2. Fred Chien 錢逢祥
  3. 3. 超酷炫科幻 UI 你會想到什麼?
  4. 4. QML Qt Modeling Language
  5. 5. import QtQuick 2.3 import QtQuick.Controls 1.3 ApplicationWindow { visible: true; width: 200; height: 200; } 長相如下:
  6. 6. http://qt.io/
  7. 7. 5.0, 5.1, 5.2, 5.3 or 5.4+ Qt 5
  8. 8. Windows, Linux, Mac OS Cross-platform
  9. 9. Android, iOS... Cross-platform
  10. 10. 就想到 C++ 很多人看到 Qt
  11. 11. Don't Worry 別擔心
  12. 12. 我們今天絕對不會用到
  13. 13. 我們只會提到
  14. 14. QML Qt Modeling Language
  15. 15. There are serval way to play QML 你有幾種方式可以跑 QML
  16. 16. Linux 使用者唯一的方法 直接裝 Qt
  17. 17. Windows & Mac 使用者 使用 OwaViewer
  18. 18. 從例子來看 基本用法
  19. 19. import QtQuick 2.3 import QtQuick.Controls 1.3 ApplicationWindow { visible: true; width: 800; height: 600; } 第一個例子
  20. 20. import QtQuick 2.3 import QtQuick.Controls 1.3 ApplicationWindow { visible: true; width: 800; height: 600; } 第一個例子 一個 QML 檔案中 最基本的模組
  21. 21. import QtQuick 2.3 import QtQuick.Controls 1.3 ApplicationWindow { visible: true; width: 800; height: 600; } 第一個例子 控制相關模組
  22. 22. import QtQuick 2.3 import QtQuick.Controls 1.3 ApplicationWindow { visible: true; width: 800; height: 600; } 第一個例子 元件類型 { 屬性: 參數 ... }
  23. 23. import QtQuick 2.3 import QtQuick.Controls 1.3 ApplicationWindow { visible: true; width: 800; height: 600; } 第一個例子 視窗可顯示 視窗寬度 視窗高度
  24. 24. 自己打造的視窗! 現在你有一個視窗了!
  25. 25. 加入一個元件到視窗中 加入一張圖片吧
  26. 26. Image { x: 50; y: 80; width: 200; height: 200; source: 'example.jpg' } 圖片元件的基本使用 x 軸座標位置 y 軸座標位置 圖片寬度 圖片高度 圖片檔案位置
  27. 27. import QtQuick 2.3 import QtQuick.Controls 2.3 ApplicationWindow { visible: true; width: 800; height: 600; } 加入元件到視窗中
  28. 28. 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' }
  29. 29. Text 元件 加入一段文字吧
  30. 30. Text { x: 50; y: 80; font.pointSize: 20; text: 'QML Workshop'; color: '#ffffff'; } 文字元件的基本使用 字體大小 字串內容 字體顏色
  31. 31. font.bold: true; font.family: 'Arial'; font.italic: true; font.underline: true; font.strikeout: true; lineHeight: true; horizontalAlignment: Text.AlignHCenter; verticalAlignment: Text.AlignVCenter; 文字元件的更多常用屬性
  32. 32. Rectangle 元件 矩形色塊
  33. 33. Rectangle { x: 50; y: 80; width: 200; height: 200; radius: 5; color: 'red'; } 矩形元件的基本使用
  34. 34. gradient: Gradient { GradientStop { position: 0.0; color: '#000000' } GradientStop { position: 1.0; color: '#ffffff' } } 矩形元件的漸層填色屬性
  35. 35. 特異功能由此開始 元件的基本屬性
  36. 36. visible: true; opacity: 0.5; rotation: 45; scale: 0.5; 常用基本屬性 是否可見 透明度 旋轉角度 尺寸大小
  37. 37. Layout 排版
  38. 38. anchors.left anchors.right anchors.top anchors.bottom anchors.centerIn Anchors 常用屬性
  39. 39. Animation 動畫
  40. 40. NumberAnimation { target: box; running: true; property: 'opacity'; from: 0; to: 1; duration: 1000; easing.type: Easing.Linear; } 動畫元件範例 對特定元件套用動畫 對特定屬性做變化 啟用動畫 動畫持續一秒 線性加速 數值起始點 數值終止點
  41. 41. ColorAnimation { target: box; running: true; property: 'color'; to: 'yellow'; duration: 1000; easing.type: Easing.Linear; } 顏色動畫元件 對特定元件套用動畫 對特定屬性做變化 啟用動畫 動畫持續一秒 線性加速 數值終止點
  42. 42. SequentialAnimation { running: true; loops: 3; } 有序動畫元件 循環次數 若想無限循環,可設 loops 為 Animation.Infinite
  43. 43. SequentialAnimation { running: true; NumberAnimation { ... } NumberAnimation { ... } NumberAnimation { ... } NumberAnimation { ... } } 有序動畫元件 完成後才跑下一個動畫
  44. 44. ParallelAnimation { running: true; NumberAnimation { ... } NumberAnimation { ... } NumberAnimation { ... } NumberAnimation { ... } } 平行動畫元件 全部動畫同時一起跑
  45. 45. 更多練習 More Examples

×