signal clicked
MouseArea {
anchors.fill: parent
onClicked: {
root.clicked() //傳遞信號給root
console.log("MouseArea signal")
} //綁定 信號到parent
}
onClicked: {
console.log("Image signal")
}
信號調用函數
onClicked: {
// reset our little scene
circle.x = 84
box.rotation = 0 //旋轉
triangle.rotation = 0
triangle.scale = 1.0 //范圍
_test_transformed()
}
Column { 把子項放入一列
id: col
anchors.centerIn: parent
spacing: 8
RedSquare { }
GreenSquare { width: 96 }
BlueSquare { }
}
Flow { //將子項並排放置
anchors.fill: parent
anchors.margins: 20
spacing: 20
RedSquare { }
BlueSquare { }
GreenSquare { }
}
Grid {
id: grid
rows: 2 行數
columns: 2 列數
anchors.centerIn: parent
spacing: 8
RedSquare { }
RedSquare { }
RedSquare { }
RedSquare { }
}
創建8行12列矩陣
DarkSquare {
id: container
width: 800
height: 480
property int marginTop: 16 邊距
property int marginRight: 32
property int marginBottom: marginTop
property int marginLeft: marginRight
property int columns: 12
property int rows: 8
property int spacing: 12 子項之間的間隔
property int cellWidth: (width-marginLeft-marginRight-(columns-1)*spacing)/columns 每個子項的長寬
property int cellHeight: (height-marginTop-marginBottom-(rows-1)*spacing)/rows
Grid {
anchors.fill: parent
anchors.topMargin: parent.marginTop
anchors.rightMargin: parent.marginRight
anchors.bottomMargin: parent.marginBottom
anchors.leftMargin: parent.marginLeft
spacing: parent.spacing
columns: parent.columns
Repeater {
model: container.columns * container.rows
RedSquare {
width: container.cellWidth
height: container.cellHeight
}
}
生成一個網格矩陣，由16的顏色隨機的矩形組成
Grid{ //網格
anchors.fill: parent
anchors.margins: 8 //邊距
spacing:4
Repeater {
model: 16
Rectangle {
width: 56; height: 56
property int colorIndex: Math.floor(Math.random()*3) //產生隨機下標
color: root.colorArray[colorIndex] 顏色數組
border.color: Qt.lighter(color)
Text {
anchors.centerIn: parent
color: "#f0f0f0"
text: "Cell " + index
}
}
}
Rectangle {
focus:true
捕獲方向鍵
keys.onLeftPressed: keys.onRightPressed keys.onUpPressed keys.onDownPressed
keys.onPressed:{
按鍵事件：
switch(event.key){
case Qt.key_Plus:
case Qt.key_Minus:
}
}
keys.onPressed:
}
輸入框常規屬性 TextInput{
id: input
x: 8; x:9
focus: true
text: 'str'
KeyNavigation.tap:(打開導航鍵Tab) input.id
}
FocusScope { //顯式創建焦點范圍
width:
height:
TextEdit{
id: input
anchors.fill
anchors.margins:
focus: true
}
}
image : fillmode 填充模式
keyNavigation.tab 導航鍵
信號： onHightChanged
漸變：
gradient: Gradient {
GradientStop { position: 0.0; color: "lightsteelblue" }
GradientStop { position: 1.0; color: "slategray" }
}
border.color: "slategray"
屬性
Text： {
onTextchanged： 信號
focus: bool
Key.onSpacePress:{
function()
}
Key.onEscapePress:
{
Label.text= " "
}
}
button:
Rectangle{
id:root
property alise text: label.text
signal clicked 聲明一個信號
border.color:
Text{
id:
anchors.centerIn:
text:
} MouseArea{
anchors.fill:
onClicked:
{
root.cliced()
}
}
}
QML對象管理：
Loader,Repeater,ListView,GridView ,PathView
要動態的加載定義在QML文件中的組件， 可以調用Qt.createComponent()函數
Sprite.qml
import QtQuick 1.0
Rectangle {
width:80
height: 50
color: 'red'
}
import QtQuick 1.0
import 'componentCreation.js' as MyScript
Rectangle
{
}
if (component.status == Component.Ready)
finishCreation()
else
component.statusChanged.connect(finishCreation)
}
function finishCreation(){
if(component.status == Component.Ready)
{
sprite = component.createObject(appWimdow);
if(sprite == null)
{}
else
{
sprite.x = 100
sprite.y =100
}
}
else if (component.status == Component.Error)
{
console.log("Error loading component: ",component.errorString());
}
}
動態創建對象
Sripte.qml
import QtQuick 2.0
Rectangle {
width: 80
height:50
color: "red"
}
xxxx.js
var component
var sprite
對外提供的方法
function createSpriteObjects() {
//創建一個對象
component = Qt.createComponent("Sprite.qml")
if (component.status == Component.Ready)
finishCreation()
else
component.statusChanged.connect(finishCreation)
}
function finishCreation(){
if(component.status == Component.Ready)
{
sprite = component.createObject(appWindow);
if(sprite == null)
{}
else
{
sprite.x = 150
sprite.y =150
}
}
else if (component.status == Component.Error)
{
console.log("Error loading component: ",component.errorString());
}
}
main.qml
import QtQuick 2.0
import "componentCreation.js" as MySript
Rectangle{
id : appWindow
width: 300;height: 300
//調用js方法
Component.onCompleted: MySript.createSpriteObjects();
}
如果qml知道運行時才被定義： 可以使用QtcreateQmlObject()函數創建一個qml對象
var newObject = Qt.createQmlObject(import QtQuick 1.0;Rectangle {color: "red"; width :20;height: 20},parentItem,'dynamicSnippet1')
1 要創建的字符串 2 父對象 3 新對象的文件路徑
確保創建上下文不會在創建對象前被銷毀，
如果使用了 Qt. createComponent ( ) ,創建上下文就是調用該函數的
QDeclarati veContext;
如果使用了 Qt. createQ mlObjectO .創建上下文就是父對象的上下文;
如果定義了 一 個 Component {} .然后在其上調用了 createObject O. 創建上下文就是該 Component 中定義的上下文.
。不要手動刪除通過 QML 元素(例如 Loader和 Repeater) 動態生成的對象,不要刪除不是自己動態創建的對象。
創建5個紅色矩形，10秒消失
selfDestroy.qml
Rectangle{
id: rect
width:80
height: 80
color: "red"
NumberAnimation on opacity{ 動畫應用於透明度
to:0
duration: 10000 持續時間
onRunningChanged: 當動畫停止時信號
{
if(!running)
{
console.log("Destory...")
rect.destroy() 調用銷毀函數
}
}
}
}
main.qml
Item{
id: container
width: 500
height: 100
Component.onCompleted:{
var component = Qt.createComponent("SelfDestoryRect.qml") 創建一個selfDestroy對象組建
for(var i = 0; i< 5;i++)
{
var object = component.createObject(container) 父對象
object.x = (object.width +10)*i
}
}
}
因為只有動態創建的對象才可以被動態刪除.使用 Qt. createQmlObjectO 創建的對象可以相似的使用 destroyO 來刪除 :
var newObject = Qt.createQmlObject(import QtQuick 1.0;Rectangle {color: "red";width: 20;height:20},parentItem,"dynamicSnippet1")
靜態創建對象：
Item{
SelfDestroyRect{....}
}
QML 的作用域：
JaveScript 的作用域：
QM L 的作用域擴展並沒有干擾 JavaScript 本身的作用城.
,在它們任意一個里面聲明的局部變母都不會和在另外 一 個里面聲明的局部
變量沖突。
綁定的作用域對象：
綁定可以不加限制地訪問作用域對象的屬性
anchors.left: parent.left
PathView{
delegate:Component
{
Rectangle{
id:root
Image{
要明確限定根元素
scale: root.PathView.scale
}
}
}
}
組件的作用城是 組件內的對象id和組件的根元素的屬性的聯合,
Item{
property string title
Text{
id: titleElement
text: "<b>"+title+"</b>"
...
}
Text{
text: titleElement.text
...
}
}
組件的實例的層次：
,組件實例將它們的作用域關聯在一起形成了 一 個作用域層次.組件實例可以直接訪問其祖先的作用域.
Item{
property color defaultColor:"blue"
ListView{
delegate: Component{
Rectangle
{
defaultColor
}
}
}
}
組件實例作用域層次可以擴展到非內聯的組件:
Item:
{
property string title: "hello world"
TitleText{
}
TitleText{
}
}
TitleText.qml
Text{
text: "<b>"+title+"</b>" 可以訪問到main.qml中的title
}
動態作用域是非常強大的,但是必須謹慎使用以避免 QML 代碼的行為變得難
以預料。
QML的國際化：
qsTr() qsTranslate() QT_TR_NOOP()將字符標記為可翻譯的
編碼約定：
id:
屬性聲明
信號聲明
JaveScript函數
對象屬性
子對象
狀態
狀態切換
分組屬性：
anchors {left: parent.left; top: parent.top; right:parent.right;leftMargin:20}
font{bold:true;italic:true;pixelSize:20;capitalization: Font.AllUpperacase }
Item{
id: component
width: 40;height: 50
property real _area: width*geight*0.5 私有屬性不為外部使用 兩個下划線
}
定位器： Column Row Grid Flow
重復器：Repeater 包含一個模型 model 和 一個委托 delegate 屬性 : 委托用來將模型中的每一個條自分別實例化
切換：切換可以使在定位器中進行添加、移入或者刪除項目時具有動畫效果。
Flow{
id: positioner
move: Transition{
NumberAnimation{
properties: "x,y"
ease: "easeOutBounce"
}
}
}
錨的布局：
left horizontalCenter right top verticalCenter baseline bottom margin offset horizontalCenterOffset verticalCenterOffset baselineOffset
基本可視元素：
Item : Keys屬性 visible屬性 children屬性 resources 屬性 opacity屬性 z屬性(設置兄弟項目的堆疊順序)
默認data屬性可以省略data標簽
Item{
可見屬性
children: [
Text{},
Rectangle{}
]
不可見屬性
resources:[
Timer{}
]
}
定位子項目和坐標映射：
childAt(real x,real y) 返回在（x,y）處的子項目
mapFromItemOtem item , real x , real y) 函數會將Item 坐標系 統中的點以（x, y) 映射到該項目的坐標系統上,返回 一 個包含映射后的 x和 y 屬性的對象.如果 Item 被指定為 null 值,那么會從根 QML 視圖坐標系統上的點進行映射。對應的還有一個 mapTo1temOtem item , real x , real y) 函數,它與mapFromltemO 是很相似的,只不過是從當前項目坐標系統的 (x , y) 點映射到 item的坐標系統而已
Rectangle: gradient屬性radiu屬性(弧度).smooth屬性（損失渲染性能）
Text： wrapMode屬性（設置換行） elide屬性（自動省略） 只讀文本
FontLoader元素加載字體，FontLoader{id:webFont;source:"http://www.mysite.com/myfont.ttf"}
style屬性（文本樣式）連接信號 Text::onLinkActivated(strig link)
Text{
textFormat: Text.RichText
text:"The main wensite is at <a href = \"http://www.baidu.com\"> 百度</a>."
onLinkActivated: console.log(Link+"Link activated")
}
TextEdit:focus屬性 Flicabe元素 selectByMouse屬性
Flickable{
id:flick
width:300;height:200
contentWidth:edit.paintedWidth
contentHeight:edit.paintedHeight
clip:true
function ensureVisible(r) {
if(contentX >= r.x)
contentX = r.x
else if (contentX + width<r.x + r.width)
contentX = r.x+r.width-width
if(contentY>=r.y)
contentY = r.y
else if (contentY + height<r.y+r.width)
contenY = r.y+r.height-height
}
TextEdit{
id: edit
width: flick.width
height: flick.height
focus: true
wrapMode: TextEdit.Wrap
onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
}
}
TextEdit 通過：cut() copy() paste() 對剪切版支持
TextInput:單行輸入： echoMode
validator: IntValidator{bottom:11;top:30}直到驗正IntValidator 來實現在 Textlnput 中只能輸入 11-31 之間的整數.