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

最新推荐文章于 2024-05-17 06:56:52 发布
最新推荐文章于 2024-05-17 06:56:52 发布
阅读量730 收藏 3
点赞数
分类专栏： qt网络云盘 文章标签： 前端 服务器 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sjp11/article/details/131777438
版权

目录

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)

努力学习的少年
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
教你用Qt手写优酷客户端界面
琅嬛福地
03-06 2116
Qt可以实现各种客户端界面，比如优酷，wps这两个就是用Qt实现的，以及操作系统deepin, UOS的界面大部分都是Qt实现的，最近写了个优酷的界面，如下图： 我的实现和优酷还是有些区别，有些细节没有处理，要用qss来优化，要达到优酷的效果，需要花时间处理。没有对比就没有伤害，下面是优酷的界面图 怎样实现这效果呢？ 优酷的界面主要分为3部分， 标题栏，左侧列表栏，中间的视频图片区域。这三部分可以分开实现，整体用竖直布局，再分两个水平布局，目测是这...
（二）用Qt实现登录界面——打造简洁、美观的登录体验
CPanMirai的博客
05-08 3443
本篇博文通过介绍Qt框架的基本概念和使用方法，以及在其中实现登录功能的过程，为读者展示了如何使用Qt框架开发实用的应用程序。我们详细介绍了Qt Creator的界面设计、信号和槽机制、JSON数据处理等技术，帮助读者了解Qt框架在实际开发中的应用场景和优势。同时，本篇博文也分享了个人在登录功能开发中的经验和总结，包括界面设计、用户状态管理、异常处理等方面，希望能为读者提供一些有益的启示和参考。同时也探讨了如何进一步优化登录功能，以提高系统的稳定性和可靠性。
用QT做一个简单的登录界面
06-18
使用QT做一个简单的登录界面
2024年qt 如何设计好布局和漂亮的界面。_qt 界面，全网最新
2401_84973104的博客
05-16 1368
🔵Preferred：控件的sizeHint是它的sizeHint，但是可以放大或者缩小。🔵Expandint：控件可以自行增大或者缩小。🔵MinimumExpanding：控件的sizeHint是它的sizeHint，但是可以使用额外的空间，也就是它会尽可能得到更多的空间。🔵Ignored：控件的sizeHint不起作用，它会尽可能得到更多的空间。所以看到这里，千万不要再说你的Spacer不能设置大小。
Qt 登陆界面实现
技术资料收集站
08-14 837
新项目要用到Qt，所以最近研究Qt，昨天安装好部署好Qt Creator现在马上开始第一个程序。 做一个简单的登陆界面功能 效果图如下 代码部分 View Code View Code View Code 代码很简单实现基本功能 作者：江南烟雨居 出处：http://www.cnblogs.com/newstart// 本文版权归作者
QT界面 模拟windows文件管理（只做了界面的功能，并未实现文件的管理功能）
雒珣的博客
12-20 2789
转载请标注出处：https://blog.csdn.net/tjm1017/article/details/103632097 demo链接：https://download.csdn.net/download/tjm1017/12043406。 本文具体实现了： 1.treeView、TableView中间来回拖动改变宽度功能。 2.布局中控件的宽度比例设置。 3.窗口放大拉伸，控件跟...
Meepo云盘客户端下载 Meepo云盘客户端 v1.7.14
11-09
用户体验提升，如界面设计更友好，操作更流畅；可能还修复了一些已知的bug，增强了软件的稳定性。对于用户来说，这意味着更顺畅的使用体验和更高的数据可靠性。 总之，Meepo云盘客户端v1.7.14是一款集数据备份、跨...
Python个人云盘客户端
05-31
总的来说，Python个人云盘客户端的实现融合了Python的网络编程、GUI设计、文件操作和配置管理等多个方面的技术，是一个典型的综合应用案例，对于学习Python开发和云存储服务的开发者具有很高的参考价值。
毕业设计参考-分布式网络云盘项目
最新发布
05-21
毕业设计参考-分布式网络云盘项目 服务端包含技术有： ● MySQL数据库、Redis数据库 ● 分布式FastDFS集群搭建 ● Nginx搭配FastCGI、Nginx搭配FastDFS ● 通过C API操作FastDFS、FastCGI、Redis、MySQL ● 以HTTP的...
最新阿里云盘客户端安装包
06-23
最新阿里云盘客户端安装包
Qt实现简单的文件列表，类似资源管理器的图标浏览。
02-08
1 动态调整scrollarea，增加或取消滚动条 2 递归检索指定路径，获取目录及子目录内所有文件。
云盘个人profile_UI界面设计PSD格式.psd
12-28
云盘个人profile UI界面设计PSD格式 profile、PSD、ui界面设计、云盘、文件、网盘
运用qt制作客户端及服务器页面
tmh_15195862719的博客
08-18 4084
首先，我们可以先在qt里制作一个简单的服务器页面，可以如下图： 对于客户端端口及客户端地址改变该对象的名称，使之与接下来代码中所用的名称相对应。在这里，我将客户端端口的对象名设为portLineEdit,客户端地址的对象名为addressLineEdit； 注意：在写服务器和客户端时需要在.Pro文件中增加network。  接下来在widget.cpp 文件中创建一个服务器对象，为...
QT4.8使用类似windows浏览目录功能
白鱼儿的博客
08-05 243
我们使用getOpenFileName接口就可以实现浏览目录功能。QT中自带了QFileDialog类。实现过滤代码如下，注意参数。
Qt界面开发（各种控件以及图表）
热门推荐
FIGHTING!!!
06-04 1万+
Qt界面开发（各种控件以及图表）1.Qt简洁窗体源代码链接：点击打开链接2.QT漂亮界面源代码链接：点击打开链接3.音乐播放器界面源代码链接：点击打开链接4.六宫格界面源代码链接：点击打开链接5.漂亮通用界面源代码链接：点击打开链接6.净化设备管理源代码链接：点击打开链接7.树形界面通用图源代码链接：点击打开链接8.窗口主框架源代码链接：点击打开链接9.tcp文件传输源代码链接：点击打开链接10....
[QT编程系列-11]：C++图形用户界面编程，QT框架快速入门培训 - 5- QT主要控件与自定义控件
文火冰糖（王文兵）的博客
07-14 1069
在Qt中，有许多预定义的控件（Widgets）可用于创建用户界面。这些控件提供了各种常见的用户界面元素，例如按钮、文本框、列表框等。以下是一些常见的预定义控件：QPushButton：按钮控件，用于触发操作或事件。QLabel：标签控件，用于显示文本或图像。QLineEdit：单行文本框控件，用于接收用户输入的文本。QTextEdit：多行文本框控件，用于接收和显示多行文本。QRadioButton：单选按钮控件，用于选项的单选。QCheckBox：复选框控件，用于选项的多选。
基于qt的图书管理系统----02主界面和登陆设计
混吃等死，研究生在读，毕业无望，偶尔搞点好玩的
02-21 1630
学习记录，开发基于qt的图书管理系统，开发主界面和登陆
Qt编写通用主界面V2019
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
03-13 4691
其实是2018年做出来的这个界面效果，用该界面做了三四个项目，今天抽空特意提取出来单独的demo，集成到了皮肤生成器中。
Qt界面开发（各种控件以及图表）_qt好看的窗体
2401_85014331的博客
05-17 962
(img-QdkezdM4-1715900190354)]33.Led显示以及list列表。34.Qt（动态数据模拟）曲线。19.绘制（平滑与折线）曲线。23.List树形列表界面。11.Qt动态圆形进度条。37.各种Chart例子。15.Widget例子。17.Qt360 界面。24.Ping界面实现。25.脉冲维修工具界面。32.绝对牛逼的计算器。10.综合组件的界面。14.自定义UI演示。20.Tab选项界面。29.Led数字显示。35.Tab飘逸界面。
手把手教你搭建入门级免费私有云盘NAS——基于syncthing——扩展篇
07-27
你好！对于搭建入门级免费私有云盘NAS，基于Syncthing的扩展篇，我可以为你提供一些指导。 首先，你需要确保已经完成了基础篇的搭建，也就是成功安装和配置了Syncthing。接下来，我们可以开始扩展功能。 1. 安装额外的设备：将更多的设备添加到你的私有云盘中。这可以是其他计算机、手机或平板电脑。你只需在每个设备上安装Syncthing，并使用相同的设备ID和共享文件夹配置进行连接。 2. 设置文件版本控制：Syncthing支持文件版本控制，可以方便地恢复之前的文件版本。要启用该功能，你需要在Syncthing的配置文件中添加以下行： ``` <versioning> <type>internal</type> <params> <keep>5</keep> </params> </versioning> ``` 这将使Syncthing保留最近的5个版本。你可以根据需要调整此数字。 3. 添加其他共享文件夹：除了默认的共享文件夹外，你还可以添加其他文件夹进行共享。在Syncthing界面中，点击“添加设备”按钮，然后选择要共享的文件夹。配置共享文件夹的名称和路径后，将其添加到需要访问该文件夹的设备上。 4. 配置高级选项：Syncthing还提供了许多高级选项，例如文件忽略模式、文件冲突解决方案等。你可以在Syncthing的配置文件中进行相应的设置。详细的配置选项可以在Syncthing的官方文档中找到。 这些是扩展你的私有云盘NAS的一些基本步骤。希望对你有所帮助！如果你有进一步的问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值