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

若該文爲原創文章，未經允許不得轉載
原博主博客地址：https://blog.csdn.net/qq21497936
原博主博客導航：https://blog.csdn.net/qq21497936/article/details/102478062
本文章博客地址：http://blog.csdn.net/qq21497936/article/details/78498575
各位讀者，知識無窮而人力有窮，要麼改需求，要麼找專業人士，要麼自己研究

目錄

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(real x, real y)
• object contains(point point)
• forceActiveFocus(Qt::FocusReason reason)
• forceActiveFocus()
• object mapFromItem(Item item, real x, real y, real width, real height)
• object mapFromItem(Item item, real x, real y)
• object mapToItem(Item item, real x, real y, real width, real height)
• object mapToItem(Item item, real x, real y)、
• nextItemInFocusChain(bool forward)

 

原博主博客地址：https://blog.csdn.net/qq21497936
原博主博客導航：https://blog.csdn.net/qq21497936/article/details/102478062
本文章博客地址：http://blog.csdn.net/qq21497936/article/details/78498575