【C/C++】不允许你不知道C/C++可以编写前端，JAVA 面临挑战

#include "widget.h"
#include "ui_widget.h"
#include<QPushButton>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    this->setWindowTitle("设置窗口标题？");
}

Widget::~Widget()
{
    delete ui;
}

▶️那么我们可以给按钮设置一个窗口标题吗？

#include "widget.h"
#include "ui_widget.h"
#include<QPushButton>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);


    QPushButton* button = new QPushButton(this);
    button->setText("按钮");
    button->setWindowTitle("改变窗口标题");

}

Widget::~Widget()
{
    delete ui;
}

▶️很明显给按钮设置窗口标题啥也不是，一点用都没有；而且呢？他也不报错，这样是不科学的，你说要是这两段代码合起来，新手小白看到把能够设置窗口标题的代码删除了，以为通过按钮就能设置窗口标题，这不是扣光年终奖吗？

二、WindowIcon 属性

API	说明
windowIcon()	获取到控件的窗⼝图标. 返回 QIcon 对象
setWindowIcon(const QIcon& icon）	设置控件的窗⼝图标

✅️通过这个函数我们能改变什么窗口的图标呢？当然是QWidget 的左上角的图标，如图：

❌️注意：Qt 把各种涉及到的相关概念封装成了类，QIcon 就表示一个图标。QIcon 建议在栈上创建对象，之前推荐使用堆来创建对象是因为：要通过 Qt 对象树来释放对象，主要还是因为要确保当前的控件的生命周期是足够的；而且 QIcon 本身是一个较小的对象，创建出来之后就是要设置到某个 QWidget 里面，QIcon 对象释不释放不影响图标最终的显示，他也不支持对象树，无法给他执行父对象。

▶️操作：

1、先准备一张图片，存储在哪里都行。

❌️注意：文件名和路径不得有特殊符合和中文。

2、敲代码：

#include "widget.h"
#include "ui_widget.h"
#include<QIcon>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //设置QWidget图标
    QIcon icon("E:/leidian/people");//注意：/
    this->setWindowIcon(icon);
}

Widget::~Widget()
{
    delete ui;
}

❌️注意：通过绝对路径的方式来引入图片的不科学的，因为我们写的程序最终是要给用户使用的，万一用户删除了这种图片或者没有E盘，怎么办？程序找不到这种图片。

✅️解决办法：使用相对路径，就是给一个目录作为基准，以 . 或者 .. 的方式来找。这种办法不是最好的解决办法，你说要是用户不小心删除图片了怎么办？所以 Qt 提供了 qrc 机制，这个机制是从根本上来解决上述的两个问题：1、确保你的图片所在的路径在目标机器上存在，2、确保你的图片不会被用户删除。具体做法：给 Qt 项目中引入一个额外的 xml 文件后缀使用.qrc 表示，在这个 xml 中把要使用的图片资源给导入进来，并且在 xml 中进行记录；Qt 在编译项目的时候就会根据 qrc 中描述的图片信息找到图片内容，并且提取出图片的二进制数据，把这些二进制数据转换成 C++ 代码，最终编译到 exe 文件里面。qrc 的缺点：无法导入太大的资源文件，例如：搞个结构GB的视频文件。

▶️qrc 具体操作：

⏩️1、在项目中创建一个qrc文件。注意不要带特殊符号和中文

▶️2、把图片导入到 qrc 文件中。

⏩️2.1先创建一个" 前缀 " （Prefix）

❌️注意："前缀" 可以理解成虚拟的目录，这个目录没有在你的电脑上真实存在，是Qt自己抽象出来的，就是 qrc 机制本质上就是把图片的二进制数据转换成C++代码，最终就会在代码中看到很大的 char 数组，里面就是图片的二进制数据；为了方便 Qt 代码中访问到这个图片，Qt 就自己抽象出了虚拟的目录。

⏩️2.2、把刚才使用的图片导入到资源文件中

❌️注意：导入图片的时候要确保你的图片必须在 .qrc 文件的同级目录或者是同级目录的子目录里面。

