各種圖文并茂的示例，讓我們快速進入qml世界

于項目的原因，接觸到qml語言。經過一段時間的熟悉和使用，發現只要有基本的開發能力，那么快速掌握qml的入門知識，并不難。

本文首先將簡單介紹qml, 緊接著引入第一個入門例子hello world。然后將采用圖文并茂的示例來介紹qml的界面布局、監聽事件、簡單動畫效果、自定義屬性、自定組件等。最后再總結概述。

一、qml簡介

qml是一種描述性的腳本語言，語法類似css, 可以在腳本中創建圖像對象，并支持各種特效，并且文件是以.qml結尾。

qml文檔描述了一個對象樹。各個元素可以以嵌套的方式來組合成復雜的圖形功能。q ml是Qt quick的核心組件之一。

qml是運行時解釋，不需要重新編譯。

二、第一個例子

使用Qt Creator來創建空的qml工程，注意本文所有的示例均使用了Qt5.9的版本。

創建工程完成之后，pro文件添加使用quick組件，并且配置使用了C++11

main.cpp的內容如下所示，這里可以暫時不需要了解其內容含義。只需要知道這是程序啟動的入口。

然后我們來介紹下main.qml的內容含義，import需要使用的組件，Window表示的是一個窗體，內部內容使用大括號包含起來，visible設置窗體的可見性，width表示窗體的寬度，height表示窗體的高度，title設置窗體的標題。

運行后的效果圖，是一個標題為Hello World的空窗體。

三、界面布局

qml通過anchor錨點來進行界面的布局，首先看下效果圖，一個黑色背景窗體，四邊有四個紅色邊框的白色矩形，中間一個紅色邊框的白色正方形。

qml文件的實現如下，關鍵字Rectangle表示一個矩形組件，Rectangle可以嵌套使用。接下來說明頂部白色矩形的實現，定義id為topBar, 背景色color是白色，邊框border.width的寬度是2，邊框顏色border.color是紅色。anchors.left: leftBar.right表示頂部矩形的左側位于左側邊框的右側。

四、函數功能

qml支持函數功能，通過兩個不同時刻窗口對比來查看效果，左側窗口是當窗體寬度小于320像素的效果，右側窗口是當窗體寬度小于640像素的效果。

qml文件實現中，Rectangle包含了Text文本對象，Text內部定義了函數getColor，當Rectangle的寬度小于320時，返回red, 當寬度小于等于640時，返回black, 其他情況返回blue。

五、動畫效果

qml支持動畫效果，首先看下使用Behavior的效果圖，窗體分為上下兩個矩形，當鼠標按下上方區域不動的時候，下方矩形中的正方形就會從左上角移動到右下角，當鼠標釋放的時候，正方形又會從右下角回到左上角。

qml文件中，上方矩形實現鼠標按下和釋放的監控事件，并且接受事件中，修改下方矩形的x和y的坐標值。下方矩形實現上圖所示的動畫效果，easing.type指定的是一種緩和曲線。

六、自定義屬性

qml支持自定義屬性，調用自定義屬性值顯示文本信息

qml文件中，自定義屬性以關鍵字property開始，然后是說明類型，最后是屬性的名稱和值。

七、自定義組件

qml沒有提供直接的圓形組件，所以，這里自定義圓形組件。

實現圓形組件Circle.qml, 定義了整型屬性d, 可以由外部傳入，radius表示半徑。

然后看下main.qml如何調用呢，其使用方法與通用組件的方式是一樣的，如下所示自定義圓形組件Circle的使用。

八、Column定位器

qml提供的定位器的功能，比如Row、Column、Grid、Flow。下面就看下Column的使用效果。

首先自定義組件Article.qml, 該組件接受兩個屬性值，并且分別顯示到兩個Text對象上。

main.qml中使用Column定位器來組織顯示Article對象。

九、注冊單例

