QML笔记(二)之QML添加控件与绑定信号槽

最新推荐文章于 2024-08-17 22:23:30 发布

我是黄同学

最新推荐文章于 2024-08-17 22:23:30 发布

阅读量1k

点赞数 1

分类专栏： QML 文章标签： qt 开发语言 qt5 qtcreator QML

本文链接：https://blog.csdn.net/joker__123/article/details/124608583

版权

QML 专栏收录该内容

10 篇文章 7 订阅

订阅专栏

本文介绍了如何使用QML进行界面开发，强调了控件的添加与属性设置，例如通过CSS类似的语法定义Rectangle和Text的样式，并展示了如何利用信号槽绑定实现按钮点击事件。此外，还分享了使用F1快捷键获取控件属性文档的方法，帮助开发者更高效地探索QML的属性效果。

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

一.前言
虽然采用QML进行开发，但是依旧属于Qt的范围，控件的使用与对应的信号使用仍然是核心，毕竟Qt就是一个界面库，然后他的核心就是信号槽

二.添加控件
1.QML的控件添加都是以控件名称+属性的方式进行添加的，楼主认为有点像CSS，控件的位置可以利用属性x y进行设置
2.举例

import QtQuick 2.8
import QtQuick.Window 2.2
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("QML例子V1.0")


    MainForm {
        
        // 矩形框
        Rectangle {
            // 大小
            width: 640
            height: 480

            // 背景设置渐变
            gradient: Gradient {
                GradientStop { position: 0.0; color: "yellow" }
                GradientStop { position: 1.0; color: "green" }
            }

            // 显示文本
            Text {
                id: text_hello
                anchors.bottom: parent
                text: qsTr("Hello QML")
                font.family: "微软雅黑"
                font.pointSize: 10
                opacity: 0.5
            }

            // 按钮
            Button {
               id:btn_1
               x:300
               y:300
               anchors.centerIn: parent
               text: "按钮1"
               font.family: "微软雅黑"
               onClicked: {
                   console.log(Qt.formatDateTime(new Date(),"yyyy-MM-dd HH:mm:ss.zzz")+":"+btn_1.text+"按下")
               }
            }
        }
    }
}

在这里插入图片描述
三.信号槽绑定(这里用按钮作为举例)
1.QML的信号槽都是以on开头的+信号属性进行定义的

四.其他
1.开始用QML进行开发，有时候即使知道控件名称，但是却不知道它有啥属性可以设置，这时候就要善于利用F1，将鼠标放于控件名称上，会出现如下
在这里插入图片描述
然后按下F1，就会在右侧出现

这样就可以根据文档的说明，进行属性的设置了，至于属性是什么效果，就可以一个个试验了