一.基本類型

QML的基本類型包括了很多不同的類型，這些類型可以用于定義用戶界面元素、屬性和信號。以下是一些常用的QML基本類型及其詳細介紹：

1. 數值類型：包括整數類型（int、uint、short、ushort等）和浮點數類型（real、double等），用于表示數值數據。

2. 字符串類型：用于表示文本數據，可以包含任意字符和格式。

3. 布爾類型：用于表示邏輯值，只能取 true 或 false 兩個值。

4. 列表類型：用于存儲一組值，類似于數組，在QML中使用[]定義。

5. 對象類型：用于表示復雜的數據結構，可以通過屬性和方法訪問對象的成員。在QML中使用{}定義對象。

6. 函數類型：用于定義函數，可以重復使用和調用。

7. 顏色類型：用于表示顏色值，可以使用RGB、HSV或是命名顏色等形式表示。

8. 圖像類型：用于表示圖像數據，可以加載并顯示圖片。

9. 點類型：用于表示二維空間中的點坐標。

10. 尺寸類型：用于表示尺寸值，通常用于指定寬度和高度等屬性。

這些基本類型在QML中都有對應的語法和用法，通過結合這些類型，可以創建出豐富多樣的用戶界面和交互效果。

• 詳細代碼示例如下

import QtQuick 2.0Rectangle {width: 400height: 400color: "lightgrey"// 數值類型示例property int number: 42property real pi: 3.14159// 字符串類型示例property string message: "Hello, World!"// 布爾類型示例property bool visible: true// 列表類型示例property var fruits: ["Apple", "Banana", "Orange"]// 對象類型示例Rectangle {width: 100height: 100color: "lightblue"}// 函數類型示例function showMessage(text) {console.log("Message: " + text)}// 顏色類型示例property color textColor: "#ff0000"// 圖像類型示例Image {source: "image.png"width: 100height: 100}// 點類型示例property point location: Qt.point(200, 200)// 尺寸類型示例property size size: Qt.size(50, 50)// 修改布爾類型示例的值MouseArea {anchors.fill: parentonClicked: {visible = !visibleshowMessage(visible ? "Visible" : "Hidden")}}
}

1. 數值類型：使用 property int number 和 property real pi 分別定義了一個整數和一個實數屬性。
2. 字符串類型：使用 property string message 定義了一個字符串屬性。
3. 布爾類型：使用 property bool visible 定義了一個布爾屬性。
4. 列表類型：使用 property var fruits 定義了一個字符串列表屬性。
5. 對象類型：創建了一個Rectangle對象，并用于演示對象類型。
6. 函數類型：定義了一個函數 showMessage，用于打印消息到控制臺。
7. 顏色類型：使用 property color textColor 定義了一個顏色屬性。
8. 圖像類型：使用Image元素展示了圖像類型。
9. 點類型：使用 property point location 定義了一個點屬性。
10. 尺寸類型： 使用 property size size 定義了一個尺寸屬性。

二.布局

在QML中，布局是用來控制界面元素的位置和大小，以便在不同的屏幕尺寸和設備上實現靈活的界面設計。QML提供了幾種布局方式來幫助開發者在不同情況下管理界面元素的布局。

1. Anchors布局

Anchors布局是一種相對定位的方式，通過指定元素相對于其他元素的位置來排列界面元素。可以使用anchors屬性來定義元素與父元素或其他元素的關系，例如anchors.left, anchors.right, anchors.top, anchors.bottom等。

Rectangle {width: 200height: 200Rectangle {width: 100; height: 100color: "red"anchors.centerIn: parent}
}

在這個例子中，內部的紅色矩形會以其父元素中心為中心定位。

2.Row布局和Column布局

Row布局和Column布局分別用來水平和垂直排列子元素。可以使用Row和Column元素來包裹子元素并設置spacing屬性來定義元素間的間隔。

Row {spacing: 10Rectangle { width: 50; height: 50; color: "blue" }Rectangle { width: 50; height: 50; color: "green" }
}

在這個例子中，兩個藍色和綠色的矩形會水平排列，并且它們之間有10像素的間距。

3.Grid布局

Grid布局用于將元素排列在網格中。可以使用Grid元素來定義行和列，然后在各個單元格中放置子元素。

Grid {rows: 2columns: 2spacing: 10Rectangle { color: "orange"; Layout.column: 0; Layout.row: 0 }Rectangle { color: "pink"; Layout.column: 1; Layout.row: 0 }Rectangle { color: "purple"; Layout.column: 0; Layout.row: 1 }Rectangle { color: "yellow"; Layout.column: 1; Layout.row: 1 }
}

在這個例子中，四個矩形會被排列在一個2x2的網格中，并且它們之間有10像素的間距。

3.Stack布局

Stack布局用于將子元素堆疊在一起，只顯示一個子元素。可以使用Stack元素包裹多個子元素，并使用currentIndex屬性指定當前要顯示的子元素。

StackLayout {width: 200height: 200Rectangle { color: "red"; width: 200; height: 200 }Rectangle { color: "blue"; width: 150; height: 150 }Rectangle { color: "green"; width: 100; height: 100 }
}

在這個例子中，三個矩形會被堆疊在一起，只顯示最上層的矩形。

以上是QML中常用的幾種布局方式，通過靈活地組合這些布局方式，可以創建出適應不同設備分辨率和屏幕尺寸的界面布局。

三.函數定義與調用

在QML中，可以通過function關鍵字定義函數，并通過JavaScript語法來調用這些函數。函數可以用于封裝一些邏輯操作，實現代碼的重用以及事件處理等功能。

1.函數的定義

可以使用function關鍵字來定義一個函數，函數可以有參數和返回值。函數可以被包含在QML文件中的任何地方。

Rectangle {function greet(name) {return "Hello, " + name}
}

在這個例子中，定義了一個簡單的函數greet，接受一個參數name，并返回一個拼接了問候語的字符串。

2.函數的調用

可以通過JavaScript的調用語法來調用QML中定義的函數。在QML中，可以直接調用定義在同一個作用域范圍內的函數。

Button {text: "Click me"onClicked: {console.log(greet("Alice"))}
}

在這個例子中，當按鈕被點擊時，調用了之前定義的greet函數，并將參數"Alice"傳遞給函數。

通過函數的定義和調用，可以實現QML的邏輯操作和事件處理。可以將函數用于處理用戶交互、數據處理以及界面元素的狀態控制等場景中。

值得注意的是，在QML中也可以使用Component元素來定義可復用的組件，在組件中也可以定義函數，通過Component的createObject()方法來創建組件的實例。這種方式也可以實現代碼的重用和邏輯封裝。

• 示例2

import QtQuick 2.0Rectangle{id:myrectwidth: 200height: 200//function 函數名（參數1，參數2，。。。。）{。。。}function sayHello(strHello){console.log("Baby say:"+strHello)}//設置鼠標焦點區域MouseArea{anchors.fill:parentonClicked: myrect. sayHello("he comes....she comes.....")}
}