More Related Content
Similar to 超酷炫科幻 UI:QML 入門 (20)
More from Fred Chien (15)
超酷炫科幻 UI:QML 入門
- 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;
}
第一個例子
視窗可顯示
視窗寬度
視窗高度
- 33. Image {
x: 50;
y: 80;
width: 200;
height: 200;
source: 'example.jpg'
}
圖片元件的基本使用
x 軸座標位置
y 軸座標位置
圖片寬度
圖片高度
圖片檔案位置
- 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'
}
- 37. Text {
x: 50;
y: 80;
font.pointSize: 20;
text: 'QML Workshop';
color: '#ffffff';
}
文字元件的基本使用
字體大小
字串內容
字體顏色