QT之QML从入门到精通（第一章）

于 2024-09-08 14:32:30 发布
阅读量948 收藏 7
点赞数 6
文章标签： qt 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58233509/article/details/141496340
版权

简介

什么是 QML

QML，全称为 Qt Meta-Object Language，是一种声明式语言，用于在 Qt 框架中创建用户界面（UI）。它采用了 JavaScript 的语法，并通过 Qt 的 QML 引擎来解释和执行 QML 代码。通过 QML，开发者可以快速、简单地创建现代化的用户界面，而无需太多的代码。

QML 的特点

QML 具有以下特点：
声明式语言：QML 使用声明式语言，使得开发者可以更加直观地构建 UI，无需过多关注底层实现细节。
基于 JavaScript：QML 语法基于 JavaScript，因此对于有一定 JavaScript 基础的开发者来说，学习 QML 会相对容易。
可读性高：QML 语法结构简单清晰，易于理解和维护，减少代码量和开发时间。
可定制性强：QML 中可以通过修改属性来快速定制 UI，无需编写额外代码。
与 C++ 无缝结合：QML 可以与 C++ 代码进行无缝结合，提供了更多的开发灵活性和可扩展性。

QML 的用途

移动应用程序的 UI 开发，如手机应用等。
桌面应用程序的 UI 开发，如计算器等。
嵌入式系统的 UI 开发，如车载导航、工业自动化等。
同时，QML 也可用于开发图形化控件、动画和过渡效果等。总之，QML 是一个功能强大的 UI 开发工具，适用于各种类型的应用程序和设备。

创建第一个QML实例

文件->选择新建文件或项目->Application->Qt Quick Application然后一路下一步即可，如果在当前电脑中装了不同版本qt程序在选择Details时可以会出现无法选中的情况，可以找一下低版本的qtcreator(qt5.12.7)，本次实例都是基于qt5.12来实现。

 

 Widget控件介绍

main.qml引入版本

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform

Window{ //root控件 主界面
    signal mySig(); //自定义一个信号
    onMySig: {   //触发信号所执行的函数，信号名加on，并且第一个字母大写
     console.log("mySig test")
    }
    onWidthChanged: {  //窗口的宽度改变时会触发这个函数
        console.log("width change ",width)  //打印语句，打印宽度
        myValue = width;
    }

    property int  myValue: 0  // 创建一个int类型的属性，他也会自动生成信号和槽
    onMyValueChanged: {
        console.log("myVale",myValue)
    }
    width: 640
    height: 480
    x:500 ;y:500  // x 和y用于设置对于父控件的位置，0 0 为左上角，如果要在一行写多条语句，要用分号；隔开
    visible: true //设置是否可见
    title: qsTr("Hello Quick ApplicaitonWindows") //设置标题
    color: "darkGray" //设置背景色为深灰色
//    maximumWidth: 600 //设置最大宽度
//    maximumHeight: 600 //设置最大高度
//    minimumWidth: 600 //设置最小宽度
//    minimumHeight: 600 // 设置最小高度
//    opacity: 0.5 //设置透明度 范围是0-1

}

以上代码因为只涉及到了qml，可以在QT中使用QtCreator来运行，也可以使用cmd命令，调出控制台窗口，输入：qml main.qml 来启动实例（需要配置环境变量）。

 main.qml完整版本

import QtQuick 2.12 //2.15
import QtQuick.Window 2.12 //2.15
import QtQuick.Controls 2.12 //可以引入别的控件
import Qt.labs.folderlistmodel 2.12
import Qt.labs.platform 1.0 as Platform

