C++QT教程3——手册4.11.1自带教程（笔记）——创建一个QT快速应用

文章目录

  • 创建一个QT快速应用
    • 创建项目
    • 创建主视图
    • 添加应用逻辑
    • 为视图添加动画
    • 素材文件
  • 参考文章

创建一个QT快速应用

本教程使用内置的QML类型，介绍了Qt Quick的基本概念。有关可以选择的用户界面选项的更多信息，请参阅用户界面。

本教程描述了如何使用Qt Creator实现Qt Quick状态和过渡。我们创建一个应用程序，在单击页面上的三个矩形时，显示一个移动的Qt标志。

关于QML：

QML（Qt Meta-Object Language）类型是一种用于构建用户界面的声明性语言。它是Qt Quick框架的核心组成部分，用于描述应用程序的外观和行为。
QML类型是可重用的元素，可以通过组合和嵌套来创建复杂的用户界面。每个QML类型都有属性、信号和方法，可以在其他QML类型中使用和操作。
Qt提供了一些内置的QML类型，如Rectangle（矩形）、Text（文本）、Image（图片）等，这些类型可以直接在QML文件中使用。此外，还可以创建自定义的QML类型，以满足特定的需求。
使用QML类型，可以通过简单而直观的方式构建现代、响应式和动态的用户界面。它使得开发者能够更轻松地实现界面的交互和动画效果。

在这里插入图片描述

有关在设计模式下开发Qt Quick应用程序的更多信息，请参阅开发Qt Quick应用程序。

有关使用Qt Quick控件的示例，请参阅Qt Quick控件示例。

创建项目

  1. 选择“文件”>“新建文件或项目”>“应用程序”>“Qt Quick应用程序-滑动”>“选择”。
  2. 在“名称”字段中输入应用程序的名称。
  3. 在“创建位置”字段中输入项目文件的路径，然后选择“下一步”（或在macOS上选择“继续”）。
  4. 在“构建系统”字段中，选择要用于构建和运行项目的构建系统：qmake、CMake或Qbs。
  5. 在“Qt Quick控件样式”字段中，选择要使用的预定义UI样式之一，然后选择“下一步”。
  6. 选择要为其构建应用程序的平台的工具集。要构建适用于移动设备的应用程序，请选择Android ARM和iPhone OS的工具集，然后单击“下一步”。

注意：如果已在“工具”>“选项”>“工具集”（Windows和Linux）或“Qt
Creator”>“首选项”>“工具集”（macOS）中指定了工具集，则会列出工具集。

  1. 选择“下一步”。
  2. 查看项目设置，然后单击“完成”（或在macOS上单击“完成”）。

Qt Creator生成两个UI文件，Page1Form.ui.qml和Page2Form.ui.qml，以及一个QML文件，main.qml。可以在表单编辑器中修改Page1Form.ui.qml以创建应用程序的主视图，并在文本编辑器中修改main.qml以添加应用程序逻辑。对于本示例，可以忽略Page2Form.ui.qml。

创建主视图

应用程序的主视图在视图的左上角显示一个Qt标志和两个空矩形。

要在应用程序中使用qt-logo.png图像，必须将其从Qt示例目录复制到项目目录（与QML文件相同的子目录）。该图像将显示在资源中。也可以使用任何其他图像或QML类型。

  1. 在Projects视图中，双击打开Page1Form.ui.qml文件以在设计模式下编辑。
    在这里插入图片描述

  2. 在导航器中，选择Label并按Delete键删除它。

  3. 在导航器中选择Page，并在Id字段中输入page。

  4. 在Library > Resources中，选择qt-logo.png并将其拖放到导航器中的页面上。
    在这里插入图片描述
    a. 在Id字段中输入icon。
    b. 在Position字段中，将X设置为10，Y设置为20。

  5. 在Projects视图中右键单击资源文件qml.qrc，并选择Add Existing File将qt-logo.png添加到用于部署的资源文件中。

  6. 将一个Rectangle拖放到导航器中的页面上，并编辑其属性。
    在这里插入图片描述
    a. 在Id字段中输入topLeftRect。
    b. 在Size字段中，将W设置为55，H设置为41，使矩形大小与图像大小相匹配。
    c. 在Color字段中，点击（透明）按钮使矩形透明。
    d. 在Border color字段中，将边框颜色设置为#808080。
    e. 点击Layout，然后点击（Top）和（Left）锚定按钮将矩形锚定到页面的左上角。
    f. 在Margin字段中，为顶部锚点选择20，为左侧锚点选择10。
    在这里插入图片描述

  7. 从库中将Mouse Area类型拖放到导航器中的topLeftRect上。

  8. 点击Layout，然后点击在这里插入图片描述
    （Fill to Parent）按钮将鼠标区域锚定到矩形上。

  9. 在导航器中，通过按Ctrl+C复制topLeftRect，并按Ctrl+V将其粘贴到页面上两次。Qt Creator会将新实例命名为topLeftRect1和topLeftRect2。

  10. 选择topLeftRect1并编辑其属性：
    a. 在Id字段中输入middleRightRect。
    b. 在Layout中，选择在这里插入图片描述
    （垂直居中锚定按钮），然后选择在这里插入图片描述
    （右侧）锚定按钮将矩形锚定到其父级的中右边距。
    c. 在Margin字段中，为右侧锚点选择10，为垂直居中锚点选择0。

  11. 选择topLeftRect2并编辑其属性：
    a. 在Id字段中输入bottomLeftRect。
    b. 在Layout中，选择在这里插入图片描述
    （底部）和在这里插入图片描述
    （左侧）锚定按钮将矩形锚定到其父级的左下边距。
    c. 在Margin字段中，为底部锚点选择20，为左侧锚点选择10。

  12. 在导航器中，选择每个类型的在这里插入图片描述
    （导出）按钮以将所有类型导出为属性。这使可以在main.qml文件中使用这些属性。

  13. 按Ctrl+S保存更改。

