【QT 网络云盘客户端】——主窗口界面的设计

news2024/10/6 6:05:29

目录

1.设计主窗口界面 

 2.设置窗口的背景图片

3. 自定义标题栏 

3.1 设置toolbutton按钮的图片 

3.2 设置按钮的大小

3.3 将自定义标题栏添加设置到主页面中

 3.4 去除窗口的原标题栏

 3.5 设置按钮颜色

3.6 切换页面功能实现

4.我的文件页面的设计

4.1 菜单栏的设计

4.2 自定义菜单栏

4.3 设置菜单项中的槽函数

 5.共享列表窗口的设计

6.传输列表窗口的设计

 7. 切换用户功能的实现

完整代码链接

当登录成功后，客户端会弹出一个主界面，这个主界面如下的功能如下：

 

 

1.设计主窗口界面 

1.主界面类型是一个将它定义为mainwindows类型，它是一个QMainWindow的类型

2.mainwindows的ui界面如下

widget是用来显示自定义标题栏的，stackWidget是可以用来显示多个页面。 

在stackedWidget 添加3个页面，分别是 ”我的文件“，”共享列表“，”传输列表“ ， 

注意：stackedWidget 的新添页面不能够单独的删除它。

 

 

 2.设置窗口的背景图片

没有设置背景色的窗口如下：

 设置背景色就需要 重写paintEvent，将对应的图片用QPainter显示出来。

 ps:窗口在显示的时候，就会调用paintEvent。



//MainWindow.cpp文件
void MainWindow::paintEvent(QPaintEvent*)
{
    QPainter* painter=new QPainter(this);
    QPixmap pixmap;
    pixmap.load(":/res/bk_page.png");
    painter->drawPixmap(0,0,this->width(),this->height(),pixmap);
    painter->end();
}

显示效果: 

3. 自定义标题栏 

创建一个buttongroup的对象，它的界面是一个QWidget界面即可，将多个 toolbutton按钮 添加到这个界面中，并设置按钮的图片和文字。

注意

如下是buttongroup.ui文件中的宽度不能大于mainwindows的宽度。

 

3.1 设置toolbutton按钮的图片 

1.将对应的图片添加到 资源路径 中，找到 按钮的 属性页-> icon->添加图片

注意：不要在样式表中添加图片，如果在 样式表添加图片，不能够使文字放在图片下面

2.将文字设置进图片的下面，找到 toolButtonStyle，将按钮的类型设ToolButtonTextUnderIcon。

3.2 设置按钮的大小

找到按钮的属性值，一如果按钮太小，设置minimumSize，如果按钮太大，设置maximumSize

 

3.3 将自定义标题栏添加设置到主页面中

鼠标右键点击mainwindows中最上面的窗口QWidget，点击 "提升为" 按钮。

添加自定义窗口的类名称，选择对应的类，点击提升即可.

 

显示窗口：

 3.4 去除窗口的原标题栏

 在构造函数中添加代码：

this->setWindowFlags(Qt::FramelessWindowHint | windowFlags());

 

 3.5 设置按钮颜色

当我们点击到对应的按钮的时候，按钮就会显示白色，其余的按钮就会显示黑色。 

 步骤：设置每个按钮的槽函数，当点击对应的按钮，就将对应按钮的颜色设置为白色，其他按钮的颜色设置为 黑色。

 


//我的文件按钮的槽函数
//当我们点击 ”我的文件“按钮时,其他按钮的也是这样
void buttongroup::on_myfile_btn_clicked()
{
   ui->user_btn->setStyleSheet("color:black");
   ui->share_btn->setStyleSheet("color:black");
   ui->myfile_btn->setStyleSheet("color:white");
   ui->tran_btn->setStyleSheet("color:black");
   ui->switch_btn->setStyleSheet("color:black");
   ui->user_btn->setStyleSheet("color:black");
   emit myfilePage();//发送一个信号，让stackwidget切换到我的文件的页面
}

3.6 切换页面功能实现

  • 由于buttongroup和QStackWidget是 MainWindow中的子窗口，buttongroup不能直接切换QStackWidget中的界面。
  • 当我们点击buttongroup中对应的按钮，buttongroup就会发出相应的信号，MainWindow就会根据槽函数切换相应的页面。

 