qml還支持注冊C++的單例模型，然后在qml中直接調用，實現了與C++代碼的通信。

實現實現用于事件上報的單例模型，具體實現代碼如下所示。

然后在main.cpp中將EventSender注冊到qml中, 后續qml文件才能調用

最后看下qml如何調用上面注冊成功的單例，很簡單，只要import EventSender, 然后就可以調用EventSender的函數。

十、總結

本文通過一個簡單的例子開始qml的學習，然后結合示例分別介紹說明了錨布局、函數功能、動畫效果、自定義屬性、自定義組件、定位器、注冊單例的使用方法。這些基本的例子可以為后續深入的學習打下基礎，同時也分享出來給大家參考。

T是c++中一個較為成熟的第三方庫，開發者可以通過QT開發pc軟件或手機軟件。而QML是QT參考了JavaScript的語法和特性，最新推出的開發方式。

大家好，我是老趙，本文介紹下QML的更多的布局方式。

實際開發中，需求是千變萬化的。

1、對于那些固定尺寸的控件，可以通過設置x，y或width、height的像素值來控制。

2、對于那些相對尺寸的控件，可以設置x，y或width、height，成為一個函數表達式，來控制他們的位置和大小。

QML當中，是能獲取到當前程序的屏幕寬度，也能獲取頁面里各個元素的寬度（可以通過parent或id），通過這些參數，計算出一些特定的位置點，讓整個布局，可以自動適配當前屏幕寬度，自動布局。

例子：4.1

import QtQuick 2.13
import QtQuick.Window 2.13

Window {

    visible: true
    width: 640
    height: 480
    title: qsTr("布局演示:例子4.1")

    Rectangle{
        id:rec1
        x:parent.width/3
        y:parent.height/3

        width: parent.width/4
        height: parent.width/4

        color:"grey"

   			 }

    Rectangle{
        x:rec1.width/4+30
        y:rec1.height/5-10

        width:parent.width-rec1.width*2
        height: rec1.height - parent.height/5

        color:"green"

    }
}

注意例子里的parent，是指上一級元素，如果上面沒其他元素，只有程序本身，那就是指程序的window的寬度和高度。

3、有時候，頁面的寬度是固定的，但是里面每個元素的大小都不確定，同時我們又希望這些元素都能順序排列，就涉及到今天主要講的：Row、Column、Grid、Flow。未來還會有RowLayout，ColumnLayout等等更高級的模塊，不過差別不是很大，初學者把剛才提到的4個掌握清楚就足夠了。

Row：行容器。

Row是一個水平布局容器，按照水平方向排列內部的子元素。
這些子元素會依次水平排列，如果空間不夠，會自動換行到下一行。
可以設置spacing屬性來控制每個子元素之間的間距。
Row中的子元素可以設置Layout.alignment屬性來控制在垂直方向上的對齊方式。

Column：列容器。其他都和Row一樣。

Grid：行列容器。參數要稍微復雜點，不過本質上和Row和Column是一樣的。

如果你對Excxl（微軟的辦公三件套之一。Word，Excel，PowerPoint）熟悉，就很容易理解這3個東西了。

Flow：簡單理解為自由度更高，有更多參數的Grid就行了。

Flow是一個自動流式布局容器，用于按照水平和垂直方向自動排列子元素。
子元素會根據可用空間自動排列，如果空間不夠，會自動換行到下一行。
可以設置layoutDirection屬性來指定子元素的排列方向，可以是從左到右、從右到左、從上到下、從下到上。
Flow中的子元素可以設置Layout.alignment屬性來控制對齊方式。

例子4.2

