《Qt5 C++ GUI Programming cook book 》笔记 1

2023-05-16

一,前言

第一章,使用QT Designer 和QT Quick Designer自定义设计用户界面

第二章,通过增强的状态机框架和动画框架,制作用户界面动画。

第三章,使用QT内建的类绘制矢量和位图。

第四章,整合OpenGl到QT项目,演示如何渲染3d图形。

第五章,创建一个触屏软件,展示QT再触屏设备上的使用。

第六章,分析XML格式的数据,并且结合谷歌API创造一个简单的地址寻找器。

第七章,使用QT内建的类和第三方程序,转换不同类型的变量图片格式和视频格式。

第八章,接入数据库,使用QT连接一个SQL数据库。

第九章,使用QT WEB ENGINE开发一套网络应用。

在 htttp://www.packtpub.com注册并下载本书的案例。

第一章:观察和感受自定义

主题:

      使用QT Designer的样式表

       基本样式表的定义

      使用样式表创建登录界面

      在样式表中调用资源

      自定义属性和子层级控制

      QML中的风格化

      C++引用QML的物体对象

在QT中,我们可以使用一个非常熟悉的方法设计程序用户界面。QT不仅给我们提供了不需要写代码就能设计用户界面的工具-QT Designer,而且还给高级用户提供了一个自定义QT样式表的脚本语言。

在这个例子中,通过使用样式表资源改善我们的项目并且使项目看起来更加的专业。QT提供了一个叫做QT 样式表的语言来装饰用户界面,特别像装饰网页用的css。

1,打开QT Creat 创建一个新项目。第一次使用QT Create 可以点击New Project边上的+号,或者file-new file/new project

2,选择project 窗口下的Application ,然后选择QT WIdgets Application.

3,点解选择按钮,然后会弹出一个填写名字和位置的窗口。

4,填写完成后,点击下一步,并点击完成按钮创建项目。现在都保持默认吧,我们会在未来的某一刻去讨论这个事。弹开的界面中,你会看到左侧成吨的大图标,这个区域叫做选择器模式窗口。

5,在靠近选择器模式组边上罗列着我们的资源。这是我们选择文件并进行编辑的地方,选中mainwindow.ui。

6,双击mainwindow.ui  ,将出现一个完全不同的画面。当QT侦测到你试图打开.UI扩展文件时候,QT自动打开了面向UI的脚本编辑器。

7,模式选择器会从高亮的EDIT转换到Design按钮。你也可以点击上面的按钮切回。

8,让我们回到QT DESIGNER并且看一下mainwindow.ui文件。这是一个默认的最基本的项目主窗口。点击模式选择器底部的绿色RUN按钮,进行编译,当编译完成的时候,你可以看到一个弹出的空窗口。

9,现在,在widgetbox的button分类里面,点击并拖动 pushbutton 项目到程序mainwindow 的UI中。当选中按钮的时候,可以在窗口的右侧属性面板看到pushbutton的属性列表。向下滑动到中间位置,找到一个叫做style sheet的属性。这就是widget应用风格的地方,是不是会继承取决于如何应用样式表。或者,你可以在form编辑器中右键点击ui中的任何部件,在弹出的菜单栏中选择改变样式表选项。

10.可以直接写入脚本,也可以点击旁边的输入框打开编辑样式表窗口,在窗口里可以写入更长的样式表代码。当不记得属性名字的时候,可以使用窗口顶部的比如 add resource,add gradient,add color,add font等按钮。

让我们使用编辑样式表窗口做一些简单的 样式吧!

11,点击add color并选择颜色。

12,在颜色拾取窗口选择一个随机颜色,比如说纯红色。然后点击ok.

13,这时候在样式编辑窗口会出现一条代码,我的是这样的:

color:rgb(255,0,0);

14,点击ok,你会发现按钮上的文字已经成为了红色。 

我们来快速认识一下窗口。

 1,菜单栏:菜单栏提供了一些基本功能,比如创建新项目,保存文件,撤销,重做,复制,粘贴等等。同样也接入了比如编译,调试工具,分析工具等等开发工具。

