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

这篇具有很好参考价值的文章主要介绍了QT-------UI基础到进阶,干货满满!!!。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、UI基础

1. QWidget类(掌握)

2. 添加子组件(掌握)

3. 样式表(熟悉)

二、UI进阶

1. Designer 设计师(掌握)

2. 布局 Layout(掌握)

3. QWidget属性(掌握)

4. UI指针(掌握)

5. 基础组件(熟悉)

5.1 标签 QLabel

5.2 按钮类

5.3 单行文本编辑框 QLineEdit

5.4 组合框 QComboBox

5.5 一组与数字相关的组件


一、UI基础

1. QWidget类(掌握)

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

qt ui,ui,qt,开发语言

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

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
// 头文件
#include <QDebug>

class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog(QWidget *parent = 0);
    ~Dialog();
};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{
    // 重定义宽高
    resize(1000,240);
    // this指针指向主函数中的w对象
    int w = this->width();
    int h = height();
    // 输出
    qDebug() << w << h;

    // 获得位置
    int x = this->x();
    int y = this->y();
    qDebug() << x << y; // 0,0 不准,因为窗口对象还在创建中
    // 移动
    move(100,100);

    // 同时设置坐标和宽高
    setGeometry(400,400,200,200);
}

Dialog::~Dialog()
{

}

2. 添加子组件(掌握)

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

QPushButton的构造函数如下:

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

参数1:按钮显示的文字

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

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
// 头文件
#include <QPushButton>

class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    // 私有成员变量
    QPushButton* btn;
};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{
    resize(400,400);
    // 创建一个按钮对象
    // 参数2是使用this指针结合多态传参
    btn = new QPushButton("初十",this);
    // 更改按钮大小
    btn->resize(100,100);
    // 移动按钮位置,注意坐标是窗口内部的相对坐标
    btn->move(100,100);
}

Dialog::~Dialog()
{
    // 释放按钮内存
    delete btn;
}

3. 样式表(熟悉)

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

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

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

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

  • 色彩搭配

Color Palette Generator - Create Beautiful Color Schemes

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
// 头文件
#include <QPushButton>

#define QPushButton_STYTLE (QString("\
/*按钮普通态*/\
QPushButton\
{\
    font-family:Microsoft Yahei;\
    /*字体大小为20点*/\
    font-size:20pt;\
    /*字体颜色为粉色*/\
    color:rgb(238, 210, 238);\
    /*背景颜色*/\
    background-color:rgb(197,146,163);\
    /*边框圆角半径为8像素*/\
    border-radius:8px;\
}\
/*按钮悬停态*/\
QPushButton:hover\
{\
    /*背景颜色*/\
    background-color:#9F79EE;\
}\
/*按钮按下态*/\
QPushButton:pressed\
{\
    /*背景颜色*/\
    background-color:rgb(14 , 135 , 10);\
    /*左内边距为3像素,让按下时字向右移动3像素*/\
    padding-left:3px;\
    /*上内边距为3像素,让按下时字向下移动3像素*/\
    padding-top:3px;\
}"))

class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    // 私有成员变量
    QPushButton* btn;
};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{
    resize(400,400);
    btn = new QPushButton("初十",this);
    // 设置样式表
    btn->setStyleSheet(QPushButton_STYTLE);

    btn->resize(100,100);
    btn->move(100,100);
}

Dialog::~Dialog()
{
    delete btn;
}

 

二、UI进阶

1. Designer 设计师(掌握)

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

qt ui,ui,qt,开发语言

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

qt ui,ui,qt,开发语言

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

qt ui,ui,qt,开发语言

2. 布局 Layout(掌握)

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

布局有四种:

qt ui,ui,qt,开发语言

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

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

qt ui,ui,qt,开发语言

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

qt ui,ui,qt,开发语言

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

qt ui,ui,qt,开发语言

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

qt ui,ui,qt,开发语言

3. QWidget属性(掌握)

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

qt ui,ui,qt,开发语言

4. UI指针(掌握)

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

qt ui,ui,qt,开发语言

5. 基础组件(熟悉)

5.1 标签 QLabel

用于显示图片或文字。

qt ui,ui,qt,开发语言

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

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

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

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

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

qt ui,ui,qt,开发语言

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

qt ui,ui,qt,开发语言

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

qt ui,ui,qt,开发语言

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

qt ui,ui,qt,开发语言

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

qt ui,ui,qt,开发语言

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

qt ui,ui,qt,开发语言

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

qt ui,ui,qt,开发语言

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

提取码:hqyj

--来自百度网盘超级会员V6的分享文章来源地址https://www.toymoban.com/news/detail-759178.html

5.2 按钮类

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

qt ui,ui,qt,开发语言

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

QAbstractButton的常用属性如下所示。

qt ui,ui,qt,开发语言

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

iconfont-阿里巴巴矢量图标库

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

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

qt ui,ui,qt,开发语言

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

提取码: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的常用属性如下所示。

qt ui,ui,qt,开发语言

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

qt ui,ui,qt,开发语言

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

提取码:hqyj

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

5.4 组合框 QComboBox

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

QComboBox常用属性如下所示。

qt ui,ui,qt,开发语言

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

qt ui,ui,qt,开发语言

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

