QML入門第一步

QML入門第一步

創建QML項目

點擊File–>New Project or File進入項目類型選擇界面

其中的Qt Quick Application開頭的項目都屬於QML項目，區別在於不同的項目生成了不同的默認組件

綁定信號與槽

如何在QML項目中添加button（按鈕），並綁定按鈕點擊信號的槽函數

在類中添加如下語句：

Button{
   id : btn_test
   text: "Hello World"
   x : 200     <!--按鈕相對於左上角的座標-->
   y : 200

   width : 100
   height: 50

   onClicked: {                        <!--onSignalName:{}信號的槽函數-->
       console.log("Hello World!!!")   <!--js語法，輸出字符串-->
   }
   
   onDoubleClicked: {				    <!--雙擊信號的槽函數-->
       console.log("This is the DoubleClicked!!!")	<!--分號可帶可不帶-->
   }
}

程序運行效果如下：

自定義函數

function test()
{
         console.log("Hello World!!!")   //js語法，輸出字符串
}

聲明變量

//property type name: value
property int value: 5
property var name: "hello"	//var是推斷類型，可以代替任何類型

新建QML文件和引用

1. 點擊File–>New File or Project–>Qt–>QML File–>choose…

2. 填寫文件名（必須使用駝峯命名法）

如果需要引用同級目錄下的qml文件，只需直接輸入文件名即可

LoginPage{
}

如果引入不同級別目錄下的qml文件，則需在文件頭加入以下字樣(例如文件在同級目錄下的Login目錄)

import "Login"

錨佈局

一般情況下，我們創建一個組件需要給組件指定其座標，例如：

Button{
        x:100
        y:100
        text: "button1"
}

Button{
    	x:200
        y:200
        text: "button2"
}

Button{
        x:300
        y:300
        text: "button3"
}

但是如果我們改變運行程序的窗口大小，這些佈局就會被迫改變，使用錨進行佈局可以解決該問題

錨的關鍵字爲：anchors，它可以指定組件的位置，使得組件的佈局更加方便

//anchors.centerIn:組件名
Button{
   anchors.centerIn: parent
   text: "anchors"
}

/*
相似屬性設置
anchors.top : AnchorLine
anchors.bottom : AnchorLine
anchors.left : AnchorLine
anchors.right : AnchorLine
anchors.horizontalCenter : AnchorLine
anchors.verticalCenter : AnchorLine
anchors.baseline : AnchorLine
anchors.fill : Item
anchors.centerIn : Item
anchors.margins : real
anchors.topMargin : real
anchors.bottomMargin : real
anchors.leftMargin : real
anchors.rightMargin : real
anchors.horizontalCenterOffset : real
anchors.verticalCenterOffset : real
anchors.baselineOffset : real
anchors.alignWhenCentered : bool
*/

程序執行效果爲將button置於其父對象的中心，並且不會受其尺寸的影響

Rectangle矩形框

矩形框是最常使用的組件之一，可以生成一個矩形框，類似於button

Rectangle {
        width: 100
        height: 100
        color: "red"
        border.color: "black"	//邊框顏色
        border.width: 5			//邊框寬度
        radius: 10				//矩形角半徑
        anchors.centerIn: parent
}

漸變色

漸變色的顏色和漸變位置設置如下所示

gradient: Gradient {
        GradientStop { position: 0.0; color: "white" }
        GradientStop { position: 1.0; color: "blue" }
}

漸變效果如下：

如果需要將漸變方向改爲橫向漸變，只需增加一個旋轉角度即可：

Rectangle {
      rotation: 90					//旋轉角度
      gradient: Gradient {
          GradientStop { position: 0.0; color: "white" }
          GradientStop { position: 1.0; color: "blue" }
      }
}

//position:開始漸變的位置（0~1）
//color：漸變色的始末

漸變效果如下：

Label 標籤

標籤是最常使用的組件之一，它的定義方法和主要屬性如下所示：

Label{
        text: "label"
        width: 100
        horizontalAlignment: Text.AlignHCenter	//設置文本水平居中

        anchors.centerIn: parent
        background:  Rectangle{					//設置label背景
            color: "gray"
    	}
}

輸入框

輸入框使用範例如下：

TextField{
        placeholderText: "請輸入文本："   //提示文本
}

按鈕

按鈕Button是Qt最常用的組件之一，其常見操作如下：

• 添加圖標

  icon.source: "qrc:/../icon/close.png"
  

• 圖標和文字顯示方式

  AbstractButton.IconOnly			//僅顯示圖標
  AbstractButton.TextOnly			//僅顯示文字
  AbstractButton.TextBesideIcon	//圖標在文字左側
  AbstractButton.TextUnderIcon	//圖標在文字上方
  

圓形按鈕

• 圓形按鈕和普通按鈕沒有實質上的區別，只是圓形多一個radius屬性用於調整按鈕邊角弧度

複選框

CheckBox是複選框，可以顯示不同的選擇狀態

CheckBox{
        text: "First"
        checked : true

        onCheckStateChanged: {		//選擇狀態改變時輸出狀態值
            console.log(checked)
    }
}

延時按鈕

延時按鈕在Qt中是沒有的，類似於長按操作，只有按住延時按鈕一定時間之後，按鈕的選擇狀態纔會切換

DelayButton{
        text: "DelayButton"
        delay: 1000
}

單選框

RowLayout {
        RadioButton{
            id : r1
            text: "YES"
        }

        RadioButton{
            id : r2
            text: "NO"
        }
}

QML界面和QWidget界面融合

注意：只能在QWidget中包含QML，不能反過來使用

使用步驟：

1. UI設計器中有QQuickWidget控件，拉取到ui文件中，並且需要在.pro配置文件中添加QT += quickwidgets

2. 添加頭文件#include

3. 點擊File–>New File or Project–>選擇QML文件

4. 在mainwindow.cpp中添加

   ui->quickWidget->setSource(QUrl("qrc:/FirstPage.qml"));		//其中QUrl中爲資源文件路徑
   

   程序運行效果：
   

視頻教程鏈接：https://www.bilibili.com/video/BV1uJ41147qY?p=1