//我的文件按钮
void buttongroup::on_myfile_btn_clicked()
{
   ui->user_btn->setStyleSheet("color:black");
   ui->share_btn->setStyleSheet("color:black");
   ui->myfile_btn->setStyleSheet("color:white");
   ui->tran_btn->setStyleSheet("color:black");
   ui->switch_btn->setStyleSheet("color:black");
   ui->user_btn->setStyleSheet("color:black");
   emit myfilePage();
}

.....其他按钮的槽函数


 //setCurrentWidget是显示对应的页面
void MainWindow::setSiganlButton()
{
    //切换到我的文件页面
    connect(ui->butgroup,&buttongroup::myfilePage,this,[=](){
       
        ui->stackedWidget->setCurrentWidget(ui->myfile_page);
        ui->myfile_page->showMyfile();
    });

    //切换到共享页面
    connect(ui->butgroup,&buttongroup::sharePage,this,[=](){
         ui->stackedWidget->setCurrentWidget(ui->share_page);
         ui->share_page->getFileCount();
    });


    //传输列表页面
    connect(ui->butgroup,&buttongroup::tranPage,this,[=](){
         ui->stackedWidget->setCurrentWidget(ui->tran_page);
    });

    //切换用户页面
    connect(ui->butgroup,&buttongroup::switchPage,this,[=](){
        //切换用户界面
         emit switchUser();
        //切换用户的所需要的操作
        ui->myfile_page->changerUser();
    });

}

 

 

4.我的文件页面的设计

自定义一个myfile类型，添加新文件myfile.h，myfile.cpp，myfile.ui文件:

myfile.ui文件：

ps: QListWidget存储的对象是QListWidgetItem 。 

 在mainwindow.ui文件中，选择stackedWidget 下的一个页面，将该页面提升为 myfile类型

4.1 菜单栏的设计

  1. 当鼠标右键点击 窗口的空白，则出现 空白的菜单栏。
  2. 当鼠标右键点击 窗口中的文件 时，则出现 文件的菜单栏。

 

实现：

1.让listWidget窗口使用 setContextMenuPolicy(Qt::CustomContextMenu)，设置右击鼠标发出的

customContextMenuRequested( const QPoint& pos) 信号，pos变量 时当前鼠标的位置

2.定义两个菜单栏

 //在myfile.h文件中定义两个菜单栏
 QMenu* m_fileMenu;
 QMenu* m_blankMenu;


//右键点击文件产生的菜单项
QAction* m_downloadAction;//下载
QAction* m_deleteAction;  //删除
QAction *m_shareAction;   //分享
QAction *m_propertyAction;//属性

//右键点击空白产生的菜单项
QAction *m_downloadAscAction;  //按下载量升序
QAction *m_downloadDescAction; //按下载量降序
QAction *m_refreshAction;      //更新
QAction *m_uploadAction;       //上传

//将菜单项设置进菜单栏中
void myfile::setMenuAction()
{
    m_downloadAction=new QAction("下载");
    m_deleteAction=new QAction("删除");
    m_shareAction=new QAction("分享");   //分享
    m_propertyAction=new QAction("属性");//属性


    m_fileMenu->addAction(m_downloadAction);
    m_fileMenu->addSeparator();
    m_fileMenu->addAction(m_deleteAction);
    m_fileMenu->addSeparator();
    m_fileMenu->addAction(m_shareAction);
    m_fileMenu->addSeparator();
    m_fileMenu->addAction(m_propertyAction);

    //右键点击空白产生的菜单
    m_downloadAscAction=new QAction("按下载量升序");  //按下载量升序
    m_downloadDescAction=new QAction("按下载量降序"); //按下载量降序
    m_refreshAction=new QAction("更新");      //更新
    m_uploadAction=new QAction("上传");       //上传


    m_blankMenu->addAction(m_downloadAscAction);
    m_blankMenu->addSeparator();
    m_blankMenu->addAction(m_downloadDescAction);
    m_blankMenu->addSeparator();
    m_blankMenu->addAction(m_refreshAction);
    m_blankMenu->addSeparator();
    m_blankMenu->addAction(m_uploadAction);
    
    //给菜单选项设置槽函数
    setActionConnect();
}
//myfile.cpp文件
//设置菜单栏
void myfile::setWidgetMemu()
{
    //创建自定义菜单栏
    m_fileMenu=new MyMenu(this); 
    m_blankMenu=new MyMenu(this);
    //设置右击鼠标的触发的事件
    ui->listWidget->setContextMenuPolicy(Qt::CustomContextMenu);
    connect(ui->listWidget,&QWidget::customContextMenuRequested,this,[=](const QPoint& pos)
    {
        //itemAt获取pos位置上的QListWidgetItem 
        //如果pos位置上没有QListWidgetItem.则返回nullptr
        QListWidgetItem* item=ui->listWidget->itemAt(pos);
        if(item==nullptr){
            //鼠标在窗口的位置
            qDebug()<<"选中空位置";
            m_blankMenu->exec(QCursor::pos());//显示菜单栏
        }else{
            //鼠标选到对应的文件 
            //exec显示菜单栏,QCursor::pos()是获取相对于全局的位置点
            m_fileMenu->exec(QCursor::pos());
            qDebug()<<"选中文件";//显示菜单栏
        }
    });
}