Window{ //root控件 主界面
    signal mySig(); //自定义一个信号
    onMySig: {   //触发信号所执行的函数，信号名加on，并且第一个字母大写
     console.log("mySig test")
    }
    onWidthChanged: {  //窗口的宽度改变时会触发这个函数
        console.log("width change ",width)  //打印语句，打印宽度
        myValue = width;
    }

    property int  myValue: 0  // 创建一个int类型的属性，他也会自动生成信号和槽
    onMyValueChanged: {
        console.log("myVale",myValue)
    }
    width: 640
    height: 480
    x:500 ;y:500  // x 和y用于设置对于父控件的位置，0 0 为左上角，如果要在一行写多条语句，要用分号；隔开
    visible: true //设置是否可见
    title: qsTr("Hello Quick ApplicaitonWindows") //设置标题
//    color: "darkGray" //设置背景色为深灰色
//    maximumWidth: 600 //设置最大宽度
//    maximumHeight: 600 //设置最大高度
//    minimumWidth: 600 //设置最小宽度
//    minimumHeight: 600 // 设置最小高度
//    opacity: 0.5 //设置透明度 范围是0-1

    Button{
        id:btn1  //提供名称，可以根据ID来访问别的控件
        objectName: "btn1"
        width: 50
        height: 50
        background: Rectangle
        {
            border.color:btn1.focus?"blue":"red"  //这个按钮的边框演示，如果有焦点是蓝色，否则是红色
        }
        onClicked: { //按钮的点击时间
            console.log("Btn1 click")
        }
  //块注释：注意因为是qml不是cpp所以不能使用宏编译注释 /**/
        //按下键盘的Tab键，也可以切换焦点
        Keys.onRightPressed: {  //焦点如果在当前控件时，按下(键盘右键->)切换焦点
            btn2.focus = true;
        }


    }
    Button{
        id:btn2  //提供名称，可以根据ID来访问别的控件
        x :100
        width: 50
        height: 50
        objectName: "btn2"
        background: Rectangle
        {
            border.color:btn2.focus?"blue":"red"  //这个按钮的边框演示，如果有焦点是蓝色，否则是红色
        }
        onClicked: {
            console.log("Btn2 click")
        }
        Keys.onLeftPressed://焦点如果在当前控件时，按下(键盘左键<-)切换焦点
        {
            btn1.focus = true;
        }
    }
    onActiveFocusItemChanged:{
        console.log("获取焦点改变后的控件：",activeFocusItem.objectName) //item是对象，打印不出id，需要设置名称
    }
}

Rectangle控件介绍

rectangle：英文意思为：长方形，矩阵。

main.qml引入版本

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")



    Rectangle{
        id:rect1
        width: 100;height: 100;
        rotation: 30; //设置角度
        scale: 0.5; //控件缩放默认是1
        antialiasing: false; //抗锯齿设置
        color: "black"
        border.color: "red" //边框颜色
        border.width: 10  //边框宽度
        radius: 50;//边框圆角，控件宽度/2及为圆形
        gradient: Gradient{ //坡度，用于设置渐变颜色
            GradientStop{position: 0.0;color:"lightsteelblue"}
            GradientStop{position: 1.0;color: "blue"}
        }
//        anchors.centerIn: parent  //居中与父控件
        anchors.horizontalCenter: parent.horizontalCenter//水平居中
        anchors.verticalCenter: parent.verticalCenter//垂直居中

    }
    Rectangle{
        id:rect2
        width: 100;height: 100;
        color: "blue"
        anchors.left: rect1.right //长方形的左边对应rect1的右边
        anchors.top: rect1.bottom //长方形的顶部对应rect1的底边
        anchors.margins: 10 //设置间隔
    }
/*
    Rectangle{
        x:100;y:100;z:1  //z轴可以设置那个控件在上面，z默认值为0
        width: 100;height: 100
        color: "black"
        focus: true;
//        activeFocus:  //激活焦点

        MouseArea{ //鼠标区域点击时触发函数
            anchors.fill: parent
            onClicked: {
            console.log("click")
            }
        }
        Keys.onReturnPressed: //Enter回车键按下触发事件
        {
            console.log("on return pressed")
        }
    }
*/

}

main.qml自定义边框

自定义MyRectangle.qml文件
import QtQuick 2.0

Rectangle{
      id:borderRect
      property int  myTopMargin: 0 //向外部暴露属性，可以修改内部的值
      property int  myBottomMargin: 0
      property int myRightMargin: 0
      property int  myLeftMargin: 0

      color: "blue"
      Rectangle{
        id:innerRect
        anchors.fill: parent
        anchors.topMargin: myTopMargin
        anchors.bottomMargin: myBottomMargin
        anchors.rightMargin: myRightMargin
        anchors.leftMargin: myLeftMargin

        color: "black"
        radius: width/2


      }
}
main.qml引入自定义的文件
import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    MyRectangle
    {
        radius: 50
//        objectName: "myRectagnle"
        id: myrect
        width: 100;height: 100
        x:10
        myTopMargin: 10
        myLeftMargin: 10
        myRightMargin: 10
        myBottomMargin: 10
        gradient: Gradient{ //坡度，用于设置渐变颜色
            GradientStop{position: 0.0;color:"lightsteelblue"}
            GradientStop{position: 1.0;color: "blue"}
        }
    }

    Rectangle{

        id:rect1
        width: 100;height: 100;
        rotation: 30; //设置角度
        scale: 0.5; //控件缩放默认是1
        antialiasing: false; //抗锯齿设置
        color: "black"
        border.color: "red" //边框颜色
        border.width: 10  //边框宽度
        radius: 50;//边框圆角，控件宽度/2及为圆形
        gradient: Gradient{ //坡度，用于设置渐变颜色
            GradientStop{position: 0.0;color:"lightsteelblue"}
            GradientStop{position: 1.0;color: "blue"}
        }
//        anchors.centerIn: parent  //居中与父控件
        anchors.horizontalCenter: parent.horizontalCenter//水平居中
        anchors.verticalCenter: parent.verticalCenter//垂直居中

    }
    Rectangle{
        id:rect2
        width: 100;height: 100;
        color: "blue"
        anchors.left: rect1.right //长方形的左边对应rect1的右边
        anchors.top: rect1.bottom //长方形的顶部对应rect1的底边
        anchors.margins: 10 //设置间隔
    }