import QtQuick 2.13
import QtQuick.Window 2.13

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("布局演示:例子4.2")

    Row{//行容器
        anchors.top: parent       //居上
        anchors.left: parent.left //居左

        spacing: 10  //間隔10像素

        Rectangle{
            width: 100
            height: 100
            color: "red"
        }
        Rectangle{
            width: 100
            height: 100
            color: "red"
        }
        Rectangle{
            width: 100
            height: 100
            color: "red"
        }
    }
    Column{//列容器
        anchors.bottom: parent.bottom//居下
        anchors.right: parent.right //居右

        spacing: 10  //間隔10像素

        Rectangle{
            width: 100
            height: 100
            color: "yellow"
        }
        Rectangle{
            width: 100
            height: 100
            color: "yellow"
        }
        Rectangle{
            width: 100
            height: 100
            color: "yellow"
        }

    }
    Grid{//行列容器
        anchors.bottom: parent.bottom //居下
        anchors.left: parent.left  //居左

        rows: 2      //共2行
        columns: 2   //共2列
        rowSpacing: 10  //行間隔10像素
        columnSpacing: 10  //列間隔10像素

        Rectangle{
            width: 100
            height: 100
            color: "purple"
        }
        Rectangle{
            width: 100
            height: 100
            color: "purple"
        }
        Rectangle{
            width: 100
            height: 100
            color: "purple"
        }

        Rectangle{
            width: 100
            height: 100
            color: "purple"
        }
    }

    Flow{//流式容器

        anchors.centerIn: parent  //垂直和水平都居中

        spacing: 10 //間隔10像素

        Rectangle{
            width: 100
            height: 100
            color: "green"
        }
        Rectangle{
            width: 100
            height: 100
            color: "green"
        }
        Rectangle{
            width: 100
            height: 100
            color: "green"
        }
        Rectangle{
            width: 100
            height: 100
            color: "green"
        }

    }

}

運行結果

好，本文就到這里，下次再見

ML (Qt Meta Language，Qt元語言）是一個用來描述應用程序界面的聲明式腳本語言，文件格式以.qml結尾。QML具有良好的易讀性，它以可視化組件及其交互和相互關聯的方式來描述界面，使組件能在動態行為中互相連接，并支持在一個用戶界面上很方便地復用和定制組件。

QML是一種陳述性語言，用來描述一個程序的用戶界面：是什么樣子以及它如何表現。在QML，一個用戶界面被指定為具有屬性的對象樹。這使得Qt更加便于很少或沒有編程經驗的人使用。

Qt Quick是Qt為QML提供的一套類庫，由QML標準類型和功能組成，包括可視化類型、交互類型、動畫類型、模型和視圖、粒子系統和渲染效果等，在編程時只需要一條import語句,程序員就能夠訪問這些功能。使用Qt Quick,設計和開發人員能很容易地用QML構建出高品質、流暢的UI界面，從而開發出具有視覺吸引力的應用程序。

QML自Qt 4.7引入。Qt 5.14.2支持Qt Quick 2.12。目前，QML已經同C++一起并列成為Qt界面開發的首選編程語言。

QML是通過Qt QML引擎在程序運行時解析并運行的。Qt更高性能的編譯器通道意味著使用QML編寫的程序啟動時及運行時速度更快、效率更高。QML新、舊編譯器通道如下圖。

QML語法格式非常像CSS，但又支持javascript形式的編程控制。Qt Designer可以設計出ui界面文件，但是不支持和Qt原生C++代碼的交互。Qt Script可以和Qt原生代碼進行交互，但是有一個缺點，如果要在腳本中創建一個繼承于QObject的圖形對象非常不方便，只能在Qt代碼中創建圖形對象，然后從Qt Script中進行訪問。而QML可以在腳本里創建圖形對象，并且支持各種圖形特效，以及狀態機等，同時又能跟Qt寫的C++代碼進行方便的交互，使用起來非常方便。

————————————————

覺得有用的話請關注點贊，謝謝您的支持！

對于本系列文章相關示例完整代碼有需要的朋友，可關注并在評論區留言！

在線咨詢

上一篇：Tailwind CSS 小案例，創建漂亮的收藏卡片列表
下一篇：前端苦HTML+CSS久已

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商