4.2 自定义菜单栏

普通菜单栏： 

自定义菜单栏：

 

 1.自定义一个 菜单栏类 MyMenu,将这个菜单栏继承QMenu

#include <QObject>
#include<QMenu>
class MyMenu:public QMenu
{
public:
    MyMenu(QWidget* parent=nullptr);
};

2.MyMenu在构造函数中 使用 setStyleSheet 设置样式即可

3.样式可以在 样式表 中进行选择。

//MyMenu.cpp文件
MyMenu::MyMenu(QWidget* parent):QMenu (parent)
{
    setStyleSheet("background-color: rgb(101, 255, 245);
                    font: 9pt \"黑体\";color: rgb(255, 36, 8);");
}

4.3 设置菜单项中的槽函数


void myfile::setActionConnect()
{
    //右键文件菜单
    //点击下载文件
    connect(m_downloadAction,&QAction::triggered,this,[=]{
         dealfile(DealFile::Download);
    });

    //点击删除文件
    connect(m_deleteAction,&QAction::triggered,this,[=]{
         dealfile(DealFile::Delete);
    });

    //点击分享文件
    connect(m_shareAction,&QAction::triggered,this,[=]{
         dealfile(DealFile::Share);
    });

    //点击文件属性
    connect(m_propertyAction,&QAction::triggered,this,[=]{
        qDebug()<<"显示文件属性";
        dealfile(DealFile::Show);
    });


    //右键空白菜单
    connect(m_downloadAscAction,&QAction::triggered,this,[=]{
             // qDebug()<<"按下载量降序";
              getFileCount(Desc);
    });


    connect(m_downloadDescAction,&QAction::triggered,this,[=]{
            //  qDebug()<<"按下载量升序";
               getFileCount(Asc);
    });

    connect(m_refreshAction,&QAction::triggered,this,[=]{
            getFileCount(Normal);
            qDebug()<<"更新";
    });

    //上传文件
    connect(m_uploadAction,&QAction::triggered,this,[=]{
             addUploadFile();
             qDebug()<<"上传";
    });
}

 5.共享列表窗口的设计

共享列表窗口跟我的文件的设计 一模一样的，这里不做多说明。

6.传输列表窗口的设计

自定义一个transformwidget类型，添加新文件transformwidget.h，transformwidget.cpp：

传输列表ui结构：

上传列表：

 

 下载列表：

传输记录：

进入mainwindow.ui,将stackedWidget下对应的页面提升为transformwidget。

 7. 切换用户功能的实现

点击切换用户按钮，跳转到登录界面：

1.在设置切换用户按钮的槽函数，在槽函数中发送一个switchPage的信号。

//切换用户按钮
void buttongroup::on_switch_btn_clicked()
{
    emit switchPage();
}

//在Dialog设置switchPage的槽函数
 connect(mainwindow,&MainWindow::switchUser,this,[=](){
        mainwindow->hide();
        this->show();
 });

完整代码链接：

sjp1237/Cloud-disk at 7_28 (github.com)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/800857.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

插件使用权限管理软件（三）WebAPI项目IIS部署

插件使用权限管理软件（三）WebAPI项目IIS部署

前言 前面完成了WebAPI项目的接口服务类编写工作&#xff0c;接下来讲把项目部署到服务器的IIS上&#xff0c;让系统运行起来。 一. 项目发布 右键项目RightsManagementSystems.Web.Entry 选择“发布”选项 弹出发布选项界面&#xff0c;选择“文件夹”&#xff0c;点击下一步…
阅读更多...
【Android知识笔记】UI体系（一）