要检查的代码，可以在文本编辑器中查看Page1Form.ui.qml文件，并将其与Page1Form.ui.qml示例文件进行比较。

新项目向导向Page1.qml文件添加样板代码以创建菜单项和推送按钮。通过删除过时的代码来修改样板代码。已从UI表单中删除了推送按钮，因此还需要从Page1.qml中删除相应的代码（否则无法构建应用程序）。

现在UI已经准备好，可以切换到在文本编辑器中编辑main.qml文件，以添加动画到应用程序，如下一节所述。
在这里插入图片描述

添加应用逻辑

编辑 main.qml 文件，添加两个额外状态 State1 和 State2 的指针。你无法使用表单编辑器为 Window QML 类型添加状态。请使用文本编辑器将状态添加到 StateGroup QML 类型中，并通过使用状态组的 id 引用它们。\

  1. 将窗口大小和背景颜色指定为 ApplicationWindow 类型的属性：

    ApplicationWindow {visible: truewidth: 640height: 480title: qsTr("Tabs")

  2. 为 Page1 类型指定一个 id，以便能够使用在 Page1Form.ui.qml 中导出的属性：

    SwipeView {id: swipeViewanchors.fill: parentcurrentIndex: tabBar.currentIndexPage1Form {id: page

  3. 在 mouseArea 中添加一个指向点击表达式的指针：

    	mouseArea {onClicked: stateGroup.state = ' '}

  4. 该表达式将状态设置为基本状态，并将图像返回到初始位置。
    在 mouseArea1 中添加一个指向点击表达式的指针，将状态设置为 State1：

    	mouseArea1 {onClicked: stateGroup.state = 'State1'}

  5. 在 mouseArea2 中添加一个指向点击表达式的指针，将状态设置为 State2：

        mouseArea2 {onClicked: stateGroup.state = 'State2'}
}

  6. 将 Qt 标志的位置绑定到矩形，以确保在不同大小的屏幕上缩放视图时，标志显示在矩形内部。设置 x 和 y 属性的表达式，如下面的代码片段所示：

      StateGroup {id: stateGroupstates: [State {name: "State1"PropertyChanges {target: page.iconx: page.middleRightRect.xy: page.middleRightRect.y}},State {name: "State2"PropertyChanges {target: page.iconx: page.bottomLeftRect.xy: page.bottomLeftRect.y}}]

  7. 按 Ctrl+R 运行应用程序。
    点击矩形以将 Qt 标志从一个矩形移动到另一个矩形。

为视图添加动画

在状态组内添加过渡以定义当Qt标志在状态之间移动时属性如何变化。这些过渡将动画应用于Qt标志。例如，当它移动到middleRightRect时，Qt标志会反弹回来，并平稳地进入bottomLeftRect。

  1. 在文本编辑器中，添加以下代码以指定当移动到State1时，Qt标志的x和y坐标在线性时间内变化1秒钟：

      transitions: [Transition {from: "*"; to: "State1"NumberAnimation {easing.type: Easing.OutBounceproperties: "x,y";duration: 1000}},

  2. 可以使用Qt Quick工具栏中的动画功能将缓动曲线类型从线性更改为OutBounce：
    a. 在文本编辑器中单击NumberAnimation以显示在这里插入图片描述
    图标，然后单击该图标以打开工具栏：
    在这里插入图片描述
    b. 在Easing字段中，选择Bounce。
    c. 在Subtype字段中，选择Out。

  3. 添加以下代码以指定当移动到State2时，Qt标志的x和y坐标在2秒钟内变化，并且使用InOutQuad缓动函数：

      ...Transition {from: "*"; to: "State2"NumberAnimation {properties: "x,y";easing.type: Easing.InOutQuad;duration: 2000}},

  4. 添加以下代码以指定对于任何其他状态变化，Qt标志的x和y坐标在线性时间内变化200毫秒：

      ...Transition {NumberAnimation {properties: "x,y";duration: 200}}]

按Ctrl+R运行应用程序。
单击矩形以查看动画过渡效果。

素材文件

Files:

  • transitions/Page1Form.ui.qml
  • transitions/Page2Form.ui.qml
  • transitions/main.qml
  • transitions/qml.qrc
  • transitions/transitions.pro

Images:

  • transitions/qt-logo.png

参考文章

QT快速入门：创建您的第一个QML应用

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

实现C++多线程的完全指南

实现C++多线程的完全指南

目录 引言：1. 理解多线程编程的基本概念2. 引入C标准库中的线程库3. 创建线程4. 线程同步和互斥5. 线程间的通信使用多线程需要关注的要点结论： 引言： 在现代软件开发中，多线程编程已经成为一项非常重要的技能。通过利用多线程&a…
阅读更多...
每日一题——圆圈中最后剩下的数字（约瑟夫环问题）

每日一题——圆圈中最后剩下的数字（约瑟夫环问题）

圆圈中最后剩下的数字（约瑟夫环问题） 题目链接 约瑟夫环 这是一道典型的约瑟夫环问题，而约瑟夫问题的一般形式是这样的： 约瑟夫问题是个有名的问题：N个人围成一圈，从第一个开始报数，第M个将被…
阅读更多...
P12-Retentive NetWork-RetNet挑战Transformer

P12-Retentive NetWork-RetNet挑战Transformer

论文地址:https://arxiv.org/abs/2307.08621 目录 Abstract 一.Introduction 二.Retentive Networks 2.1Retention 2.2Gated Multi-Scale Retention 2.3Overall Architecture of Retention Networks 2.4Relation to and Differences from Previous Methods 三.Experime…
阅读更多...
【ARM Cache 系列文章 8 -- ARM DynamIQ 技术介绍

【ARM Cache 系列文章 8 -- ARM DynamIQ 技术介绍

文章目录 DynamIQ 技术背景DynamIQ技术详解DynamIQ 与 big.LITTLEDynamIQ cluster 分类硬件支持 DynamIQ为什么适合人工智能？ DynamIQ 技术背景 2017年3月21日下午，ARM在北京金隅喜来登酒店召开发布会，正式发布了全新的有针对人工智能及机器…
阅读更多...
在线Word怎么转换成PDF？Word无法转换成PDF文档原因分析

在线Word怎么转换成PDF？Word无法转换成PDF文档原因分析

不同的文件格式使用方法是不一样的，而且也需要使用不同的工具才可以打开编辑内容，针对不同的场合用户们难免会用到各种各样的文件格式，要想在不修改内容的前提下提高工作效率，那就需要用到文件格式转换，那么在线Word怎…
阅读更多...
Effective Java笔记（31）利用有限制通配符来提升 API 的灵活性

Effective Java笔记（31）利用有限制通配符来提升 API 的灵活性

参数化类型是不变的&#xff08; invariant &#xff09; 。 换句话说&#xff0c;对于任何两个截然不同的类型 Typel 和 Type2 而言&#xff0c; List<Type1 &#xff1e;既不是 List<Type 2 &#xff1e; 的子类型&#xff0c;也不是它的超类型 。虽然 L ist<String…
阅读更多...
Rust 编程小技巧摘选(8)

Rust 编程小技巧摘选(8)

目录 Rust 编程小技巧(8) 1. 取整函数 floor() 2. 取整函数ceil() 3. 取整函数 round() 4. 保留小数位数 5. 字符串转整数 unwrap() unwrap_or() Rust 编程小技巧(8) 1. 取整函数 floor() floor函数对浮点数进行向下取整 示例代码&#xff1a; fn main() {let x: …
阅读更多...
【爬虫】爬取旅行评论和评分

【爬虫】爬取旅行评论和评分

以马蜂窝“普达措国家公园”为例&#xff0c;其评论高达3000多条&#xff0c;但这3000多条并非是完全向用户展示的&#xff0c;向用户展示的只有5页&#xff0c;数了一下每页15条评论&#xff0c;也就是75条评论&#xff0c;有点太少了吧&#xff01; 因此想了个办法尽可能多爬…
阅读更多...
3.解构赋值

3.解构赋值

解构赋值是一种快速为变量赋值的简洁语法&#xff0c;本质上仍然是为变量赋值。 3.1数组解构 数组解构是 将数组的单元值快速批量赋值给一系列变量 的简洁语法 1.基本语法: &#xff08;1&#xff09;赋值运算符左侧的[ ]用于批量声明变量&#xff0c;右侧数组的单元值将被赋…
阅读更多...
面试热题（最大子数组和）

面试热题（最大子数组和）

给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 输入&#xff1a;nums [-2,1,-3,4,-1,2,1,-5,4] 输出&#xff1a;6 解释&#xff1a;连续…
阅读更多...
SolidUI 一句话生成任何图形，v0.2.0功能介绍

SolidUI 一句话生成任何图形，v0.2.0功能介绍

文章目录 背景聊天窗口提示词 聊天窗口生成输入数据格式柱形图曲面图散点图螺旋线饼图兔子建模地图 设计页面页面布局预览 SolidUI社区的未来规划如何成为贡献者加群 背景 随着文本生成图像的语言模型兴起&#xff0c;SolidUI想帮人们快速构建可视化工具&#xff0c;可视化内容…
阅读更多...
【数据结构】哈希表

【数据结构】哈希表

总结自代码随想录 哈希表的原理&#xff1a; 对象通过HashCode()函数会返回一个int值&#xff1b;将int值与HashTable的长度取余&#xff0c;该余数就是该对象在哈希表中的下标。
阅读更多...
GCviewer分析java垃圾回收的情况

GCviewer分析java垃圾回收的情况

一&#xff0c;下载并打包 1.在github上下载gcviewer,并解压。 2. 运行maven命令打包。mvn clean package -DskipTests 二&#xff0c;启动GCViewer 进入target目录&#xff0c;运行 java -jar gcviewer-1.37-SNAPSHOT.jar 运行后&#xff0c;会出来界面 三&#xff0c;加参…
阅读更多...
docker菜谱大全

docker菜谱大全

记录docker常用软件安装&#xff0c;感谢小马哥和杨师傅的投稿。&#x1f60e;&#x1f60e;&#x1f60e; 相关文档&#xff1a; DockerHub&#xff1a;https://hub.docker.com/Linux手册&#xff1a;https://linuxcool.com/Docker文档&#xff1a;https://docs.docker.com/Do…
阅读更多...
【设计模式】原型模式

【设计模式】原型模式

原型模式&#xff08;Prototype Pattern&#xff09;是用于创建重复的对象&#xff0c;同时又能保证性能。这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式之一。 这种模式是实现了一个原型接口&#xff0c;该接口用于创建当前对象的克隆。当直接…
阅读更多...
MySQL 45讲笔记（1-10讲）

MySQL 45讲笔记（1-10讲）

1. SQL语句如何开始执行&#xff1f; MySQL分为Server和存储引擎两部分&#xff1a; Server层包含连接器、存储缓存、分析器、执行器等&#xff0c;以及所有的内置函数&#xff08;事件、日期&#xff09;等等&#xff0c;还有视图、触发器。 存储引擎是负责数据的存储和提取&a…
阅读更多...
Java多款线程池，总有一款适合你。

Java多款线程池，总有一款适合你。

线程池的选择 一&#xff1a;故事背景二&#xff1a;线程池原理2.1 ThreadPoolExecutor的构造方法的七个参数2.1.1 必须参数2.1.2 可选参数 2.2 ThreadPoolExecutor的策略2.3 线程池主要任务处理流程2.4 ThreadPoolExecutor 如何做到线程复用 三&#xff1a;四种常见线程池3.1 …
阅读更多...
POI处理excel，根据XLOOKUP发现部分公式格式不支持问题

POI处理excel，根据XLOOKUP发现部分公式格式不支持问题

poi4不支持XLOOKUP函数&#xff0c;但poi最新的5.2.3却已经对此函数做了支持 poi下载地址&#xff1a;Index of /dist/poi/release/bin 公式源码位置&#xff1a;org/apache/poi/ss/formula/atp/XLookupFunction.java 但是在使用此函数过程中&#xff0c;发现有些XLOOKUP函数会…
阅读更多...
网络设备（防火墙、路由器、交换机）日志分析监控

网络设备（防火墙、路由器、交换机）日志分析监控

外围网络设备&#xff08;如防火墙、路由器、交换机等&#xff09;是关键组件&#xff0c;因为它们控制进出公司网络的流量。因此&#xff0c;监视这些设备的活动有助于 IT 管理员解决操作问题&#xff0c;并保护网络免受攻击者的攻击。通过收集和分析这些设备的日志来监控这些…
阅读更多...
Oracle database Linux自建环境备份至远端服务器自定义保留天数

Oracle database Linux自建环境备份至远端服务器自定义保留天数

环境准备 linux下安装oracle 请看 oracle12c单节点部署 系统版本: CentOS 7 软件版本&#xff1a; Oracle12c 备份策略与实现方法 此次备份依赖Oracle自带命令exp与linux下crontab命令&#xff08;定时任务&#xff09; exp Oracle中exp命令是一个用于导出数据库数据和对象的…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023