Qt Quick系列(3)—组件component

news2024/12/23 22:30:16

🚀作者:CAccept
🎂专栏:Qt Quick
在这里插入图片描述

文章目录

  • 概念
  • 相关知识点
  • 代码示例
  • 总结

概念

在Qt Quick中,组件(Component)是一种可重用的元素,可以包含其他子组件或属性。它们可以用来创建自定义的用户界面元素,例如按钮、标签、列表等等。组件通常由一个QML文件定义(.qml文件),该文件包含了组件的结构、样式和行为。
组件可以通过id属性来引用。这允许您在QML文件中使用一个组件的实例,而不必在每个地方都重新定义组件。您可以使用Qt Quick中的Component元素来动态地创建和销毁组件实例,这对于创建动态用户界面非常有用。
组件可以继承自其他组件,这意味着它们可以重用其他组件的属性、行为和样式。组件也可以在其他组件内部定义,这种嵌套组件的方式可以帮助您组织和管理代码。总之,组件是Qt Quick中非常重要的概念,它们允许您创建可重用的、动态的和易于维护的用户界面元素。

相关知识点

  • 我们要引用组件如果不是在同级目录下要记得import,而想要引用相对应的component的时候,是根据文件名进行引用,比如我的组件定义在Button.qml文件中那么,我在main.qml中想要使用Button.qml中的组件的话是使用Button{}
  • 我们可以公布哪些属性是可以被外部所更改(只有放在root下的变量可以在“外部”调用)

代码示例

我现在要想创建一个组件名为Button,这个组件包含着一个矩形框并且可以拿来点击(点击矩形框内部就会触发点击信号),并且这个矩形框还有文字,可以通过外部对矩形框的文字进行修改。
步骤:
1、创建文件Button.qml
2、在Button.qml中的Item下创建一个核心元素Rectangle,在里面进行一些属性的设置
3、在root中新建一些属性来和Rectangle的属性进行绑定,事后我们就可以通过外部对root下的属性进行改变就可以变相的对Rectangle的属性进行改变
4、在Rectangle中创建核心元素MouseArea来实现点击信号的捕捉

Button.qml

import QtQuick 2.0

Item {
    id:root
    //新建一个属性和label的text进行绑定
    property alias text: label.text
    //点击区域就会对信号进行发射
    signal clicked
    Rectangle{
        id:button1
        x:12
        y:12
        width: 116
        height: 26

        color:"lightsteelblue"
        border.color: "slategrey"
        Text
        {
            id:label
            anchors.centerIn: parent
            text:"Start"
        }
        MouseArea
        {
            anchors.fill:parent
            onClicked:{
                root.clicked()
            }
        }
    }
}

main.qml

import QtQuick 2.9
import QtQuick.Window 2.0
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("component")
    Button{
        id:button0
        //可以修改矩形框的文本内容
        text:"开始"
        //设置信号响应的函数
        onClicked:
        {
            //改变text1的文本
            text1.text = "点击了按钮"
        }
    }
    Text{
        id:text1
        x:12
        y:50
        width: 116
        height: 26
        text:"waiting"
        horizontalAlignment: Text.AlignHCenter
    }

    Button{
        id:button1
        x:200
        y:12
        text:"开始"
        onClicked:
        {
            text2.text = "点击了按钮"
        }
    }
    Text{
        id:text2
        x:200
        y:50
        width: 116
        height: 26
        text:"waiting"
        horizontalAlignment: Text.AlignHCenter
    }
}

运行结果:
在这里插入图片描述
在这里插入图片描述

总结

组件的内容和例子还有很多,文章也会一直持续更新,感谢您看到这里,如果文章哪里有错误也请一定要和我说,一起进步,谢谢啦(*^_^*),希望本篇文章对您能够有所帮助!!

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/584309.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PIC adc模块的配置

PIC adc模块的配置有如下要点: 1. adc模块本身: 注意,Auto-conversion Trigger和ADC的clock是两个概念。 auto-conversion Trigger的频率不得超过ADC采样一次的总时长。而真正的采样率是auto-conversion Trigger的頻率。 采样的过程中&…

2023音视频开发程序员未来10年路线选择

2023音视频开发程序员未来10年路线选择: 音视频领域,其实你可以分三个部分来看, 第一是音视频本身,第二是网络通讯,第三是图像处理。 音视频本身涉及到音视频视频编解码啊,各种视频容器啊等等协议规范。 网…

【Java SE】| Java 序列化详解

目录 🦁 什么是序列化和反序列化?🦁 序列化和反序列化常见应用场景🦁 序列化协议对应于 TCP/IP 4 层模型的哪一层?🦁 常见序列化协议有哪些?1. Java自带的序列化方式2. Kryo3.Hessian 🦁 什么是…

Dockerfile(6) - EXPOSE 指令详解

EXPOSE 通知 Docker 容器在运行时监听指定的网络端口 EXPOSE 端口号 EXPOSE 端口号/协议 默认协议是 TCP 同时在 TCP、UDP 上暴露端口 EXPOSE 80/tcp EXPOSE 80/udp EXPOSE 原理 个人理解:EXPOSE 暴露的端口更像是指明了该容器提供的服务需要用到的端口EXPOSE …

独角数卡 搭建-邮件配置-Epusdt配置-收U详细配置

配置独角数卡 https://github.com/assimon/dujiaoka/wiki/2.x_bt_install ⚠️正式上线后一定要将.env配置里面的APP_DEBUG设置为false⚠️ ⚠️正式上线后一定要将.env配置里面的APP_DEBUG设置为false⚠️ ⚠️正式上线后一定要将.env配置里面的APP_DEBUG设置为false⚠️ 安…