【Android知识笔记】UI体系（一）

Activity的显示原理 setContentView 首先开发者Activity的onCreate方法中通常调用的setContentView会委托给Window的setContentView方法： 接下来看Window的创建过程： 可见Window的实现类是PhoneWindow，而PhoneWindow是在Activity创建过程中执行attach Context的时候创建的…
阅读更多...
SystemServer进程

SystemServer进程

前言 在systemServer启动文章中我们讲了在SystemServer.java的main方法里面调用new SystemServer().run&#xff08;&#xff09;方法启动System_server进程。那么我们接着看一下SystemServer.java具体做了哪些事情&#xff1f; ##SystemServer的run方法介绍 frameworks\base…
阅读更多...
VictoriaMetrics

VictoriaMetrics

VictoriaMetrics是一个开源的时序数据库和监控解决方案&#xff0c;专门用于存储和查询大规模时间序列数据。它的设计灵感来自Prometheus&#xff0c;但在某些方面与Prometheus有所区别&#xff0c;主要关注于提供高性能、高可用性和低资源占用的特点。 一、与Prometheus区别和…
阅读更多...
Kotlin Multiplatform 创建多平台分发库

Kotlin Multiplatform 创建多平台分发库

目标&#xff1a;通过本教程学习如何使用 Kotlin Multiplatform Library 创建多平台分发库(iOS&#xff0c;安卓)。 创建一个项目 1、本教程使用的是Android Studio创建 2、选择 新建工程&#xff0c;选择 Kotlin Multiplatform Library 3、点击next 输入需要创建的项目名称以…
阅读更多...
第2章 逻辑分页、AutoFac注入、工作单元与仓储

第2章 逻辑分页、AutoFac注入、工作单元与仓储