#include "widget.h"
#include "ui_widget.h"
#include<QIcon>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //设置QWidget图标
    //QIcon icon("E:/leidian/people");//注意：/
    QIcon icon(":/people.jpg");
    this->setWindowIcon(icon);
}

Widget::~Widget()
{
    delete ui;
}

右键点击在 explore 中显示。

⏩️qrc_people.cpp 是导入的图片转换而成，他是一个C++代码。里面大部分都是二进制数据。

⏩️当 Qt 编译项目的时候，这个Cpp文件就被一起编译到了 exe 文件中，当 exe 程序运行的时候，图片的数据也会加载到内存中。

三、WindowOpacity 属性

API	说明
windowOpacity()	获取到控件的不透明数值，返回 float，取值为 0.0 -> 1.0 其中 0.0 表⽰全透明， 1.0 表⽰完全不透明
setWindowOpacity(float n)	设置控件的不透明数值

#include "widget.h"
#include "ui_widget.h"
#include<QDebug>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
}

Widget::~Widget()
{
    delete ui;
}


void Widget::on_pushButton_add_clicked()
{
    float opacity = this->windowOpacity();
    if(opacity >= 1.0)
    {
        return;
    }
    qDebug() << opacity;
    opacity += 0.1;
    this->setWindowOpacity(opacity);
}

void Widget::on_pushButton_sub_clicked()
{
    float opacity = this->windowOpacity();
    if(opacity <= 0.0)
    {
        return;
    }
    qDebug() << opacity;
    opacity -= 0.1;
    this->setWindowOpacity(opacity);
}

❌️注意：🚩①窗口的不透明度的变化不是非常精确的！因为根据 IEEE754 标准规定浮点数要使用二进制科学计数法来表示，就是把一个浮点数分成三个部分：符号位、有效数字位、指数部分，使用二进制表示的有效数字是小于0的小数部分（默认整数部分是1），由于 float 和 double 有效数字部分的长度是有限的，所以无法凑出一个非常接近0.1这样的数字。这种表示小数的规定优点是：运算速度块，占用空间小（CPU制造的时候针对这种运算专门优化的），缺点：对于一些小数无法精确表示；平常写代码的时候不能拿两个小数进行比较，✅️正确写法：做差。🚩②上述代码中进行设置之前，我们先判定了 opacity 的范围，然后再决定是否要设置，其实这个判定是不行也行，因为你传一个小数过去 setWindowOpacity 内部也会进行判定，那为什么我们要写判定呢？因为根据《代码大全》提出的防御性编程给出的结论，往往在工作时由于代码的定义和调用是不同的人写的，我们在定义或者调用是都要进行判断，万一对方的代码有问题，而你也没有判定，出了事谁负责，这种结论称之为双重判定。

四、cursor 属性

API	说明
cursor()	获取到当前 widget 的 cursor 属性，返回 QCursor 对象，当⿏标悬停在该 widget 上时，就会显⽰出对应的形状
setCursor(const QCursor& cursor）	设置该 widget 光标的形状. 仅在⿏标停留在该 widget 上时⽣效
QGuiApplication::setOverrideCursor(co nst QCursor& cursor)	设置全局光标的形状，对整个程序中的所有 widget 都会⽣效，覆盖上⾯的 setCursor 设置的内容

⏩️通过这个可以设置鼠标的形状，在QWidget内都有效。这些都是Qt默认的光标。

⏩️也可以选中按钮，在按钮上生效，除了按钮其他的QWidget的部分不生效。

⏩️我们也可以使用代码实现上述功能：

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QCursor cursor(Qt::WaitCursor);//定义的鼠标形状
    ui->pushButton->setCursor(cursor);//给按钮设置鼠标的形状
    this->setCursor(cursor);//给QWidget设置
}

Widget::~Widget()
{
    delete ui;
}

⏩️相信大家可以看出Qt默认的光标好像跟不上时代的审美，能不能使用自定义的图片设置成光标呢？

⏩️答案当然是可以的。我们可以先准备一张图片，把图片导入到项目中（qrc管理)，在代码中访问到这张图片。基于这张图片构造出光标对象并且设置。

