当前位置:   article > 正文

QT-------UI基础到进阶,干货满满!!!_qt ui

qt ui

一、UI基础

1. QWidget类(掌握)

QWidget类是所有可视化组件和窗口的基类,因此QWidget中成员可以继承给众多派生类使用。

QWidget最基础的属性:

  • width : const int

宽度,单位像素

可以通过int width() const获得数值,即getter

  • height : const int

高度,单位像素

getter:int height() const

  • x : const int

横坐标,单位像素,原点左上角,正方向右

getter:int x() const

  • y : const int

纵坐标,单位像素,原点左上角,正方向下

getter:int y() const

QWidget最基础的函数:

  • void resize(int w, int h)

重定义宽高

  • void move(int x, int y)

移动到设定的坐标处,所有的组件和窗口以左上角为定位点

  • void setGeometry(int x, int y, int w, int h)

同事设置坐标和宽高

dialog.h

  1. #ifndef DIALOG_H
  2. #define DIALOG_H
  3. #include <QDialog>
  4. // 头文件
  5. #include <QDebug>
  6. class Dialog : public QDialog
  7. {
  8. Q_OBJECT
  9. public:
  10. Dialog(QWidget *parent = 0);
  11. ~Dialog();
  12. };
  13. #endif // DIALOG_H

dialog.cpp

  1. #include "dialog.h"
  2. Dialog::Dialog(QWidget *parent)
  3. : QDialog(parent)
  4. {
  5. // 重定义宽高
  6. resize(1000,240);
  7. // this指针指向主函数中的w对象
  8. int w = this->width();
  9. int h = height();
  10. // 输出
  11. qDebug() << w << h;
  12. // 获得位置
  13. int x = this->x();
  14. int y = this->y();
  15. qDebug() << x << y; // 0,0 不准,因为窗口对象还在创建中
  16. // 移动
  17. move(100,100);
  18. // 同时设置坐标和宽高
  19. setGeometry(400,400,200,200);
  20. }
  21. Dialog::~Dialog()
  22. {
  23. }

2. 添加子组件(掌握)

以最常见按钮(QPushButton)为例,讲解在窗口中添加子组件的方法。

QPushButton的构造函数如下:

  • QPushButton::QPushButton(const QString & text, QWidget * parent = 0)

参数1:按钮显示的文字

参数2:按钮在哪个对象上

dialog.h

  1. #ifndef DIALOG_H
  2. #define DIALOG_H
  3. #include <QDialog>
  4. // 头文件
  5. #include <QPushButton>
  6. class Dialog : public QDialog
  7. {
  8. Q_OBJECT
  9. public:
  10. Dialog(QWidget *parent = 0);
  11. ~Dialog();
  12. private:
  13. // 私有成员变量
  14. QPushButton* btn;
  15. };
  16. #endif // DIALOG_H

dialog.cpp

  1. #include "dialog.h"
  2. Dialog::Dialog(QWidget *parent)
  3. : QDialog(parent)
  4. {
  5. resize(400,400);
  6. // 创建一个按钮对象
  7. // 参数2是使用this指针结合多态传参
  8. btn = new QPushButton("初十",this);
  9. // 更改按钮大小
  10. btn->resize(100,100);
  11. // 移动按钮位置,注意坐标是窗口内部的相对坐标
  12. btn->move(100,100);
  13. }
  14. Dialog::~Dialog()
  15. {
  16. // 释放按钮内存
  17. delete btn;
  18. }

3. 样式表(熟悉)

Qt可以使用QSS语法设置组件的样式效果。

颜色的配置可以通过以下几个方法:

  • QQ截图
  • 在线色表+颜色进制转换

在线颜色选择器 | RGB颜色查询对照表

  • 色彩搭配

Color Palette Generator - Create Beautiful Color Schemes

dialog.h

  1. #ifndef DIALOG_H
  2. #define DIALOG_H
  3. #include <QDialog>
  4. // 头文件
  5. #include <QPushButton>
  6. #define QPushButton_STYTLE (QString("\
  7. /*按钮普通态*/\
  8. QPushButton\
  9. {\
  10. font-family:Microsoft Yahei;\
  11. /*字体大小为20点*/\
  12. font-size:20pt;\
  13. /*字体颜色为粉色*/\
  14. color:rgb(238, 210, 238);\
  15. /*背景颜色*/\
  16. background-color:rgb(197,146,163);\
  17. /*边框圆角半径为8像素*/\
  18. border-radius:8px;\
  19. }\
  20. /*按钮悬停态*/\
  21. QPushButton:hover\
  22. {\
  23. /*背景颜色*/\
  24. background-color:#9F79EE;\
  25. }\
  26. /*按钮按下态*/\
  27. QPushButton:pressed\
  28. {\
  29. /*背景颜色*/\
  30. background-color:rgb(14 , 135 , 10);\
  31. /*左内边距为3像素,让按下时字向右移动3像素*/\
  32. padding-left:3px;\
  33. /*上内边距为3像素,让按下时字向下移动3像素*/\
  34. padding-top:3px;\
  35. }"))
  36. class Dialog : public QDialog
  37. {
  38. Q_OBJECT
  39. public:
  40. Dialog(QWidget *parent = 0);
  41. ~Dialog();
  42. private:
  43. // 私有成员变量
  44. QPushButton* btn;
  45. };
  46. #endif // DIALOG_H