1 CoreCms.Net.Model.ViewModels.Basics.IPageList<T> namespace CoreCms.Net.Model.ViewModels.Basics { ///<typeparam name"T">泛型类型实例(1个指定实体的类型实例)。</typeparam> /// <summary> /// 【逻辑分页列表--接口】 /// <…
阅读更多...
akka 简单使用

akka 简单使用

由于AKka的核心是Actor&#xff0c;而Actor是按照Actor模型进行实现的&#xff0c;所以在使用Akka之前&#xff0c;有必要弄清楚什么是Actor模型。 Actor模型最早是1973年Carl Hewitt、Peter Bishop和Richard Seiger的论文中出现的&#xff0c;受物理学中的广义相对论(general…
阅读更多...
3ds MAX绘制茶壶

3ds MAX绘制茶壶

综合一下之前的内容画个茶壶 长方形&#xff0c;然后转化为可编辑多边形&#xff0c;添加节点并设置圆角&#xff0c;如下图 车削生成一个圆环&#xff0c;其实这一步也可以用一个圆柱体和两个圆角圆柱体解决 效果如下&#xff1a; 茶壶的底座绘制好了 接下来是茶壶的上半边 …
阅读更多...
牛客网面试必刷：CD12 换钱的最少货币数

牛客网面试必刷：CD12 换钱的最少货币数

牛客网面试必刷&#xff1a;CD12 换钱的最少货币数 前言一、动态规划&#xff08;1&#xff09;需要判断钱币和总金额&#xff08;2&#xff09;不需要判断钱币和总金额 前言 问题链接: CD12 换钱的最少货币数 一、动态规划 参考自&#xff1a;【编程题 动态规划】兑换零钱(…
阅读更多...
Coremail敏感配置信息泄露

Coremail敏感配置信息泄露

生活是美好的&#xff0c;生命在其间又是如此短促。既然活着&#xff0c;就应该好好地活。应该更珍惜自己生命的每个时刻&#xff0c;精神上的消沉无异于自杀。像往日一样正常的投入生活吧&#xff0c;即便是痛苦&#xff0c;也应该被看做是人的正常情感&#xff0c;甚至它是组…
阅读更多...
【多线程】进程调度的基本过程

【多线程】进程调度的基本过程

进程调度的基本过程 1. 什么是进程/任务&#xff08;Process/Task&#xff09;2. 描述一个进程3. 什么是进程调度&#xff1f;3.1 进程状态3.2 进程的优先级3.3 进程的上下文3.4 进程的记账信息 4. 组织这些进程 1. 什么是进程/任务&#xff08;Process/Task&#xff09; 操作…
阅读更多...
【用户体验分析报告】 按需加载组件，导致组件渲染卡顿，影响交互体验？组件拆包预加载方案来了！

【用户体验分析报告】 按需加载组件，导致组件渲染卡顿，影响交互体验？组件拆包预加载方案来了！

首先&#xff0c;我们看一些针对《如何提升应用首屏加载体验》的文章&#xff0c;提到的必不可少的措施&#xff0c;便是减少首屏幕加载资源的大小&#xff0c;而减少资源大小必然会想到按需加载措施。本文提到的便是一个基于webpack 插件与 react 组件实现的一套研发高度自定义…
阅读更多...
nginx入门 - 学习笔记

nginx入门 - 学习笔记

一、初识 1、相关概念 1&#xff09;正向代理 一个位于客户端和原始服务器之间的服务器&#xff0c;为了从原始服务器取得内容&#xff0c;客户端向代理发送一个请求并指定目标&#xff0c;然后代理向原始服务器转交请求并将获得内容返回给客户端。 2&#xff09;反向代理…
阅读更多...
【C++】多态，虚函数表相关问题解决

【C++】多态，虚函数表相关问题解决

文章目录 多态概念及其触发条件重写和协变&#xff08;考点1&#xff09;&#xff08;考点2&#xff09; 虚函数表及其位置&#xff08;考点3&#xff09; 多继承中的虚函数表 多态概念及其触发条件 多态的概念&#xff1a;通俗来说&#xff0c;就是多种形态。具体点就是去完成…
阅读更多...
DSA之图（2）：图的存储结构

DSA之图（2）：图的存储结构

文章目录 0 图的结构1 邻接矩阵1.1 无向图的邻接矩阵1.2 有向图的邻接矩阵1.3 网&#xff08;有权图&#xff09;的邻接矩阵表示法1.4 邻接矩阵的建立1.4.1 采用邻接矩阵建立无向网1.4.2 采用邻接矩阵建立有向网 1.5 邻接矩阵的优缺点1.5.1 优点1.5.2 缺点 2 邻接表2.1 无向图的…
阅读更多...
Java将汉字转拼音以及判断字符是否为汉字

Java将汉字转拼音以及判断字符是否为汉字

首先是将汉字转换为拼音&#xff1a; 导入依赖&#xff1a; <dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>4.1.2</version></dependency>创建转拼音的静态方法toPinyin&#xf…
阅读更多...
掌握 Python RegEx：深入探讨模式匹配

掌握 Python RegEx：深入探讨模式匹配

动动发财的小手&#xff0c;点个赞吧&#xff01; 什么是正则表达式&#xff1f; 正则表达式通常缩写为 regex&#xff0c;是处理文本的有效工具。本质上&#xff0c;它们由一系列建立搜索模式的字符组成。该模式可用于广泛的字符串操作&#xff0c;包括匹配模式、替换文本和分…
阅读更多...
在线阅读版：《2023中国软件供应链安全分析报告》全文

在线阅读版：《2023中国软件供应链安全分析报告》全文

聚焦源代码安全&#xff0c;网罗国内外最新资讯&#xff01; 专栏供应链安全 数字化时代&#xff0c;软件无处不在。软件如同社会中的“虚拟人”&#xff0c;已经成为支撑社会正常运转的最基本元素之一&#xff0c;软件的安全性问题也正在成为当今社会的根本性、基础性问题。 随…
阅读更多...
火车头采集器伪原创【php源码】

火车头采集器伪原创【php源码】

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;python中按钮的位置怎么摆放&#xff0c;python中按钮怎么设置颜色&#xff0c;现在让我们一起来看看吧&#xff01; 火车头采集ai伪原创插件截图&#xff1a; 1、用python的pygame,做一个按钮 唔...摁钮&#xff1f;…
阅读更多...
【万字长文】SpringBoot整合SpringSecurity+JWT+Redis完整教程（提供Gitee源码）

【万字长文】SpringBoot整合SpringSecurity+JWT+Redis完整教程（提供Gitee源码）

前言&#xff1a;最近在学习SpringSecurity的过程中&#xff0c;参考了很多网上的教程&#xff0c;同时也参考了一些目前主流的开源框架&#xff0c;于是结合自己的思路写了一个SpringBoot整合SpringSecurityJWTRedis完整的项目&#xff0c;从0到1写完感觉还是收获到不少的&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023