QML Training Course II QML语法

最新推荐文章于 2024-05-26 09:15:38 发布

shbyu

最新推荐文章于 2024-05-26 09:15:38 发布

阅读量198

点赞数

分类专栏： Qt 文章标签： qt

本文链接：https://blog.csdn.net/yusheng_bo/article/details/104467057

版权

Qt 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文深入探讨QML的语法，包括元素的层次结构、属性的定义（如property alias）、ID属性的独特作用，以及定位元素的方法，如使用x/y、z坐标和anchors。还介绍了Row和Column布局，以及元素间的间距设置。文中提供了多个示例，如SwitchButton.qml和ButtonExample.qml，以帮助理解QML的实践应用。

摘要由CSDN通过智能技术生成

QML 语法

QML结构是基于元素的层次结构.

每个子元素从 parent 继承位置.

Parent元素: Rectangle

Children元素: MouseArea 和 Text

chileren元素的x,y position继承自其parent元素,即x, y位置相同.

Properties

每个QML元素, 都有很多元素属性(width, radius, font.pixelSize, border.width, model, delegate, etc)
定义新属性: property <type> <name>: <value> Ex: property int count: 0
QML中的类型有: var, int, real, string, bool, double, url, color, font, etc
声明属性的另一种方法是使用别名alias. property alias <name>: <reference>
alias别名属性允许 forward 其它的属性或者object. Ex: property alias buttonText: textItem.text

Id property

id 是element的唯一标识, 就像 object name
id 不是必须的
如果想access object的properties, 则id 有用.

Positioning

使用x和y坐标来定位 object. 使用z来指定layout的顺序

使用 anchors 锚来放置object. anchors允许以另一个element来放置一个element.

Positioning elements

按Row排序, 将child items 要么从左到右, 或者从右到左一个接着一个排序; 从左到右, 或者从右到左取决于layoutDirection 属性

Row {
    spacing: 10
    height: 20
  
    Text {
        text: "Label"
    }
  
    CheckBox {
        checked: false
    }
}

按Column排序, child items 从一列一个接着一个往下排.

Column {
    spacing: 10
   width: 200
    Rectangle {
        width: parent.width
        height: 20
        color: "red"
    }
  
    Rectangle {
        width: parent.width
        height: 20
        color: "yellow"
    }
}

spacing 属性, 间距属性, 用来表示 chile elements之间的距离.

例子

SwitchButton.qml

import QtQuick 2.0

Item {
    id: switchButton

    property string leftText
    property string rightText

    signal leftClicked()
    signal rightClicked()

    onLeftClicked: {
        console.log("inside");
        leftButton.color = "yellow";
        rightButton.color = "#FFFFFF";
    }

    onRightClicked: {
        rightButton.color = "yellow";
        leftButton.color = "#FFFFFF";
    }

}

ButtonExample.qml

import QtQuick 2.8
import QtQuick.Window 2.2

Window {
    id: mainView
    

    Rectangle {
        id: settingsArea
        anchors.bottom: parent.bottom
        width: parent.width
        height: 150
        color: "#39393A"
        radius: 3

        Column {
            height: 100
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
            anchors.rightMargin: 30
            spacing: 10

            SwitchButton {
                rightText: "Right"
                leftText: "Left"

                onLeftClicked: {
                    console.log("Outside");
                    circle.x = 0;
                }

                onRightClicked: {
                    circle.x = (mainView.width - circle.width);
                }
            }

        }
    }
}

SwitchButton.qml 里面的 onLeftClicked 比 ButtonExample.qml 里面的onLeftClicked 先一步执行.