2,部件盒子:这里存放qt desiger提供的所有不同种类的部件。通过点击并拖动,可以将部件拖动到form editor.

3,模式选择器:这个侧面面板里存放的快捷键可以很容易的接入不同的工具。通过点击Edit 和Design按钮,可以很容易的在script editor和 form editor之间进行切换,在面向多个任务的时候这样很方便。你也可以通过这样的方式在调试器和分析器工具间进行切换。

4,编译快捷键:编译快捷键放置模式编辑器的底部。通过这里的快捷键,可以快速的建立,运行,调试项目。

5,形式编辑器:这是可以编辑程序UI的地方,通过在部件盒子里选中部件,并拖动部件的方式,添加到这个窗口。

6,形式工具栏:通过这个工具栏,可以快速的选择不同的形式进行编辑,前四个是形式的不同切换,后面的工具是对部件的布局起作用。

7,对象检查器:这里列举了UI文件中所有的部件。所有的部件以父子关系的方式存在。可以选择相应的部件查看他的属性。

8,属性编辑器:当选择部件后,这里显示部件的所有属性。

9,动作编辑器和信号槽编辑器:这里包含两个编辑器。动作编辑器和信号槽编辑器在窗口的下面接入。在你的程序ui中,可以在动作编辑器中想菜单栏或者工具栏添加动作。

10,输出面板:输出面板由不同的显示信息和相互出信息窗口组成,都是编译和调试的相关信息。

通过按下带有数字的按钮,比如1-ISSUES,2-Search Results,3-Application Output等等,来切换不同的输出面板。

 QTCreate提供了 script editor和QT designer.一个写代码,一个做界面设计。

Qt Style Sheets与CSS:

CSS: h1{color:red;background-color:white;}
Qt Style Sheets:QLineEdit{color:red;background-color:white;}

都包含选择器和修饰符,每个修饰符包含一个属性和值,冒号分开。

在Qt中,可以通过C++的QObject::setStyleSheet()函数将样式表应用到一个单独的部件上。比如:myPushButton->setStyleSheet("color:blue");  这句代码可以将一个myPushButton变量名的按钮的文字变成蓝色显示。

Qt 样式表支持所有的CSS2选择器,比如统一选择器,类型选择器,类选择器,Id选择器等等。我们可以将样式应用到具体的单独一组部件上。比如:如果我们想要修改一个对象名为 usernameEdit的对象,我们可以使用ID选择器 QLineEdit#usernameEdit{ background-color:blue }

可以参看:http://www.w3.org/TR/REC-CSS2/selector.html

从上面的例子学会了应用样式表到部件。这次让我们更大胆一些,应用到所有的部件。

1,首先,我们移除所有效果,点击样式表旁边的箭头,清空样式表。

2,添加更多的部件:line edit ,combo box, horizontal slider,radio button,check box.

3,为了简化操作,删除menu bar,main toolbar,status bar.在物体列表框,右键单击选择remove.

打开mainwindow主窗口的样式表,输入代码

border: 2px solid gray;
border-radius:10px;
padding:0 8px;
background:yellow;

所有的子层级都受到了影响

 

我们可以修改部分来显示

QPushButton{
border: 2px solid gray;
border-radius:10px;
padding:0 8px;
background:yellow;
}

7

 

 7,我们将效果特指了QPushButton类,所以只有按钮类变成了这样。如果我们再进一步改变,找到其中的一个按钮名字

QPushButton#pushButton{
border: 2px solid gray;
border-radius:10px;
padding:0 8px;
background:yellow;
}

再进一步

 

QPushButton{
border:2px solid red;
}
QPushButton#pushButton{
border: 2px solid gray;
border-radius:10px;
padding:0 8px;
background:yellow;
}
QPushButton#pushButton_2{
border: 2px solid red;
color:red;
border-radius:10px;
padding:0 8px;
background:yellow;
}
QPushButton#pushButton_3{
border-radius:10px;
padding:0 8px;
background:blue;
color:white;
}

 再进一步