▶️具体操作：

⏩️1、导入图片到Qt中，之前在WindowOpacity已经详细讲过，这里就不再多说。

⏩️2、写代码

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //访问图片文件
    QPixmap pixmap(":/guangbiao");
    //如果你的光标图片太大或者太小，可以通过下面这个函数来设置
    pixmap = pixmap.scaled(100,100);
    //注意：这个scaled不是修改图片的本身，而是返回一个新的图片对象副本
    //构造光标对象
    QCursor cursor(pixmap,0,10);//光标默认是以图片左上角点击才会生效，0，10就是给光标设置生效的坐标，左上角是0，0
    //把光标设置进去,作用于QWidget
    this->setCursor(pixmap);
}

Widget::~Widget()
{
    delete ui;
}

❌️注意：如果你找不到合适的图片作为光标，可以去阿里巴巴矢量图标库去下载，都是免费的。以下是他的链接：

https://www.iconfont.cn/?spm=a313x.collections_index.i3.2.47d23a81KJ3LYLhttp://阿里巴巴矢量图标库链接

五、front 属性

▶️以下内容都是对字体的设置：

API	说明
font()	获取当前 widget 的字体信息，返回 QFont 对象
setFont(const QFont& font)	设置当前 widget 的字体信息

⏩️关于QFont属性：

属性	说明
family	字体家族. ⽐如 "楷体", "宋体", "微软雅⿊" 等
pointSize	字体大小
weight	字体粗细，以数值⽅式表⽰粗细程度取值范围为 [0, 99]，数值越⼤，越粗
bold	是否加粗，设置为 true，相当于 weight 为 75，设置为 false 相当于 weight 为 50
italic	是否倾斜
underline	是否带有下划线
strikeOut	是否带有删除线

⏩️上述的属性怎么设置，在工作中一般都是由专门的美工来设计的，当然有些小公司是没有美工的，这时我们程序员可以常考一下别人是专门设置的，具体操作：

⏩️回到Qt中，我们怎么在编译器上实现：

⏩️显然通过上面的操作可以快速修改文字相关的属性，但是还是不够灵活，如果在程序运行中需要修改文字相关的属性就需要通过代码来实现。

#include "widget.h"
#include "ui_widget.h"
#include<QLabel>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    QLabel* label = new QLabel(this);
    label->setText("不想掉头发！");

    //创建字体对象
    QFont font;
    font.setFamily("仿宋");
    font.setPixelSize(30);
    font.setBold(true);
    font.setItalic(true);
    font.setUnderline(true);
    font.setStrikeOut(true);
    //把font对象设置到label中
    label->setFont(font);
}

Widget::~Widget()
{
    delete ui;
}

六、toolTip 属性

API	说明
setToolTip	设置 toolTip，⿏标悬停在该 widget 上时会有提⽰说明
setToolTipDuring	设置 toolTip 提⽰的时间，单位 ms，时间到后 toolTip ⾃动消失

▶️我们经常在各种软件上发现有许多的按钮，但是不知道他们有什么功能，所以我们把鼠标放到该按钮上就会显示他的信息。接下来让我们写一个类似的功能：

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //设置这两个的按钮的 tooptip
    ui->pushButton_yes->setToolTip("这是一个YES按钮");
    ui->pushButton_yes->setToolTipDuration(3000);//显示3000毫秒

    ui->pushButton_no->setToolTip("这是一个NO按钮");
    ui->pushButton_no->setToolTipDuration(8000);

}

Widget::~Widget()
{
    delete ui;
}

七、focusPolicy 属性

▶️通过设置这个属性可以获取焦点，什么是焦点呢？我们平时想在百度搜索一个问题时，是不是要把鼠标放到输入框中单击一下才输入搜索内容，如果我们没有把鼠标放到输入框中并且点击一下，我们输入的内容是无法进入到这个输入框中的，这就是焦点的获取。

▶️一般来说一个控件获取到焦点的方式主要有两种：1.鼠标点击，2.键盘的 tab 键

