如果提高网站,邯郸网站设计哪家专业,seo一个月工资一般多少,杭州的设计网站大全#x1f525; 目录 [TOC]( #x1f525; 目录) 1. 前言 2. 显示类控件2.1 Label 1、显示不同文本2、显示图片3、文本对齐、自动换行、缩进、边距4、设置伙伴 3.2 LCD Number 3.3 ProgressBar 3.4 Calendar Widget 3. 共勉 #x1f525; 1. 前言
之前我在上一篇文章【QT】… 目录 [TOC]( 目录) 1. 前言 2. 显示类控件2.1 Label 1、显示不同文本2、显示图片3、文本对齐、自动换行、缩进、边距4、设置伙伴 3.2 LCD Number 3.3 ProgressBar 3.4 Calendar Widget 3. 共勉 1. 前言
之前我在上一篇文章【QT】-- 按钮类已经说了QT 控件按钮类方面的知识以及涉及到的各种属性/函数/使用方法现在就来开始了解显示类的相关知识啦 2. 显示类控件
2.1 Label
QLabel 可以用来显示文本和图片核心属性如下
属性说明textQLabel 中的文本。用于显示在标签上的文字内容。textFormat文本的格式 - Qt::PlainText纯文本 - Qt::RichText富文本支持 HTML 标签 - Qt::MarkdownTextMarkdown 格式 - Qt::AutoText根据文本内容自动决定文本格式。pixmapQLabel 内部包含的图片。用于显示静态图像。scaledContents设置为 true 表示内容自动拉伸填充 QLabel设为 false 则不会自动拉伸。alignment对齐方式。可以设置水平和垂直方向如何对齐例如居中、左对齐等。wordWrap设置为 true 内部的文本会自动换行设为 false 则内部文本不会自动换行。indent设置文本缩进。影响水平和垂直方向的缩进。具体生效的方向取决于 alignment 属性。margin内部文本和边框之间的边距。不同于 indentmargin 在上下左右四个方向都同时有效。openExternalLinks是否允许打开一个外部链接。当 QLabel 文本内容包含 URL 时点击链接将尝试打开浏览器访问该 URL。buddy给 QLabel 关联一个“伙伴”点击 QLabel 时能激活对应的伙伴控件。例如如果伙伴是一个 QCheckBox那么该 QCheckBox 将被选中。
1、显示不同文本
1在界面上创建四个 QLabel尺存放大一些objectName 分别为 label、label_2、label_3、label_4 2修改 widget.cpp设置四个 label 的属性 ⭕ 2、显示图片
虽然 QPushButton 也可以通过设置图标的方式设置图片但是并非是一个好的选择更多的时候还是希望通过 QLabel 来作为一个更单纯的显示图片的方式。
1在界面上创建一个 QLabelobjectName 为 label 2创建 resource.qrc 文件并把图片导入到 qrc 中修改 widget.cpp给 QLabel 设置图片给窗口800 * 600设置合适尺寸修改代码设置 scaledContents 属性如下 一旦程序运行起来QLabel 的尺寸就固定了如果拖动窗口大小可以看到图片并不会随着窗口大小的改变而同步变化。
为了解决这个问题可以在 Widget 中重写 resizeEvent 函数 执行程序此时改变窗口大小图片也会随之变化
注意要记得把函数 在.h 文件中声明一下 注意这里的 resizeEvent 函数我们没有手动调用但是能在窗口大小变化时被自动调用这个过程就是依赖 C 中的多态来实现的。
Qt 框架内部管理着 QWidget 对象表示我们的窗口在窗口大小发生改变时Qt 就会自动调用 resizeEvent 函数但是由于实际上这个表示窗口的并非是 QWidget而是 QWidget 的子类也就是我们自己写的 Widget此时虽然是通过父类调用函数但是实际上执行的是子类的函数也就是我们重写后的 resizeEvent获取到窗口的 event进行 resize 处理
此处属于是多态机制的⼀种经典用法。通过上述过程就可以把自定义的代码插入到框架内部执行相当于 “注册回调函数”
3、文本对齐、自动换行、缩进、边距
1创建四个 labelobjectName 分别是 label 到 label_4并且在 QFrame 中设置 frameShape 为 Box设置边框之后看起来会更清晰一些 QFrame 是 QLabel 的父类其中 frameShape 属性用来设置边框性质 QFrame::Box矩形边框QFrame::Panel带有可点击区域的面板边框QFrame::WinPanelWindows 风格的边框QFrame::HLine水平线边框QFrame::VLine垂直线边框QFrame::StyledPanel带有可点击区域的面板边框但样式取决于窗口主题。 2编写 widget.cpp给这四个 label 设置属性运行程序 此处设置的文本缩进后续的行也会产生缩进不仅仅是首行缩进
4、设置伙伴
1创建两个 label 和 两个 radioButtonobjectName 分别为 label、label_2、radioButton_A、radioButton_B 此处把 label 中的文本设置为 “快捷键 A” 这样的形式。 其中 后面跟着的字符就是快捷键可以通过 alt A 的方式来触发该快捷键。 但是注意这里的快捷键和 QPushButton 的不同 需要搭配 alt 和 单个字母的方式才能触发。 绑定了伙伴关系之后通过快捷键就可以选中对应的单选按钮 / 复选按钮。
2编写 widget.cpp设置 buddy 属性【当然这里也可以使用 Qt Designer 直接设置】 可以看到按下快捷键 alt a 或者 alt b即可选中对应的选项
3.2 LCD Number
QLCDNumer 是一个专门用来显示数字的控件类似于 “老式计算器” 的效果。 属性说明intValueQLCDNumber 显示的数字值整数。与 value 联动显示整数值。valueQLCDNumber 显示的数字值浮点数。与 intValue 联动设置此属性时会自动四舍五入到最近的整数。例如给 value 设为 1.5intValue 的值就是 2。设置 value 和 intValue 的方法名为 display而不是 setValue 或 setIntValue。digitCount显示几位数字。设置可以显示的最大位数。mode数字显示形式- QLCDNumber::Dec十进制模式显示常规的十进制数字。- QLCDNumber::Hex十六进制模式以十六进制格式显示数字。- QLCDNumber::Bin二进制模式以二进制格式显示数字。- QLCDNumber::Oct八进制模式以八进制格式显示数字。只有在十进制模式下才能显示小数点后的内容。segmentStyle设置显示风格- QLCDNumber::Flat平面的显示风格数字呈现在一个平坦的表面上。- QLCDNumber::Outline轮廓显示风格数字具有清晰的轮廓和阴影效果。- QLCDNumber::Filled填充显示风格数字被填充颜色并与背景区分开。smallDecimalPoint设置较小的小数点。当启用时小数点将使用更小的段来表示节省空间并提高显示密度。
【实现倒计时功能】
1在界面上创建⼀个 QLCDNumber初始值设为 10objectName 为 lcdNumber 2修改 widget.h 代码创建一个 QTimer 成员 和一个 handle 函数 3修改 widget.cpp在构造函数中初始化 QTimer QTimer 表示定时器通过 start 方法启动定时器之后就会每隔一定周期触发一次 QTimer::timeout 信号 使用 connect 把 QTimer::timeout 信号和 Widget::updateTime 连接起来意味着每次触发 QTimer::timeout 都会执行 Widget::updateTime
handle 实现
通过 intValue 获取到 QLCDNumber 内部的数值。如果 value 的值归 0 了就停止 QTimer接下来 QTimer 也就不会触发 timeout 信号了。 可以看到每隔一秒钟显示的数字就减少 1通过 timer ms lcd -1 实现 欸针对上面代码我们来两个操作
操作一如果直接在上述 Widget 构造函数中通过一个循环 sleep 的方式是否可以呢 显然上面这段代码是不行的循环会使 *Widget 的构造函数无法执行完毕*此时界面是不能正确构造和显示的。
操作二如果直接在上述 Widget 构造函数中另起一个线程在新线程中完成循环 sleep 是否可以呢 上面在 thread 的构造函数中传递了 一个 lambda 表达式然后在在 lambda 表达式内部定义了一个无限循环while (true)用于持续更新 QLCDNumber 的显示值。 这个代码同样也是不行的 “理想很美好现实很骨感” Qt 中规定任何对于 GUI 上内容的操作必须在主线程中完成像 Widget 构造函数以及 connect 连接的 slot 函数都是在主线程中调用的。而我们自己创建的线程则不是当我们自己的线程中尝试对界面元素进行修改时Qt 程序往往会直接崩溃。 这样的约定主要是因为 GUI 中的状态往往是牵一发动全身的修改一个地方就需要同步的对其他内容进行调整。 比如调整了某个元素的尺存就可能影响到内部的文字位置或者其他元素的位置。这里一连串的修改都是需要按照一定的顺序来完成的。 由于多线程执行的顺序无法保障因此 Qt 从根本上禁止了其他线程修改 GUI 状态避免后续的一系列问题。 对于 Qt 的槽函数来说默认情况下槽函数都是由主线程调用到在槽函数中修改界面是没有任何问题的。
综上所述使用定时器是实现上述功能的最合理方案。后续如果也有类似的需要 “周期性修改界面状态” 的需求也需要优先考虑使用定时器。
3.3 ProgressBar
使用 QProgress Bar 表示一个进度条
注意不要把 ProgessBar 拼写成 ProcessBar 属性说明minimum进度条最小值。定义进度条的起始值默认为 0。maximum进度条最大值。定义进度条的结束值默认为 100。value进度条当前值。表示进度条中已完成的部分介于 minimum 和 maximum 之间。alignment文本在进度条中的对齐方式- Qt::AlignLeft左对齐 - Qt::AlignRight右对齐 - Qt::AlignCenter居中对齐 - Qt::AlignJustify两端对齐extVisible进度条的数字是否可见。设置为 true 时显示进度数值false 则隐藏。orientation进度条的方向是水平还是垂直。- Qt::Horizontal水平方向 - Qt::Vertical垂直方向invertAppearance是否朝反方向增长进度。如果设为 true则进度从最大值向最小值递减。textDirection文本的朝向。影响文本在进度条中的排列方向。format展示的数字格式 - %p表示进度的百分比0-100 - %v表示进度的数值0-100 - %m表示剩余时间以毫秒为单位 - %t表示总时间以毫秒为单位
【实现进度条按时间增长功能】
1在界面上创建进度条objectName 为 progressBar其中最小值设为 0最大值设为 100当前值设为 0 2修改 widget.h创建 QTimer 和 handle 函数 这里有个小小的问题虽然在 widget.h 中用到了 QTimer但是却没在 widget.h 文件中包含 头文件为什么这个代码编译没有出错呢 上述问题其实是通过 Qt 内部提供的一个特殊技巧来实现的。 在 Qt 中有一个专门的头文件#include 这个头文件中包含了 Qt 中所有类的 “前置声明”class QWidgetclass QPushButtonclass QTimer。 这个头文件我们一般不会直接接触到但是包含其它的 Qt 的头文件都会间接的包含到这个头文件。 如果 Widget 类的前面以及提供了 QTimer 类的声明的话此时就可以在 Widget 中声明 QTimer 的指针 / 引用类型的成员。 后续如果要真正使用 QTimer 的头文件包括创建实例使用里面的成员仍然要包含 QTimer 的头文件包含了 QTimer 的详细的类的定义。 那么Qt 为什么要使用上述技巧呢上述技巧能解决什么问题有什么提升呢 主要解决的是编译速度的问题。
C/C 代码编译速度在其他语言横向对比中是非常慢的。C 编译速度慢和 #include 头文件有直接关系由于 include 关系错综复杂所以尽可能减少 include 头文件的个数就可以有效地减少编译时间。Qt 中就使用 class 前置声明的方式来尽量减少头文件的包含。通过前置声明的方式Qt 中每个头文件包含的其它头文件数量都能得到一定的降低。 3修改 widget.cpp初始化 QTimer此处设置 100 ms 触发一次 timeout 信号也就是 ⼀秒钟触发 10 次并且实现 handle 在实际开发中进度条的取值往往是根据当前任务的实际进度来进行设置的 比如需要读取一个很大的文件就可以获取文件的总的大小和当前读取完毕的大小来设置进度条的比例。 由于前面我们介绍了 Qt 禁止在其他线程修改界面因此进度条的更新往往也是需要搭配定时器来完成的。 通过 定时器周期触发信号主线程调用对应的 slot 函数再在 slot 函数中对当前的任务进度进行计算并更新进度条的界面效果。 【实现其他颜色进度条】
上述的进度条是用绿色表示的但是考虑到有些人可能不喜欢绿⾊因此我们改成一个红色的进度条。
QProgressBar 同样也是 QWidget 的子类因此我们可以使用 styleSheet 通过样式来修改进度条的颜色。
1代码不变然后去在 Qt Designer 右侧的属性编辑器中找到 QWidget 的 styleSheet 属性之前有讲过编辑内容其中的 chunk 是选中进度条中的每个 “块”使用 QProgressBar::text 则可以选中文本。 但是我们发现当我们设置完之后进度条中的数字会跑到左上角因此我们还需要把 QProcessBar 的 alignment属性设置为垂直水平居中 此时就可以得到同上面效果一样但是颜色不同的进度条了同样的通过上述方式也可以修改文字的颜色字体大小等样式。 3.4 Calendar Widget
QCalendarWidget 表示⼀个 “日历”形如 核心属性说明selectDate当前选中的日期。minimumDate最小日期定义用户可以选择的最早日期。maximumDate最大日期定义用户可以选择的最晚日期。firstDayOfWeek每周的第一天也就是日历的第一列是周几。gridVisible是否显示表格的边框默认为 true 显示边框。selectionMode是否允许选择日期。可以设置为单选或不选。navigationBarVisible日历上方标题是否显示默认为 true 显示导航栏。horizontalHeaderFormat日历上方标题显示的日期格式控制顶部标题栏的内容。verticalHeaderFormat日历第一列显示的内容格式控制左侧垂直标题栏的内容。dateEditEnabled是否允许日期被编辑默认为 false 不可编辑。
重要信号说明selectionChanged(const QDate)当选中的日期发生改变时发出。参数是一个 QDate 类型保存了新的选中日期。activated(const QDate)当双击一个有效的日期或者按下回车键时发出。参数是一个 QDate 类型保存了选中的日期。currentPageChanged(int, int)当年份月份改变时发出。参数表示改变后的新年份和月份分别为 int 类型。
【获取选中的日期】
1在界面上创建一个 QCalendarWidget 和一个 labelobjectName 分别为 calendarWidgetlabel 2给 QCalendarWidget 添加 slot 函数 selectionChanged 上面当选择不同的日期时label 中的内容也会随之改变 3. 共勉 【★,°:.☆(▽)/$:.°★ 】那么本篇到此就结束啦如果有不懂 和 发现问题的小伙伴可以在评论区说出来哦同时我还会继续更新关于【QT】的内容请持续关注我
