若該文為原創文章，未經允許不得轉載

​

各位讀者，知識無窮而人力有窮，要麼改需求，要麼找專業人士，要麼自己研究

目錄

​​qml開發筆記(一)：界面元素初探​​

​​前話​​

​​qml嵌入式qt（qt5以後）​​

​​界面元素初探​​

​​Rectangle：一個矩形框​​

​​Text：一個顯示框，必須為子對象​​

​​MouseArea：處理滑鼠輸入，必須為子對象，其父對象必須為可視的​​

​​Properties​​

​​Methods​​

紅胖子(紅模仿)的博文大全：開發技術集合（包含Qt實用技術、樹莓派、三維、OpenCV、OpenGL、ffmpeg、OSG、單片機、軟硬結合等等）持續更新中...（點選傳送門）

​​Qt開發專欄：qml開發（點選傳送門）​​

qml開發筆記(一)：界面元素初探

前話

qml實作不同的元素界面效果的方式。

qml嵌入式qt（qt5以後）

請檢視部落格《Qt實用技巧：在Qt Gui程式中嵌入qml界面（可動态覆寫整個視窗）》

界面元素初探

    Qml由多個界面元素組成，其機制是一幀一幀的畫，與Qt Gui指定重畫特定的視窗機制不同，在開始元素學習之前，有幾點需要注意，如下：

• 每句末尾無需”;”，但多項同行需要”;”隔開，此處加上是為增加可讀性)；
• 聲明必須為子對象的，其必須有父對象，運作無效，顯示加載qml失敗；
• 包含屬性的“"”，可以改為“'”，即單/雙引号都可用；

Rectangle：一個矩形框

Rectangle {
    x: 0;                  // 右上角橫坐标，預設為0
    y: 0;                  // 右上角縱坐标，預設為0
    width: 300;            // 寬度，預設為0，其子對象仍會顯示（相對于0）
    height:300;            // 高度，預設為0，其子對象仍會顯示（相對于0）
    color: "red";          // 顔色，預設為白色或透明（父視窗和其顯示都是白色，未進一步判斷）
    opacity: 0.5;          // 透明度，預設為1
    rotation: 30;          // 旋轉度，預設為0，中心瞬時鐘旋轉
    radius: 10;            // 圓角度，預設為0，從本元素最外框開始圓角
    border.width: 20;      // 邊框寬度，預設為0
    border.color: "white"; // 邊框顔色，預設為黑色"balck"
    z: 1;                  // 顯示順序，同一層的元素，越大越在上面
}      

效果如下圖：

Text：一個顯示框，必須為子對象

Rectangle {
    width: 300; 
    height: 300; 
    color: "red"; 
    Text {
        anchors.centerIn: parent; // 位置：設定顯示在父視窗中間，預設為右上角
        text: "hello world! ";    // 内容：顯示字元串
    }
}      

效果如下圖：

MouseArea：處理滑鼠輸入，必須為子對象，其父對象必須為可視的

Rectangle {
    width: 300; // 寬度，預設為0，其子對象仍會顯示（相對于0）
    height: 300; // 高度，預設為0，其子對象仍會顯示（相對于0）
    color: "red"; // 顔色
    MouseArea {
        acceptedButtons: Qt.LeftButton | Qt.MiddleButton; // 預設為Qt.RightButton
        anchors.fill: parent; // 預設：無
        onClicked: {
            if(mouse.button == Qt.LeftButton) {
                parent.color = "  blue  "; // 加空格也可以，機制中可能去掉所有空格
            }else{
                console.log("yellow"); // 列印到控制台
                parent.color = "yellow";
            }
        }
    }
}      

效果如下圖：紅色=>藍色(滑鼠右鍵)=>黃色（滑鼠左鍵）

從上面幾個看出來很多屬性是類似的，從qt幫助檔案中看出很多屬性是繼承的，那麼先了解屬性，我們從幫助檔案開始，檢視Rectangle相關的幫助檔案：

Rectangle的定制屬性隻有4項，其中邊框有寬度和顔色兩個子項；其他都是繼承于Item，我們檢視Item的幫助檔案，繼承關系如下：

Item類，幫助檔案中描述“The Item type is the base type for all visual items in Qt Quick.”，是以我們，學習屬性先從Item開始，Item有屬性和方法，其詳解将在下一篇章介紹，屬性和方法清單如下：

Properties

• ​​activeFocus​​ : bool
• ​​activeFocusOnTab​​ : bool
• ​​anchors​​

• ​​anchors.top​​ : AnchorLine
• ​​anchors.alignWhenCentered​​ : bool
• ​​anchors.baselineOffset​​ : real
• ​​anchors.verticalCenterOffset​​ : real
• ​​anchors.horizontalCenterOffset​​ : real
• ​​anchors.rightMargin​​ : real
• ​​anchors.leftMargin​​ : real
• ​​anchors.bottomMargin​​ : real
• ​​anchors.topMargin​​ : real
• ​​anchors.margins​​ : real
• ​​anchors.centerIn​​ : Item
• ​​anchors.fill​​ : Item
• ​​anchors.baseline​​ : AnchorLine
• ​​anchors.verticalCenter​​ : AnchorLine
• ​​anchors.horizontalCenter​​ : AnchorLine
• ​​anchors.right​​ : AnchorLine
• ​​anchors.left​​ : AnchorLine
• ​​anchors.bottom​​ : AnchorLine

• ​​antialiasing​​ : bool
• ​​baselineOffset​​ : int
• ​​children​​ : list<Item>
• ​​childrenRect​​

• ​​childrenRect.x​​ : real
• ​​childrenRect.y​​ : real
• ​​childrenRect.width​​ : real
• ​​childrenRect.height​​ : real

• ​​clip​​ : bool
• ​​data​​ : list<Object>
• ​​enabled​​ : bool
• ​​focus​​ : bool
• ​​height​​ : real

​​implicitHeight​​ : real

• ​​implicitWidth​​ : real
• layer.effect : Component
• layer.enabled : bool
• ​​layer.format​​ : enumeration
• ​​layer.mipmap​​ : bool
• ​​layer.samplerName​​ : string
• ​​layer.smooth​​ : bool
• ​​layer.sourceRect​​ : rect
• ​​layer.textureSize​​ : size
• ​​layer.wrapMode​​ : enumeration
• ​​opacity​​ : real
• ​​parent​​ : Item
• ​​resources​​ : list<Object>
• ​​rotation​​ : real
• ​​scale​​ : real
• ​​smooth​​ : bool
• ​​state​​ : string
• ​​states​​ : list<State>
• ​​transform​​ : list<Transform>
• ​​transformOrigin​​ : enumeration
• ​​transitions​​ : list<Transition>
• ​​visible​​ : bool
• ​​visibleChildren​​ : list<Item>
• ​​width​​ : real
• ​​x​​ : real
• ​​y​​ :real
• ​​z​​ :real

Methods

• ​​childAt​​(realx, realy)
• object ​​contains​​(pointpoint)
• ​​forceActiveFocus​​(Qt::FocusReasonreason)
• ​​forceActiveFocus​​()
• object ​​mapFromItem​​(Itemitem, realx, realy, realwidth, realheight)
• object ​​mapFromItem​​(Itemitem, realx, realy)
• object ​​mapToItem​​(Itemitem, realx, realy, realwidth, realheight)
• object ​​mapToItem​​(Itemitem, realx, realy)、
• ​​nextItemInFocusChain​​(boolforward)