API	说明
focusPolicy()	获取该 widget 的 focusPolicy，返回 Qt::FocusPolicy
setFocusPolicy(Qt::FocusPolicy policy)	设置 widget 的 focusPolicy

⏩️在上面的表格中 Qt::FocusPolicy 是一个枚举类型，取值如下：

🚩Qt::NoFocus ：控件不会接收键盘焦点

🚩Qt::TabFocus ：控件可以通过Tab键接收焦点

🚩Qt::ClickFocus ：控件在⿏标点击时接收焦点

🚩Qt::StrongFocus ：控件可以通过Tab键和⿏标点击接收焦点 (默认值)

🚩Qt::WheelFocus ：类似于 Qt::StrongFocus , 同时控件也通过⿏标滚轮获取到焦点 (新增的选项，⼀般很少使用)

八、styleSheet 属性

▶️这个属性可以通过 CSS 设置 Widget 的样式，什么是CSS和样式呢？CSS是层叠样式表，就是在进行网页开发的时候，设置网页样式的方式；样式就是描述页面具体的样子。CSS能够提供非常丰富的功能，把网页设置成非常好看，这时候 Qt 看这家伙太厉害了，就参考了一下CSS自己搞了一套QSS。

❌️注意：和CSS类似，QSS设置的样式也是键对的格式：键和键值之间用：分隔，键值对和键值对之间使用；分隔。

❌️注意：如果你不会写你想要的样式，可以到 Qt 的文档中去搜索：Qt Style Sheet

⏩️代码方式实现夜间模式效果：

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
}

Widget::~Widget()
{
    delete ui;
}


void Widget::on_pushButton_right_clicked()
{
    //设置窗口的样式
    this->setStyleSheet("background-color:#F0F0F0;");
    //设置输入框的样式
    ui->plainTextEdit->setStyleSheet("background-color:white;color:black");
    //设置按钮的样式
    ui->pushButton_right->setStyleSheet("color:black;");
    ui->pushButton_dark->setStyleSheet("color:black;");
}

void Widget::on_pushButton_dark_clicked()
{
    //设置窗口的样式
    this->setStyleSheet("background-color:black;");
    //设置输入框的样式
    ui->plainTextEdit->setStyleSheet("background-color:black;color:white");
    //设置按钮的样式
    ui->pushButton_right->setStyleSheet("color:white;");
    ui->pushButton_dark->setStyleSheet("color:white;");
}

❌️注意：在CSS/QSS 中是可以直接使用单词来设置颜色，但是一般我们是不会直接直接做，因为颜色他有无数种，而且单词表示的就那么几种，在计算机中我们使用 RGB 来表示颜色。红黄蓝是颜料的三原色，红绿蓝是光的三原色。计算机中通常使用一个字节来表示R，一个字节来表示G，一个字节来表示B。例如：rgb(255，0，255)，一个255是红色拉满，0是绿色没有，最后一个255蓝色拉满。也可以使用#FF00FF，第一个FF表示红色拉满，00表示绿色没有，最后一个表示FF表示蓝色拉满。我们如果想获取某个界面的颜色，可以使用QQ内置的取色器，如：

九、总结

通过这篇博客我们对前端的窗口设置、属性等都有了一些认知，不知道为什么学完这些知识之后我对我对电脑页面或者说网页页面的设计和编写都有了一些较深的思考，例如为什么要设计输入栏，让输入栏更加美观，当然最最重要的是我万万没有想到图片可以转换成 C/C++ 的代码，而且还是自动生成，太神奇了！我的天呐！

哦！对了，各位优秀的程序员觉得我博客给你带来帮助或者让你学到了知识，记得给博主一个关注哦~❤️❤️❤️

各位博友，下篇博客见🍁🍁🍁

转载自CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/2403_84958571/article/details/151705403

【C/C++】不允许你不知道C/C++可以编写前端，JAVA 面临挑战

一、WindowTitle 属性

二、WindowIcon 属性

三、WindowOpacity 属性

四、cursor 属性

五、front 属性

六、toolTip 属性

七、focusPolicy 属性

八、styleSheet 属性

九、总结

评论

评论列表

微信小程序

QQ小程序

关于作者