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

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

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

一、qml簡介

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

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

qml是運(yùn)行時(shí)解釋，不需要重新編譯。

二、第一個(gè)例子

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

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

main.cpp的內(nèi)容如下所示，這里可以暫時(shí)不需要了解其內(nèi)容含義。只需要知道這是程序啟動(dòng)的入口。

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

運(yùn)行后的效果圖，是一個(gè)標(biāo)題為Hello World的空窗體。

三、界面布局

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

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

四、函數(shù)功能

qml支持函數(shù)功能，通過兩個(gè)不同時(shí)刻窗口對(duì)比來查看效果，左側(cè)窗口是當(dāng)窗體寬度小于320像素的效果，右側(cè)窗口是當(dāng)窗體寬度小于640像素的效果。

qml文件實(shí)現(xiàn)中，Rectangle包含了Text文本對(duì)象，Text內(nèi)部定義了函數(shù)getColor，當(dāng)Rectangle的寬度小于320時(shí)，返回red, 當(dāng)寬度小于等于640時(shí)，返回black, 其他情況返回blue。

五、動(dòng)畫效果

qml支持動(dòng)畫效果，首先看下使用Behavior的效果圖，窗體分為上下兩個(gè)矩形，當(dāng)鼠標(biāo)按下上方區(qū)域不動(dòng)的時(shí)候，下方矩形中的正方形就會(huì)從左上角移動(dòng)到右下角，當(dāng)鼠標(biāo)釋放的時(shí)候，正方形又會(huì)從右下角回到左上角。

qml文件中，上方矩形實(shí)現(xiàn)鼠標(biāo)按下和釋放的監(jiān)控事件，并且接受事件中，修改下方矩形的x和y的坐標(biāo)值。下方矩形實(shí)現(xiàn)上圖所示的動(dòng)畫效果，easing.type指定的是一種緩和曲線。

六、自定義屬性

qml支持自定義屬性，調(diào)用自定義屬性值顯示文本信息

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

七、自定義組件

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

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

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

八、Column定位器

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

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

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

九、注冊(cè)單例

qml還支持注冊(cè)C++的單例模型，然后在qml中直接調(diào)用，實(shí)現(xiàn)了與C++代碼的通信。

實(shí)現(xiàn)實(shí)現(xiàn)用于事件上報(bào)的單例模型，具體實(shí)現(xiàn)代碼如下所示。

然后在main.cpp中將EventSender注冊(cè)到qml中, 后續(xù)qml文件才能調(diào)用

最后看下qml如何調(diào)用上面注冊(cè)成功的單例，很簡單，只要import EventSender, 然后就可以調(diào)用EventSender的函數(shù)。

十、總結(jié)

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

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

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

實(shí)際開發(fā)中，需求是千變?nèi)f化的。

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

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

QML當(dāng)中，是能獲取到當(dāng)前程序的屏幕寬度，也能獲取頁面里各個(gè)元素的寬度（可以通過parent或id），通過這些參數(shù)，計(jì)算出一些特定的位置點(diǎn)，讓整個(gè)布局，可以自動(dòng)適配當(dāng)前屏幕寬度，自動(dòng)布局。

例子：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，是指上一級(jí)元素，如果上面沒其他元素，只有程序本身，那就是指程序的window的寬度和高度。

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

Row：行容器。

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

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

Grid：行列容器。參數(shù)要稍微復(fù)雜點(diǎn)，不過本質(zhì)上和Row和Column是一樣的。

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

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

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

例子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"
        }

    }

}

運(yùn)行結(jié)果

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

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

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

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

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

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

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

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

覺得有用的話請(qǐng)關(guān)注點(diǎn)贊，謝謝您的支持！

對(duì)于本系列文章相關(guān)示例完整代碼有需要的朋友，可關(guān)注并在評(píng)論區(qū)留言！

在線咨詢

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

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

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

一、qml簡介

二、第一個(gè)例子