/*
    Rectangle{
        x:100;y:100;z:1  //z轴可以设置那个控件在上面，z默认值为0
        width: 100;height: 100
        color: "black"
        focus: true;
//        activeFocus:  //激活焦点

        MouseArea{ //鼠标区域点击时触发函数
            anchors.fill: parent
            onClicked: {
            console.log("click")
            }
        }
        Keys.onReturnPressed: //Enter回车键按下触发事件
        {
            console.log("on return pressed")
        }
    }
*/

}

自定义动画效果

main.qml引入

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: rect
        width: 100; height: 100
        color: "red"
        PropertyAnimation on x { to: 100 } //修改控件的位置,on立即触发
        PropertyAnimation on y { to: 100 }
        PropertyAnimation on width{to:140;duration:1000}
        SequentialAnimation on color { //连续的动画，可以将多个动画组组合在一起。
            ColorAnimation {
                from: rect
                to: "yellow"
                duration: 500
            }
            ColorAnimation {
                from: rect
                to: "blue"
                duration: 500
            }
        }
    }

/* 动画效果控件
    Rectangle {
        id: flashingblob
        width: 75; height: 75
        color: "blue"
        opacity: 1.0
        MouseArea {
            anchors.fill: parent
            onClicked: {
                animateColor.start()
                animateOpacity.start()
                animateWidth.start()
            }
        }

        PropertyAnimation {
            id: animateColor; target: flashingblob; properties: "color"; to: "green"; duration: 1000}

        NumberAnimation {
            id:animateWidth
//            properties: "width" //两者似乎都可以，作用的属性
              property: "width"
            to:150 //改变后的数值
            target: flashingblob //作用动画的对象
            duration: 1000 //动画持续时间
            easing.type: Easing.InOutQuad
        }
        NumberAnimation {
            id: animateOpacity
            target: flashingblob
            properties: "opacity"
            from: 0.1
            to: 1.0
            duration: 1000
//            loops: Animation.Infinite
//            easing {type: Easing.OutBack; overshoot: 500}
       }
    }
*/

