qt学习：模仿qq界面+添加资源+无边框界面+修改样式

目录

一，创建登录ui界面类 LoginWidget

二，添加图片资源

三，通过样式的方法将图片设置成圆圈的背景

四，新建登录后的ui界面  MWindow  简陋的就可以，因为只为了学习，可以自己补充

五，新建三个嵌套ui界面类，ChatWidget聊天界面   FriendWiidget好友界面   CollectWidget收藏界面  

六，在登录后的界面.h里添加自定义函数的定义和头文件和私有成员

七。在登录后的界面里设置初始化嵌套界面

八，实现自定义函数

 九，设置登录界面的登录按钮点击槽函数进行跳转

十，设置左边第二第三第四个按钮的点击槽函数，点击的时候会改变

下面就是替换成无边框界面的步骤

十一，添加无边框界面文件，在文章顶部下载复制到项目里

十二，重新登录界面和登录后界面设计ui界面

十三，在登录界面和登录后界面.h里包含头文件

十四，修改登录界面和登录后界面.h的继承关系和添加槽函数的定义

十五，修改登录界面和登录后界面.cpp文件

十六，在登录界面和登录后界面里的构造函数添加初始化无边框界面

十七，在登录界面修改样式

十八，修改文件

---

一，创建登录ui界面类 LoginWidget

二，添加图片资源

点击项目右键-----选择add new...------左边选择QT---------中间选QT Resource file-----点击确认--------填写资源文件名-------点击下一步----------再点击下一步----------在下面前缀一栏改成自己要的前缀-------点击add files选择图片确认-------在左边项目栏就可以看到图片资源了

三，通过样式的方法将图片设置成圆圈的背景

在登录界面的构造函数里     label_img是圆圈的名字

路径可以通过右键图片复制得到

ui->label_img->setStyleSheet("border-image: url(:/res/2.png);");

四，新建登录后的ui界面  MWindow  简陋的就可以，因为只为了学习，可以自己补充

左边是四个按钮，右边是一个窗体Widget

五，新建三个嵌套ui界面类，ChatWidget聊天界面   FriendWiidget好友界面   CollectWidget收藏界面  

界面里有什么自己设计

六，在登录后的界面.h里添加自定义函数的定义和头文件和私有成员

头文件
#include "chatwidget.h"
#include "collectwidget.h"
#include "friendwidget.h"

私有成员
private:
    ChatWidget    *m_chatWidget;
    FriendWidget  *m_friendWidget;
    CollectWidget *m_collectWidget;

公有函数接口
public:
    explicit MWindow(QWidget *parent = nullptr);
    ~MWindow();
    void updateBtnUi(QString imgeName, QPushButton*btn,QWidget *widget);
    void setUserData(QString header);

七。在登录后的界面里设置初始化嵌套界面

构造函数里添加    将右边的Widget作为嵌套界面的父类，并隐藏

    ui->setupUi(this);

    m_chatWidget = new ChatWidget(ui->widgetMain);
    m_friendWidget = new FriendWidget(ui->widgetMain);
    m_collectWidget =new  CollectWidget(ui->widgetMain);

    m_chatWidget->show();
    m_friendWidget->hide();
    m_collectWidget->hide();

八，实现自定义函数

//显示头像到第一个按钮上
void MWindow::setUserData(QString header)
{
    ui->btn_header->setIcon(QIcon(header));
    ui->btn_header->setIconSize(QSize(48,64));
}
//当按钮点击时，更新按钮图标
void MWindow::updateBtnUi(QString imgeName, QPushButton *btn,QWidget *widget)
{
     ui->btn_chat->setIcon(QIcon(":/res/chat.png"));
     ui->btn_friend->setIcon(QIcon(":/res/friend.png"));
     ui->btn_collect->setIcon(QIcon(":/res/collect.png"));

     //当前选中的按钮 图标 高亮
     btn->setIcon(QIcon(imgeName));

     m_chatWidget->hide();
     m_friendWidget->hide();
     m_collectWidget->hide();

    widget->show();
}