超酷炫科幻 ui：qml 入門
TRANSCRIPT
超酷炫科幻 UIQML 入門
Fred Chien錢逢祥
超酷炫科幻 UI你會想到什麼？
QMLQt Modeling Language
import QtQuick 2.3import 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
別擔心
我們今天絕對不會用到
我們只會提到
QMLQt Modeling Language
There are serval way to play QML
你有幾種方式可以跑 QML
Linux 使用者唯一的方法
直接裝 Qt
Windows & Mac 使用者
使用 OwaViewer
從例子來看
基本用法
import QtQuick 2.3import QtQuick.Controls 1.3
ApplicationWindow {visible: true;width: 800;height: 600;
}
第一個例子
import QtQuick 2.3import QtQuick.Controls 1.3
ApplicationWindow {visible: true;width: 800;height: 600;
}
第一個例子一個 QML 檔案中
最基本的模組
import QtQuick 2.3import QtQuick.Controls 1.3
ApplicationWindow {visible: true;width: 800;height: 600;
}
第一個例子控制相關模組
import QtQuick 2.3import QtQuick.Controls 1.3
ApplicationWindow {visible: true;width: 800;height: 600;
}
第一個例子
元件類型 {屬性: 參數
...}
import QtQuick 2.3import 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.3import QtQuick.Controls 2.3
ApplicationWindow {visible: true;width: 800;height: 600;
}
加入元件到視窗中
import QtQuick 2.3import QtQuick.Controls 2.3
ApplicationWindow {visible: true;width: 800;height: 600;Image { ... }
}
加入元件到視窗中
Image {x: 50;y: 80;width: 200;height: 200;source: 'example.jpg'
}
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;horizontalAlignment: Text.AlignHCenter;verticalAlignment: Text.AlignVCenter;
文字元件的更多常用屬性
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.leftanchors.rightanchors.topanchors.bottomanchors.centerIn
Anchors 常用屬性
Animation
動畫
NumberAnimation {target: box;running: true;property: 'opacity';from: 0;to: 1;duration: 1000;easing.type: Easing.Linear;
}
動畫元件範例
對特定元件套用動畫
對特定屬性做變化
啟用動畫
動畫持續一秒
線性加速
數值起始點
數值終止點
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 { ... }NumberAnimation { ... }
}
有序動畫元件
完成後才跑下一個動畫
ParallelAnimation {running: true;NumberAnimation { ... }NumberAnimation { ... }NumberAnimation { ... }NumberAnimation { ... }
}
平行動畫元件
全部動畫同時一起跑
更多練習
More Examples