/*
    Rectangle {
        state: "blue_color"
        id: root
        width: 100; height: 100
        focus: true

        states: [ //控件的状态，状态改变时进行不同的实现，有限状态机编程。
            State{
                name:"no_color"
                PropertyChanges {target: root;color:"white"}
            },
            State {
                name: "red_color"
                PropertyChanges { target: root; color: "red";width:200 }
            },
            State {
                name: "blue_color"
                PropertyChanges { target: root; color: "blue" ;height:200}
            }
        ]
        MouseArea{
            anchors.fill: parent
            onPressed:
            {
                root.state = "red_color"
            }
            onReleased:
            {
                root.state = "blue_color"
            }
        }
    }
*/
}
main.qml完整实例
import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: banner
        width: 150; height: 100; border.color: "black"

        Column {
            anchors.centerIn: parent
            Text {
                id: code
                text: "Code less."
                opacity: 0.01
            }
            Text {
                id: create
                text: "Create more."
                opacity: 0.01
            }
            Text {
                id: deploy
                text: "Deploy everywhere."
                opacity: 0.01
            }
        }

        MouseArea {
            anchors.fill: parent
            onPressed: playbanner.start()
        }

        SequentialAnimation {
            id: playbanner
            running: false
            NumberAnimation { target: code; property: "opacity"; to: 1.0; duration: 200}
            NumberAnimation { target: create; property: "opacity"; to: 1.0; duration: 200}
            NumberAnimation { target: deploy; property: "opacity"; to: 1.0; duration: 200}
        }
    }
    /*
    Rectangle {
        width: 75; height: 75; radius: width
        id: ball
        color: "salmon"
        MouseArea{
            anchors.fill: parent
            onClicked: {
                ball.x+=50
                ball.y+=50
            }
        }
        Behavior on x { //行为
            NumberAnimation {
                id: bouncebehavior
                easing {
                    type: Easing.OutElastic //有弹性的 动画效果
                    amplitude: 1.0 //震动幅度
                    period: 0.5 //周期
                }
            }
        }
        Behavior on y {
            animation: bouncebehavior
        }
        Behavior {
            ColorAnimation {target: ball; duration: 1000 }
        }
    }
*/
/*
    Rectangle {
        width: 75; height: 75
        id: button
        state: "RELEASED"

        MouseArea {
            anchors.fill: parent
            onPressed: button.state = "PRESSED"
            onReleased: button.state = "RELEASED"
        }

        states: [
            State {
                name: "PRESSED"
                PropertyChanges { target: button; color: "lightblue"}
            },
            State {
                name: "RELEASED"
                PropertyChanges { target: button; color: "lightsteelblue"}
            }
        ]

        transitions: [ //添加颜色的动画效果
            Transition {
                from: "PRESSED"
                to: "RELEASED"
                ColorAnimation { target: button; duration: 1000}
            },
            Transition {
                from: "RELEASED"
                to: "PRESSED"
                ColorAnimation { target: button; duration: 1000}
            }
        ]
    }
*/
    /*
    Rectangle {
        id: rect
        width: 100; height: 100
        color: "red"
        PropertyAnimation on x { to: 100 } //修改控件的位置,on立即触发
        PropertyAnimation on y { to: 100 }
        PropertyAnimation on width{to:140;duration:1000}
        SequentialAnimation on color { //连续的动画，可以将多个动画组组合在一起。
            ColorAnimation {
                from: rect
                to: "yellow"
                duration: 500
            }
            ColorAnimation {
                from: rect
                to: "blue"
                duration: 500
            }
        }
    }
*/
/* 动画效果控件
    Rectangle {
        id: flashingblob
        width: 75; height: 75
        color: "blue"
        opacity: 1.0
        MouseArea {
            anchors.fill: parent
            onClicked: {
                animateColor.start()
                animateOpacity.start()
                animateWidth.start()
            }
        }

        PropertyAnimation {
            id: animateColor; target: flashingblob; properties: "color"; to: "green"; duration: 1000}

        NumberAnimation {
            id:animateWidth
//            properties: "width" //两者似乎都可以，作用的属性
              property: "width"
            to:150 //改变后的数值
            target: flashingblob //作用动画的对象
            duration: 1000 //动画持续时间
            easing.type: Easing.InOutQuad
        }
        NumberAnimation {
            id: animateOpacity
            target: flashingblob
            properties: "opacity"
            from: 0.1
            to: 1.0
            duration: 1000
//            loops: Animation.Infinite
//            easing {type: Easing.OutBack; overshoot: 500}
       }
    }
*/

/*
    Rectangle {
        state: "blue_color"
        id: root
        width: 100; height: 100
        focus: true

        states: [ //控件的状态，状态改变时进行不同的实现，有限状态机编程。
            State{
                name:"no_color"
                PropertyChanges {target: root;color:"white"}
            },
            State {
                name: "red_color"
                PropertyChanges { target: root; color: "red";width:200 }
            },
            State {
                name: "blue_color"
                PropertyChanges { target: root; color: "blue" ;height:200}
            }
        ]
        MouseArea{
            anchors.fill: parent
            onPressed:
            {
                root.state = "red_color"
            }
            onReleased:
            {
                root.state = "blue_color"
            }
        }
    }
*/
}