*{
   background:qradialgradient(cs:0.3,cy:-0.4,fx:0.3,fy:-o.4,radius:1.35,
                 stop:0 #fff,stop:1 #888);
   color:rgb(255,255,255);
   border:1px solid #ffffff;
}

越具体,影响力越大。

当修改对象名字的时候,记得同样需要修改样式表的名字。 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

《Qt5 C++ GUI Programming cook book 》笔记 1 的相关文章

  • Qt5 C++ 自动鼠标点击

    我正在尝试制作一个应用程序 其中鼠标移动到屏幕上的某些位置并自动单击左键 问题是我无法在 Qt 应用程序外部单击 因此我做了一个解决方法 使应用程序对鼠标单击透明并使用以下代码使其全屏显示 int x 800 int y 500 this
  • 如何识别应用程序在 Linux 上以深色主题运行?

    我开发了一个使用 qscintilla 作为文本编辑器的应用程序 我还实现了自定义词法分析器来突出显示特定于语言的关键字 到目前为止 突出显示关键字的样式已硬编码在我的应用程序中 并且在 Windows Linux Ubuntu Mac 上
  • 在 Windows 上使用 FreeType 和 Qt5

    有谁知道是否可以使用 FreeType 构建 Qt5 作为 Windows 上的文本渲染器而不是本机渲染器 我尝试使用 qt freetype 编译 Qt5 但仍然得到错误的文本 我还需要做其他事情吗 在查看 DeadWarlock 提出的
  • 使用 PostgreSQL 编译静态 Qt 5.10.0 时出错

    我正在尝试在 Windows 7 上使用 mingw 编译 Qt 5 10 0 和 PostgreSQL 10 或 9 2 但同样的错误 但是 当我包含 psql include 和 lib 目录时 在 mingw32 make 之后我总是
  • Qt:无法从输入设备读取:没有这样的设备

    我有一个在嵌入式 Linux 平台 i Mx 6 上运行的 Qt 应用程序 我的应用程序应支持触摸屏作为主要输入设备和可选的 USB 键盘 如果已连接 所以现在 我已配置要启动的应用程序 如下所示 my qt app plugin tsli
  • Qt如何连接rubberBandChanged信号

    我尝试将 QChartView 类中的 ruby BandChanged 信号链接到 MainWindow 类中的特定函数 主窗口 h class MainWindow public QMainWindow Q OBJECT public
  • qt webengine将javascript输出重定向到GUI

    我有一个可以查看页面的应用程序QWebEngineView小部件如何将我的 javascript 控制台日志重定向到我的 GUI 它当前显示在我的调试输出中 您必须子类化 QWebEnginePage 才能覆盖 javaScriptCons
  • 带文本的 QToolButton:覆盖最小高度以模仿常规按钮高度

    我正在显示Q工具按钮 http doc qt io qt 5 qtoolbutton html带有图标加文本的 s Qt 图标旁边的工具按钮文本 http doc qt io qt 5 qt html ToolButtonStyle enu
  • 在qml中的qtcharts上拖动一个点

    我正在尝试在 qtcharts 上拖动 LineSeries 上的一个点 这是我的代码 import QtQuick 2 0 import QtCharts 2 0 Item anchors fill parent ChartView ti
  • DropArea 不会通知有关 onEntered、onExited、onDropped 的操作

    I have Rectangle洋溢着MouseArea其中上onPressAndHold 处理程序透露第二个Rectangle和转账drag对此采取行动Rectangle 问题是当我移动那一秒时Rectangle over DropAre
  • 本机 KDE 查找 Qt 5 应用程序

    我在 Kubuntu 12 10 Linux 机器上安装了 Qt5 和 Qt4 并注意到以下内容 使用 Qt4 编译的程序具有原生 KDE 外观和感觉 我使用默认的 KDEOxygen主题 我的程序也是如此 注意带有标题的平滑渐变和聚焦小部
  • Qt 颜色选择器小部件?

    我有一个QDialog向用户提供一些选项供其选择的子类 这些选项之一是颜色 我见过QColorDialog https stackoverflow com a 1972272 2062384 我需要一些更简单的东西 这也是一个常规小部件 这
  • QVBoxLayout:如何使用 Qt 设计器将小部件对齐到顶部

    我仅将 qt 设计器用于 ui 布局 这与这个问题几乎是同一个问题 QVBoxLayout 如何将小部件垂直对齐到顶部而不是中心 https stackoverflow com questions 10082299 qvboxlayout
  • 无法在 Qt5 应用程序中加载 qca-ossl

    我决定将我的应用程序从 Qt4 迁移到 Qt5 在 Qt4 中 我将 QCA 与 QCA OSSL 一起使用 没有任何问题 但现在 OSSL 插件不想加载 我已经在 Qt5 下从 git anongit kde org qca git 编译
  • 悬停时突出显示自定义 QWidgetAction

    我的应用程序有一个QMenuBar与一些QMenus 其中每个都有多个QActions 和子QMenus 大部分的QAction 项目是衍生品QWidgetAction并重新实施QWidgetAction createWidget方法 通常
  • 如何在QML中设置弹出菜单位置

    我想修复 QML 中弹出菜单的位置 当我单击设置按钮时 我希望弹出菜单将显示在固定位置 我用了一天的时间就做到了 但是做不到 我怎样才能在 QML 中做到这一点 另外 我想更改菜单项的大小 宽度和高度 希望您的帮助 这取决于QtQuick
  • Qt 5.4/Qml:防止绑定循环

    我有一个全局单例 设置 它保存应用程序设置 当我尝试运行以下代码时 我得到一个QML CheckBox Binding loop detected for property checked CheckBox checked Settings
  • Qt 5.0.1:应用程序不会在 Qt 创建者之外执行

    我正在尝试运行程序 TransitTalker exe 这是我从 qt 编译的代码 如下图所示 https www dropbox com s ypgklrm4uschri5 filecontents png https www dropb
  • 如何使用meta-toolchain-qt5构建Qt(带有QtWebEngine支持)?

    我正在尝试使用构建 Qtmeta toolchain qt5 但是当我通过这样做时poky glibc x86 64 meta toolchain qt5 cortexa7hf vfp vfpv4 neon toolchain 2 0 1
  • Qt 5.3 无法使 QCompass (QSensor) 在 Windows 8.1 上工作

    我无法让传感器在我的 Asus Transformer T100 上工作 磁力计和指南针无法启动 并且我从加速度计获得假值 始终 x 0 y 9 8 z 0 即使使用我的笔记本电脑 我总是得到相同的结果 第一段文字编辑 Initialisa

随机推荐

  • 进程间通信(8) - 共享内存(posix)

    目录 1 前言 2 共享内存介绍 3 映射函数mmap 4 映射删除munmap 5 映射同步 6 内存映射区的大小 6 1映射文件的大小等于映射长度 6 2映射文件的大小小于映射长度 7 使用mmap进行IPC 7 1匿名内存映射实现亲缘
  • 51单片机定时器、计数器配置

    一 51单片机的定时 计数器的工作原理 在了解了单片机的时钟频率 时钟周期 机器周期之后 xff0c 显然我们可以知道定时器的工作原理 xff0c 在此之前我们先算出51单片机的脉冲周期 xff1a 以f 61 12MHz为例 xff0c
  • AndroidStudio Launching ‘app‘ Time out 错误

    问题一 AndroidStudio Launching app Time out 错误 环境 xff1a AndroidStudio xff1a Arctic Fox 2020 3 1 问题 点击debugger运行过后 xff0c 编译没
  • QT Creator项目打包发布

    按照如下方法 xff0c 可将项目成功打包发布 xff0c 别人不需要安装或配置QT Creator环境便可直接运行程序 xff0c 具体步骤如下 xff1a 1 在QT Creator使用release构建运行一下代码 xff0c 不要使
  • 超精简ubuntu的GPU配置(实测好用)

    一 安装英伟达 GPU 驱动 安装ubuntu后运行以下命令来升级内核版本 sudo apt get update sudo apt get upgrade 以下命令会将与你系统相兼容的驱动版本显示出来 sudo add apt repos
  • 在线升级R语言版本以及在RStudio容纳最新版本的R

    文章目录 1 升级R语言版本2 RStudio容纳最新版本的R3 参考资料 1 升级R语言版本 第一步 install packages 34 installr 34 安装 第二步 library installr 加载 第三步 updat
  • 傅里叶变换 ~ 什么是傅里叶变换?

    文章目录 1 什么是傅里叶变换 xff1f 2 为什么要进行傅里叶变换 xff1f 1 什么是傅里叶变换 xff1f 将时域的信号 xff0c 变换到频域的正弦信号 傅里叶变换是数字信号处理领域一种很重要的算法 要知道傅里叶变换算法的意义
  • 全国天气预报查询接口

    小编在此向大家介绍拥有105亿 43 调用量的产品 xff0c 该接口文档清晰 xff0c 对接方便 xff0c 还有服务很好 一 接口介绍 通过坐标区域 IP 地名 景点名称 电话区号或邮编等有效信息可查询天气情况 xff08 天气状况
  • 使用C++的CCF-CSP满分解决方案 202112-2 序列查询新解 含详细注释

    思路 最开始想挨个数计算fi和gi xff0c 这样只能拿70分 xff0c 想要拿全 xff0c 必须根据区间来划分 具体来说 xff0c 每次以r为单位移动 xff0c 每个区间长度为r xff0c 根据区间的左右值移动序列的下标 还是
  • UltraISO 帮你把U盘当光盘用

    UltraISO是款功能强大的光盘工具 xff0c 官方对其的概括是Handle CD and DVD Images with Ease xff0c 对我们就是要让处理CD和DVD镜像变得简单 现在这款软件的最新版本是UltraISO 9
  • Python基础语法一:Markdown的使用

    1 标题 在文字前加 xff08 个数可以使1 6个 xff0c 个数不同 xff0c 标题级别不同 xff09 用户管理 xff08 二级标题 xff09 三级标题 六级标题 2 代码块 xff08 代码引用 xff09 语法 xff1a
  • 《计算机科学》期刊投稿心得

    今日胃痛难忍 xff0c 无法静心 xff0c 遂分享一下投稿心得 这本期目前是北大核心 xff0c CCF B 上不上 xff0c 下不下的排名 xff0c 感叹一句 xff0c 中文核心太难中了 xff0c 越来越难中的感觉 2020年
  • IDEA MAVEN 项目 打包文件到指定目录

    像上一篇文章 xff0c 我们提到的 xff0c IDEA MAVEN struts项目中 xff0c 如果我们把 struts xml 文件放在 src 目录下 xff0c 编译的时候 xff0c 将无法打包到 WEB INF class
  • kali安装配置git

    kali安装配置git 安装图形界面 sudo apt install git cola 配置全局忽略 git config global core excludesfile root global gitignore vim root g
  • Freerdp2中sfreerdp在windows中运行

    了解 client Sample 下的freerdp c xff0c 有助于了解freerdp的结构 当然首先 xff0c 需要先在windows 中成功编译freerdp链接 然后可以看到Debug目录下会生成freerdp2 lib f
  • freerdp在windows中的编译(with openh264)

    我自己编译的node freerdp2模块在window 7中会莫名其妙的报一个错误 google上说跟windows的media foundation相关 xff0c 更莫名其妙的是 xff0c 重装系统后100 复现 但是看到最后一个报
  • 配置Linux网络,远程连接(NAT模式)

    配置Linux网络 xff0c 远程连接 xff08 NAT模式 xff09 1 打开vmware xff1a 编辑 gt 虚拟网络编辑器 xff0c 检查VMnet8中nat模式的子网IP NAT设置 xff0c 打开 NAT设置 xff
  • 根据Django Model动态生成sql的方法

    转自 xff1a http blog csdn net wenxuansoft article details 8039011 当定义好Django Model后 xff0c 一般可以在初始化调用Syncdb方法来自动在数据库里面生成相应的
  • jetty禁用http put和delete等方法的方式

    1 基于xml的配置方式 lt security constraint gt lt display name gt Example Security Constraint lt display name gt lt web resource
  • 《Qt5 C++ GUI Programming cook book 》笔记 1

    一 xff0c 前言 第一章 xff0c 使用QT Designer 和QT Quick Designer自定义设计用户界面 第二章 xff0c 通过增强的状态机框架和动画框架 xff0c 制作用户界面动画 第三章 xff0c 使用QT内建