QML入门开发3-QML基本语法和如何查看帮助文档

learn_coder

于 2025-03-24 21:07:16 发布

阅读量350

点赞数 7

文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_43296173/article/details/146485966

版权

1新建一个QML工程

2添加如下代码

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    //矩形
    Rectangle{
        id:redRectanggle
        width: roundRectangg.width
        height: roundRectangg.height
        anchors.top: parent.top
        anchors.topMargin:  10
        anchors.horizontalCenter: parent.horizontalCenter
        color: "red"
    }
    //圆形
    Rectangle{
        id:roundRectangg
        width: 100
        height: 100
        anchors.centerIn:parent
        anchors.margins: 10
        anchors.horizontalCenter: parent.horizontalCenter
        color: "green"
        radius: 0.5 * width
    }

    /*
    //椭圆
    Rectangle{
        id:ellipse
        width: 150
        height: 100
        anchors.centerIn:parent
        anchors.margins: 10
        anchors.horizontalCenter: parent.horizontalCenter
        color: "green"
        radius: 0.5 * width
    }
    */

    //add 按钮
    Button{
        id:addButton
        text:"add"
        font.pixelSize: 20
        width: 100
        height: 40

        onClicked: {
            console.log("add "+roundRectangg.width )
            roundRectangg.width +=10

        }
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        anchors.right: parent.right
        anchors.rightMargin: 100
    }
    //sub 按钮
    Button{
        id:subButton
        text:"sub"
        font.pixelSize: 20
        width: 100
        height: 40

        onClicked: {
            console.log("add "+roundRectangg.width )
            roundRectangg.width -=10
        }

        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10

        anchors.left: parent.left
        anchors.leftMargin:  100
    }
}

3相关的QML代码解释

3.1包含 import

import QtQuick
import QtQuick.Controls

The Qt Quick module provides graphical primitive types. These types are only available in a QML document if that document imports the QtQuick namespace.

类似于命名空间，QtQuick命名空间里面的关键次如 Rectangle、windows可以访问。QtQuick.Controls命名空间里可以访问Button