only-lucky
关注
QT编程从入门到精通之三：“第一章：认识QT”之“1.3 Qt特性”
LuckyHanMo的博客
09-10 255
QT编程从入门到精通；第一章：认识QT；1.3 Qt特性
QT编程从入门到精通之八：“第三章：Qt Creator”之“3.2 欢迎界面”
LuckyHanMo的博客
09-16 573
QT编程从入门到精通；第三章：Qt Creator； 3.2 欢迎界面
Qml学习，适合初学者
11-03
找到的一个感觉比较好的qml介绍教程，感觉适合初学者，期望和大家分享
QT学习笔记-qml开发
最新发布
CSDN5817的博客
06-26 1720
鼠标区域悬停使能（hoverEnabled:false具有悬浮特性的事件不会被触发，例如：onContainsMouseChanged，onMouseXChanged）1.在 QML 中，可以通过信号和槽来实现元素之间的通信。1)添加图片和动图，以及子文件，实现控件的构造及析构，图片、动图的放大缩小以及倍数播放暂停。鼠标无动作：normal、鼠标按下：red_color、鼠标松开：blue_color。2.选择创建路径和项目名称（不能有中文），后面一直点击下一步到工程建立完成。透明度0.1-1、持续1s;
QML中文教程及初学者入门
05-28
本资源是用于QML初学者进门的，里面的内容让新手更易懂。
QML基础——入门教程
weixin_30369041的博客
01-30 517
QML入门教程(1) QML是什么？ QML是一种描述性的脚本语言，文件格式以.qml结尾。语法格式非常像CSS(参考后文具体例子)，但又支持javacript形式的编程控制。它结合了QtDesigner UI和QtScript的优点。QtDesigner可以设计出.ui界面文件,但是不支持和Qt原生C++代码的交互。QtScript可以和Qt原生代码进行交互，但是有一个缺点，如果要在脚本中创...
QML编程入门
热门推荐
henreash的专栏
09-02 8万+
欢迎来到声明式UI语言QML的世界.在本入门教程中,我们使用QML创建一个简单的文本编辑器.阅读这个教程后,就可以使用QML和Qt C++开发应用程序了. 安装 首先需要安装包含Qt Quick的Qt最新版本,现在是Qt4.7.安装教程包括安装说明书和不同平台的需求. Qt Quick包含一个叫做QML的声明式语言,Qt Declarative Module,和 QML Viewer
qml 学习
feipigwang
07-02 115
1.介绍 QML是一种描述语言，主要是对界面效果等的一种描述，它可以结合javaScript来进行更复杂的效果及逻辑实现。比如做个游戏，实现一些更有趣的功能等 2.简单的例子 importQt4.7 Rectangle{ width:200 height:200 color:"blue" } 代码是绘制一个蓝色的矩形，宽200高200，import包含一个qt4.7的包 3.基本元素...
QML__Nokia 培训资料（入门到精通）
11-10
详细的介绍了QML的特性，使用方法，入门以及深入了解等
QT编程从入门到精通之七：“第三章：Qt Creator”之“3.1 Qt Creator特色”
LuckyHanMo的博客
09-16 538
QT编程从入门到精通；第三章：Qt Creator；3.1 Qt Creator特色
QML入门教程
03-21
QML入门教程
QML学习手册
04-26
主要是对QML的简介、QML的快速入门以及高级进阶，包含17章。
QT编程从入门到精通之十：“第三章：Qt Creator”之“3.4 UI编辑”
LuckyHanMo的博客
09-16 708
QT编程从入门到精通；第三章：Qt Creator；3.4 UI编辑
QT编程从入门到精通之十一：“第三章：Qt Creator”之“3.5 构建与运行程序”
LuckyHanMo的博客
09-16 709
QT编程从入门到精通；第三章：Qt Creator；3.5 构建与运行程序
qml学习
虾球
08-01 1666
qml项目 打开 Qt Creator 并创建一个新的项目，我们再次选择 Qt Quick Application Empty 作为我们的模板。 如您所见，我们现在处于与 Hello World 应用程序完全相同的位置。 开始新项目时，我总是做的第一件事是更新 main.qml 文件中的导入。 无论出于何种原因，Qt 都不会使用最新的导入创建 QML 文件，所以让我们更改它。 目前我们有 QtQuick 2.12 和 QtQuick.Window 2.12 作为我们在 main.qml 文件中的导入
打造卓越 QML 层级设计：从入门到精通
探索C++编程的奥秘，分享深入的技术见解和实践，旨在激发读者创造力与解决问题的思维。
04-29 3646
打造卓越 QML 层级设计：从入门到精通
QML入门教程(2)
紫侠的天空
05-21 854
本站所有文章由本站和原作者保留一切权力，仅在保留本版权信息、原文链接、原 文作者的情况下允许转载，转载请勿删改原文内容， 并不得用于商业用途。 谢谢合作。原文链接:QML入门教程(2) 在上一篇文章里我们使用了最基础的QML类型实现了文字Hello,World的显示。这篇文章中将会增加颜色选项面板，用户可以给Hello,World设置不同的颜色，如下图显示QML组件
Qt Quick/QML入门到精通_专栏demo对应文章目录(目前50个左右demo/长期更新)
抵抗时间扭曲，坚持做一件有意义的事
09-01 1万+
自定义图标下拉列表框的效果如下所示:自定义三态按钮的效果如下所示:传送门:53.qt quick-自定义三态按钮、自定义图标下拉列表框_诺谦的博客-CSDN博客传送门:59.qt quick-qml调色板(颜色取色器)实现、自定义QQuickStyle样式_诺谦的博客-CSDN博客63.qt quick-QML侧边滑动栏(不需要任何图片资源,支持自定义左右方向和大小)_诺谦的博客-CSDN博客_qt实现好看侧边栏。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值