提取码:hqyj

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

5.5 一组与数字相关的组件

以下组件都与数字有关。

qt ui,ui,qt,开发语言

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

qt ui,ui,qt,开发语言

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

  • void valueChanged(int value)

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

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

提取码:hqyj

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

到了这里,关于QT-------UI基础到进阶,干货满满!!!的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • [编程语言][C++][Qt]单独添加UI文件

    不知什么原因,Qt Creator并不是很完美很智能。当先写好界面类的头文件和源代码文件后,我们再添加用于可视化界面设计的UI文件时,会出现一些问题。 当使用CMake管理项目时,CMake会读取 CMakeLists.txt 文件来确定各种项目设置。需要把 MainWindow.ui 包含进项目时,在 CMakeLists.

    2024年02月07日
    浏览(43)
  • 【QT开发(5)】0919-QT里面新增ui类,新增使用opencv读取图片的普通类,在ui类中显示图片

    1、Qt Creator快速入门_第三版__霍亚飞编著 2、《Qt+OpenCV显示图片(Mat转QImage然后显示在QLabel上)》 https://gitee.com/hiyanyx/qt5.14-cpp_-empty_-project/tree/Study2023-section5/ git分支“Study2023-section5” 新增ui类 新增使用opencv读取图片的普通类 为了更加方便,可在QT 中添加普通类,这样会自动生

    2024年02月07日
    浏览(41)
  • QT 之基础(一) 详解UI文件设计与运行机制

    一、项目文件组成 1.1 创建一个项目文件        建立好项目如下   (1)项目组织文件【untitled.pro】 存储项目设置文件 (2)主程序入口文件【main.cpp】 实现函数main()函数程序文件   (3)窗体界面文件【mainwindow.ui】 一个XML格式存储的窗体上的元件及其布局文件。 任何界面窗

    2024年02月16日
    浏览(40)
  • QT基础之——ui文件以及信号和槽机制

            上一节我们讲了除界面文件ui文件其他的所有文件,这一节我们来介绍一下ui文件:在文件目录中我们能看到界面文件这一栏,点击展开我们可以看到一个以\\\".ui\\\"结尾的文件,双击我们会看到如下界面:         我们在右侧选中label和PushButton拖入到工作台上的窗口中,

    2024年04月08日
    浏览(65)
  • 【QT开发专题-天气预报】16.更新 UI 界面

    本专栏将会在未来 4 个月内,完成以下几个 Qt 项目: 《天气预报》 《文本编辑器》 《俄罗斯方块》 《绘图板》 《网络聊天室》 《串口助手》 完成时间预计在 2022-12-31 ,文章数目在 50 篇左右,更新完毕之后,价格恢复到 ¥299 专栏优势: 每个项目都是从零新建工程开始

    2023年04月08日
    浏览(63)
  • QT QPluginLoader 插件开发 ui界面打包dll

     将项目模块化,每一个模块单独开发,模块的组成形成最终的主程序, 点击左侧按钮就会弹出对应的插件应用,每一个子窗口都是单独的dll 插件, 灵活,升级,下载,卸载。 效果:     打开QT Creator 新建插件开发项目  下一步后选择 Qt Plugin 开发 添加依赖库,在.pro里  

    2024年02月11日
    浏览(43)
  • QGIS开发五:VS使用QT插件创建UI界面

    前面我们说了在创建项目时创建的是一个空项目,即不使用 Qt 提供的综合开发套件 Qt Creator,也不使用 Qt Visual Studio Tools 这类工具。 但是后面发现,如果我想要有更加满意的界面布局,还是要自己写一个UI文件,如果不使用QT插件,在VS中导入自己的UI文件编译起来不是那么容

    2024年02月13日
    浏览(56)
  • QT学习开发笔记(项目实战之智能家居物联 UI 界面开发 )

    项目路径为 4/01_smarthome/01_smarthome/01_smarthome.pro,先看项目界面。项目界面如 下,采用暗黑主题设计,结合黄色作为亮色,让用户一目了然。界面笔者从一些智能家居界面 中找到灵感的,编写设计完成的效果不错!请自行查阅源码,掌握了本教程前面第七章的内容, 就可以理

    2024年02月16日
    浏览(49)
  • 【Qt】使用Qt designer(Qt设计师)以及uic工具将ui文件转换到C++代码进行界面开发

    【Qt】编写第一个Qt程序,使用Cmake编译并运行 Qt Designer是一个用于创建Qt应用程序用户界面的图形化界面设计器。它是Python GUI开发的一个重要工具,可以帮助用户快速创建具有丰富功能的用户界面。 打开终端输入以下代码 点击创建 拖一些组件进来,点击保存 得到一个后缀为

    2024年02月16日
    浏览(51)
  • QGIS二次开发六:VS不借助QT插件创建UI界面

    上一篇博客我们说了在VS中如何使用QT插件来创建UI界面,但是我们二次开发QGIS的第一篇博客就说了,最好使用OSGeo4W中自动下载的QT进行QGIS二次开发,这样兼容性是最好的,那么该如何在VS中不使用外部安装的QT以及QT的VS插件情况下进行UI界面的创建和使用呢? 如果你仔细看完

    2024年02月13日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包