目錄
一、關于QML
二、布局定位和錨點
1.布局定位
2.錨點詳解
三、數據綁定
1.基本概念
2.綁定方法
3.數據模型綁定
四、附加屬性及信號
1.附加屬性
2.信號
一、關于QML
QML是Qt框架中的一種聲明式編程語言，用于描述用戶界面的外觀和行為；Quick是Qt框架中的一個模塊，允許開發者使用QML來創建用戶界面。
特點：
- 聲明式語法：QML采用聲明式語法，開發者只需描述界面的外觀和行為，而無需關注具體的繪制和布局細節。
- 與JavaScript的無縫集成：QML可以與JavaScript無縫集成，利用JavaScript的強大功能進行應用程序邏輯的處理。
- 高效的開發流程：QML將界面設計與應用程序邏輯分離，提高了開發效率。設計師可以專注于界面的設計，而開發者可以專注于應用程序的邏輯實現。
- 豐富的組件庫：Qt Quick提供了豐富的可視化組件、交互類型、動畫、模型和視圖等，如按鈕、文本框、滑塊、菜單等，方便開發者快速構建用戶界面。
- 高效的動畫和圖形處理能力：支持各種圖形渲染技術，如OpenGL、WebGL等，可以創建流暢的動畫和視覺吸引人的應用程序。
- 響應式設計：控件可以自動適應不同的屏幕尺寸和設備，確保應用程序在各種設備上都能有良好的用戶體驗。
? ? ??
二、布局定位和錨點
1.布局定位
- 手動布局：通過設置元素的
x和y屬性，可以將元素放置在特定的坐標位置。這種方式適用于需要精確控制元素位置的場景，但在處理復雜布局時不夠靈活。 - 定位器布局：Qt Quick提供了幾種定位器類型，如
Row、Column、Grid和Flow，用于自動定位元素。這些定位器可以根據元素的添加順序和屬性設置，將元素排列成一行、一列、網格或流式布局。 - 錨點布局：錨點布局是QML中最靈活的布局方式，通過指定元素的錨點屬性，可以將元素相對于其父元素或其他元素進行定位。
? ??
2.錨點詳解
每個元素都有七條錨線：左、水平中心、右、上、垂直中心、下和基線。通過設置這些錨線的屬性，可以實現元素的對齊、填充和偏移等效果。
基本錨點屬性：
anchors.left：將元素的左邊與指定元素的左邊對齊。anchors.right：將元素的右邊與指定元素的右邊對齊。anchors.top：將元素的上邊與指定元素的上邊對齊。anchors.bottom：將元素的下邊與指定元素的下邊對齊。anchors.horizontalCenter：將元素的水平中心與指定元素的水平中心對齊。anchors.verticalCenter：將元素的垂直中心與指定元素的垂直中心對齊。anchors.baseline：將元素的基線與指定元素的基線對齊。
特殊錨點屬性：
anchors.fill：將元素的左邊、右邊、上邊和下邊都與指定元素的對應邊對齊，實現元素的填充效果。anchors.centerIn：將元素的水平中心和垂直中心都與指定元素的水平中心和垂直中心對齊，實現元素的居中效果。
錨點邊距和偏移：
- 可以通過
leftMargin、rightMargin、topMargin和bottomMargin屬性設置元素的錨點邊距，以指定元素與錨點之間的空白空間量。 - 還可以使用
horizontalCenterOffset和verticalCenterOffset屬性設置元素的錨點偏移，以實現更精細的定位控制。
注意事項：
- 錨點布局的優先級大于絕對定位（即設置
x和y屬性）。 - 元素的錨點只能設置為其父元素或兄弟元素，不能設置為其他無關元素。
? ?
示例：
import QtQuickWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")Item {id: mItemanchors.fill: parentRectangle {id: bkanchors.fill: mItemcolor: "aliceblue"}Rectangle {width: 50height: 50color: "red"}Rectangle {x: 50y: 50width: 50height: 50color: "blue"}Rectangle {id: rect_centeranchors.centerIn: parentwidth: 50height: 50color: "red"}Rectangle {id: rect_rightanchors.right: parent.rightanchors.verticalCenter: parent.verticalCenteranchors.rightMargin: 20width: 50height: 50color: "green"}Rectangle {id: rect_bottomanchors.bottom: parent.bottomanchors.horizontalCenter: parent.horizontalCenteranchors.bottomMargin: 20width: 50height: 50color: "green"}Rectangle {id: rect_1anchors.right: rect_center.leftanchors.verticalCenter: parent.verticalCenteranchors.bottomMargin: 20width: 50height: 50color: "pink"}Rectangle {id: rect_2anchors.bottom: rect_center.topanchors.horizontalCenter: parent.horizontalCenterwidth: 50height: 50color: "pink"}}
}
運行結果：
? ??
三、數據綁定
1.基本概念
- 屬性綁定：QML中的屬性綁定允許將一個屬性的值與另一個屬性或表達式進行關聯。當關聯的屬性或表達式的值發生變化時，綁定的屬性會自動更新。
- 單向綁定：QML中的屬性綁定通常是單向的，即從數據源到目標屬性。這意味著當數據源屬性發生變化時，目標屬性會自動更新，但反之不然。
- 動態綁定：QML支持動態綁定，這意味著綁定關系可以在運行時更改。這允許根據應用程序的狀態或用戶交互來動態更新界面。
ps：在使用屬性綁定時，應避免創建循環綁定，這可能導致無限循環和性能問題。
? ? ??
2.綁定方法
- 冒號綁定：這是最常見的綁定方法，使用冒號操作符“:”在屬性定義時進行綁定。
- 使用Binding對象：QML提供了
Binding類型來實現更靈活的屬性綁定。可以通過創建Binding對象并設置其target、property和value屬性來定義綁定。 - 使用Qt.binding()函數：可以在JavaScript代碼中使用
Qt.binding()函數來創建綁定，這種方法允許在運行時動態創建綁定關系。
? ?
3.數據模型綁定
- ListView和GridView：在Qt Quick中，可以使用
ListView和GridView等組件來顯示數據模型中的數據。通過將組件的model屬性綁定到一個數據模型，可以實現數據的動態顯示和更新。 - 數據模型的創建：可以使用
ListModel或XmlListModel等類型在QML中創建數據模型。這些模型可以存儲和管理數據，并通過綁定與UI組件進行交互。
??
示例：
import QtQuick
import QtQuick.ControlsWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")Item {id: mItemanchors.fill: parentproperty int number: Math.ceil(slider_num.value)Label {id: label_numanchors.centerIn: parent//方式1text: "value: " + Math.ceil(slider_num.value)//方式2//text: "value: " + parent.number}Slider {id: slider_numanchors.top: label_num.bottomanchors.horizontalCenter: parent.horizontalCenteranchors.topMargin: 20width: 300from: 0to: 100value: 25}//方式3// Binding {// when: slider_num.value > 50// target: label_num// property: "text"// value: "value: " + Math.ceil(slider_num.value)// }//方式4// Component.onCompleted: {// //js數據綁定// label_num.text = Qt.binding(function(){// return "value: " + Math.ceil(slider_num.value);// })// }}}
運行結果：
? ?
四、附加屬性及信號
1.屬性
- 基本屬性：直接賦值（靜態值或綁定表達式）。
- 自定義屬性：使用?
property?關鍵字聲明。
? ??
2.附加屬性
- 概念：附加屬性是一種可以附加到QML對象的額外屬性，用于在不破壞對象類型定義的情況下擴展對象的功能。
- 使用場景：例如在處理用戶界面中的鍵盤事件時，可以使用附加屬性來啟用或禁用特定對象的鍵盤輸入。
- 語法：通過在屬性名前加上附加類型的名稱來訪問附加屬性，例如
Keys.enabled。 - 自定義附加屬性：可以通過在C++中創建具有特定屬性和信號的附加類型，并在運行時將其附加到特定對象來實現自定義附加屬性。
? ??
3.信號
- 概念：信號是QML對象發出的事件通知，用于在對象狀態發生變化時通知其他對象。
- 信號處理程序：信號處理程序是在信號發出時被調用的JavaScript函數，用于響應信號事件。
- 語法：信號處理程序的命名格式為
on<SignalName>，例如onClicked。 - 自定義信號：可以在QML中使用
signal關鍵字自定義信號，并在信號發出時調用相關的信號處理程序。 - 信號連接：可以使用
connect方法將信號連接到其他信號或方法，以便在信號發出時執行特定的操作。
? ?
示例：
import QtQuick
import QtQuick.ControlsWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")Component.onCompleted: console.log("Window");Item {id: mItemanchors.fill: parentComponent.onCompleted: console.log("Item");}Rectangle {anchors.fill: parentcolor: "aliceblue"Component.onCompleted: console.log("Rectangle");}SwipeView {anchors.fill: parentRectangle {color: SwipeView.index === 0 ? "blue" : "black"}Rectangle {color: SwipeView.index === 0 ? "black" : "green"}Rectangle {color: SwipeView.index === 0 ? "black" : "red"}}
}
- ===：比較兩個值是否嚴格相等（值和類型都相等）。
- ==：進行隱式類型轉換后比較這兩個值。
輸出：
qml: Window
qml: Rectangle
qml: ItemQML引擎初始化組件的順序是 "從下到上"，同一層級的子組件會按照它們在代碼中的聲明順序反向觸發onCompleted，父組件的onCompleted會先于子組件的onCompleted觸發。
)