dialog.cpp

  1. #include "dialog.h"
  2. Dialog::Dialog(QWidget *parent)
  3. : QDialog(parent)
  4. {
  5. resize(400,400);
  6. btn = new QPushButton("初十",this);
  7. // 设置样式表
  8. btn->setStyleSheet(QPushButton_STYTLE);
  9. btn->resize(100,100);
  10. btn->move(100,100);
  11. }
  12. Dialog::~Dialog()
  13. {
  14. delete btn;
  15. }

 

二、UI进阶

1. Designer 设计师(掌握)

Designer是Qt内置的UI设计工具,可以独立启动,也可以在Qt Creator中使用,其文件格式为.ui。

使用Qt Creator创建项目时,勾选创建界面选项,新创建的项目中的Dialog类会自带一个界面文件,双击即可使用内置的Designer程序打开此文件。

Designer程序的各个区域如下所示。

2. 布局 Layout(掌握)

可以认为布局是一个透明的盒子,内部可以放置不同的组件对象,这些对象在布局中会按照预设的效果自动排布。

布局有四种:

  • 垂直布局
  • 水平布局
  • 格点布局
  • 表单布局

当布局贴合窗口时,可能会造成组件间距变小的情况,此时可以使用伸展器组件填充空白区域。

伸展器组件本身是不可见的。

选中布局,可以在右下角配置其属性值。

布局和布局之间可以嵌套,内层布局相当于外层布局的一个组件。虽然布局可以嵌套,但是应该在实际开发中尽量避免嵌套。

3. QWidget属性(掌握)

只要是QWidget的派生类对象在Designer中存在,选中此对象后,都可以在右下角的属性配置面板中找到黄色的属性。

4. UI指针(掌握)

ui指针是Qt通过Designer管理组件对象的一种方式,其原理如下所示。

5. 基础组件(熟悉)

5.1 标签 QLabel

用于显示图片或文字。

导入图片到Qt中作为资源的步骤如下:

1. 下载图片并命名为英文小写+下划线+数字的组合,数字不能开头。注意图片不要过大。

2. 把图片放置到工作目录下。

3. 在Qt Creator中选中项目名称,鼠标右键,点击“添加新文件”。

4. 在弹出的窗口中,按照下图所示进行操作。

5. 在弹出的窗口中,按照下图所示进行操作。

6. 在项目管理界面直接点击完成,可以看到项目中会创建一个资源文件,扩展名为qrc

7. 选中qrc资源文件,点击“添加前缀”。

8. 再次选中qrc文件,点击“添加文件”,在弹出的对话框中导入图片文件即可,后续添加图片可以直接从当前步骤开始操作。

9. 可以在qrc文件中看到已经导入的图片。

10. 如果要在Designer中使用此图片,则需要重新构建一次项目;如果要在C++代码中使用此图片,则需要选中在qrc中的图片后,鼠标右键,点击“复制资源路径到剪切板”。

QLabel示例代码下载链接:百度网盘 请输入提取码

提取码:hqyj

--来自百度网盘超级会员V6的分享

5.2 按钮类

按钮类组件的继承关系如下所示。

这几个按钮类都继承自QAbstractButton类,QAbstractButton是一个抽象类,内部规定了按钮的基本功能框架。

QAbstractButton的常用属性如下所示。

按钮显示的图片通常为图标,可以从下面的网站下载:

iconfont-阿里巴巴矢量图标库

同级互斥,同级可以使用布局,也可以使用QGroupBox组件。

QAbstractButton常用信号函数如下所示。

示例代码下载链接:百度网盘 请输入提取码

提取码:hqyj

--来自百度网盘超级会员V6的分享

如果一个窗口内部有若干个按钮对象,需要给这些按钮对象都设置信号槽连接,可以分别给每个按钮对象进行信号槽的连接。此时可以使用QButtonGroup类给若干个按钮进行编组后统一进行信号槽连接处理。

QButtonGroup直接继承QObject类,因此不可见,也不属于ui指针管理,需要在代码汇总手动创建和销毁。

  • QButtonGroup::QButtonGroup(QObject * parent = 0)

构造函数

  • void QButtonGroup::addButton(QAbstractButton * button, int id = -1)

添加按钮到按钮组

参数1:添加的按钮对象

参数2:按钮编号,正数且不重复

  • void QButtonGroup::buttonToggled(int id, bool checked) [signal]

按钮组中的按钮对象选中状态改变时发射的信号函数

参数1:状态改变的按钮对象的编号

参数2:当前此按钮的选中状态

需要注意的是,QCheckBox编组后会变为互斥,需要使用下面的函数解除互斥:

void setExclusive(bool)

参数:是否互斥

按钮组示例代码下载链接:百度网盘 请输入提取码

提取码:hqyj

--来自百度网盘超级会员V6的分享

5.3 单行文本编辑框 QLineEdit

用于录入一行的用户输入内容。

QLineEdit的常用属性如下所示。

QLineEdit的常用信号函数如下所示。

示例代码下载链接:百度网盘 请输入提取码

提取码:hqyj

--来自百度网盘超级会员V6的分享

5.4 组合框 QComboBox

类似于QRadioButton,组合框提供了另一种单选的方式。

QComboBox常用属性如下所示。

QComboBox常用信号函数如下所示。

示例代码下载链接:百度网盘 请输入提取码

提取码:hqyj

--来自百度网盘超级会员V6的分享

5.5 一组与数字相关的组件

以下组件都与数字有关。

这些组件常用的属性如下所示。

这些组件常用的信号函数如下所示。

  • void valueChanged(int value)

当前数值发生变化时发射的信号

示例代码下载链接:百度网盘 请输入提取码

提取码:hqyj

--来自百度网盘超级会员V6的分享

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/109830
推荐阅读
相关标签
  

闽ICP备14008679号