FMC子卡设计原理图:141-四路 250Msps 16bits AD FMC子卡 模拟信号、无线电、光电的采集场景

FMC141-四路 250Msps 16bits AD FMC子卡 一、产品概述: 本板卡基于 FMC 标准板卡,实现 4 路 16-bit/250Msps ADC 功能。遵循 VITA 57 标准,板卡可以直接与xilinx公司或者本公司 FPGA 载板连接使用。板卡 ADC 器件采用 ADI 公司 AD9467…

基于关联规则挖掘的商品交叉销售分析

基于关联规则挖掘的商品交叉销售分析 小P:我们最近考虑将一些相关的商品打包销售,以提高GMV,有没有好的方法啊 小H:参考经典的啤酒尿布案例,可以尝试通过关联规则挖掘相关信息 数据探索 # 导入库 import pandas as pd…

创新工具 | 教你6步用故事板设计用户体验事半功倍

问题 构思方案时团队在细节上难以共识 故事板是什么?故事板就像连环画一样,将用户使用解决方案的关键步骤顺序串联了起来,呈现了方案和用户之间的交互。 故事板以先后顺序展现团队票选出来的最佳解决方案,在过程中对于方案中未…

vue 使用vue-json-viewer 展示 JSON 格式数据

vue 使用vue-json-viewer 展示 JSON 格式数据 1、安装 vue-json-viewer插件2、引入插件并注册2.1 全局注册组件2.2 单个页面局部引入 3、插件的基础使用4、插件可选配置说明4.1 选项 4.2 事件4.3 Slots4.4 主题5、实现效果 1、安装 vue-json-viewer插件 npm install vue-json-…

小米新财报:手机承压,转型求生

配图来自Canva可画 近期,国内各互联网大厂、科技公司、电商平台、内容社区等均陆续发布了2023年第一季度财报。在疫情消退、经济回暖的当下,还是有不少企业交出了一份不错的答卷。而国内知名的科技公司——小米集团,由于业务覆盖范围广泛、产…

【线程池】线程池的7种创建方式,详细讲解

文章目录 一、什么是线程池?二、线程池的分类三、线程池的使用四、ThreadPoolExecutor详解 一、什么是线程池? 线程池(ThreadPool)是一种基于池化思想管理和使用线程的机制。它是将多个线程预先存储在一个“池子”内,…

(哈希表 ) 454. 四数相加 II ——【Leetcode每日一题】

❓454. 四数相加 II 难度&#xff1a;中等 给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < nnums1[i] nums2[j] nums3[k] nums4[l] 0 示例 1&a…

如何在多个端口上运行 SSH 服务器?

SSH&#xff08;Secure Shell&#xff09;是一种用于安全远程访问和管理服务器的协议。默认情况下&#xff0c;SSH服务器在Linux系统上使用22号端口进行通信。但是&#xff0c;有时我们可能需要在多个端口上运行SSH服务器&#xff0c;以满足特定的需求或增强服务器的安全性。 本…

Hexo+Twikoo+Vercel 个人博客开启评论功能

Twikoo 文档&#xff1a;https://twikoo.js.org/quick-start.html MongoDB 数据库 点击链接 https://www.mongodb.com/cloud/atlas/register 进入 MongoDB 官网使用邮箱进行注册&#xff1a; 注册之后&#xff0c;MongoDB 会向邮箱发送一封验证邮件&#xff1a; 进入邮箱&…

如何在 Linux 中进行网络地址转换 (NAT)?

网络地址转换&#xff08;Network Address Translation&#xff0c;简称NAT&#xff09;是一种在网络中使用的技术&#xff0c;它允许将私有网络中的IP地址映射到公共网络上&#xff0c;从而实现多个设备共享单个公共IP地址。在Linux系统中&#xff0c;我们可以使用一些工具和配…

实体店引流获客系统模式开发详解

随着互联网的日益发展&#xff0c;实体店的处境变得越来越艰难&#xff0c;获客难和销量差成为了实体店最头疼的两大问题。面对这种情况&#xff0c;一味固步自封是不行的&#xff0c;最好还是顺应潮流&#xff0c;结合一款合适的商业模式&#xff0c;来帮助自己快速引流获客和…

䲟鱼优化算法(ROA)(含MATLAB代码)

先做一个声明&#xff1a;文章是由我的个人公众号中的推送直接复制粘贴而来&#xff0c;因此对智能优化算法感兴趣的朋友&#xff0c;可关注我的个人公众号&#xff1a;启发式算法讨论。我会不定期在公众号里分享不同的智能优化算法&#xff0c;经典的&#xff0c;或者是近几年…

接口测试--apipost接口断言详解

在做接口测试的时候&#xff0c;会对接口进行断言&#xff0c;一个完整的接口测试&#xff0c;包括&#xff1a;请求->获取响应正文->断言。 一、apipost如何进行断言 apipost的断言设置实在后执行脚本中进行编写的。apipost本身提供了11中断言&#xff1a; apt.asser…

经济学基本思维方式

经济学定义 人的欲望是无止境的&#xff0c;而资源有限&#xff0c;这是一个矛盾。 经济学是研究个人和社会如何最优利用由自然和前人提供的有限资源的学问。 经济学的范围 Microeconomics 微观经济学 研究各个行业的运作的以及企业和个人的决策行为的经济学分支。Macroeco…

数据门户基础课程

PC端门户使用示例 首先,以管理员身份登录FineBI系统,安装数据门户,安装步骤见官网 新建一个数据门户