Table of contents
1. Design the main window interface
2. Set the background image of the window
3.3 Add the custom title bar to the main page
3.4 Remove the original title bar of the window
3.6 Implementation of page switching function
4.3 Set the slot function in the menu item
5. Design of sharing list window
6. Design of transfer list window
7. Implementation of user switching function
When the login is successful, the client will pop up a main interface. The functions of this main interface are as follows:
1. Design the main window interface
1. The main interface type is defined as the mainwindows type, which is a QMainWindow type.
2.The UI interface of mainwindows is as follows
The widget is used to display a custom title bar, and the stackWidget can be used to display multiple pages .
Add 3 pages to stackedWidget , namely " My Files ", " Sharing List" , " Transfer List ",
Note: The newly added page of stackedWidget cannot be deleted individually.
2. Set the background image of the window
The window without setting the background color is as follows:
To set the background color, you need to rewrite paintEvent and display the corresponding picture with QPainter.
ps: When the window is displayed, paintEvent will be called.
//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();
}
display effect:
3. Customize the title bar
Create a buttongroup object , its interface is a QWidget interface, add multiple toolbutton buttons to this interface, and set the button pictures and text.
Notice
As follows, the width in the buttongroup.ui file cannot be greater than the width of mainwindows.
3.1 Set the image of the toolbutton button
1. Add the corresponding image to the resource path and find the button's property page->icon->add image
Note: Do not add pictures to the style sheet. If you add pictures to the style sheet, the text cannot be placed under the picture.
2. Set the text below the picture, find toolButtonStyle , and set the button type to ToolButtonTextUnderIcon.
3.2 Set button size
Find the attribute value of the button. If the button is too small, set minimumSize . If the button is too large, set maximumSize.
3.3 Add the custom title bar to the main page
Right-click the QWidget in the top window in mainwindows and click the "Promote to" button.
Add the class name of the custom window, select the corresponding class, and click Boost.
Show window:
3.4 Remove the original title bar of the window
Add code in the constructor:
this->setWindowFlags(Qt::FramelessWindowHint | windowFlags());
3.5 Set button color
When we click the corresponding button, the button will appear white , and the other buttons will appear black .
Steps: Set the slot function of each button . When the corresponding button is clicked, the color of the corresponding button is set to white , and the color of other buttons is set to black .
//我的文件按钮的槽函数
//当我们点击 ”我的文件“按钮时,其他按钮的也是这样
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 Implementation of page switching function
- Since buttongroup and QStackWidget are child windows in MainWindow , buttongroup cannot directly switch the interface in QStackWidget .
- When we click the corresponding button in the buttongroup, the buttongroup will send out the corresponding signal , and the MainWindow will switch the corresponding page according to the slot function.
//我的文件按钮
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. Design of my file page
Customize a myfile type and add new files myfile.h, myfile.cpp, myfile.ui files:
myfile.ui text:
ps: The object stored by QListWidget is QListWidgetItem .
In the mainwindow.ui file, select a page under stackedWidget and promote the page to myfile type
4.1 Design of menu bar
- When the mouse right-clicks on a blank area of the window , a blank menu bar appears .
- When you right- click a file in the window , the file menu bar appears .
accomplish:
1. Let the listWidget window use setContextMenuPolicy(Qt::CustomContextMenu) to set the message issued by right-clicking the mouse.
customContextMenuRequested( const QPoint& pos) signal, the pos variable is the current mouse position
2. Define two menu bars
//在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 Customize menu bar
Normal menu bar:
Custom menu bar:
1. Customize a menu bar class MyMenu and inherit this menu bar from QMenu
#include <QObject>
#include<QMenu>
class MyMenu:public QMenu
{
public:
MyMenu(QWidget* parent=nullptr);
};2.MyMenu can use setStyleSheet to set the style in the constructor
3. Styles can be selected in the style sheet .
//MyMenu.cpp文件
MyMenu::MyMenu(QWidget* parent):QMenu (parent)
{
setStyleSheet("background-color: rgb(101, 255, 245);
font: 9pt \"黑体\";color: rgb(255, 36, 8);");
}
4.3 Set the slot function in the menu item
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. Design of sharing list window
The design of the shared list window is exactly the same as that of my file, so no further explanation will be given here.
6. Design of transfer list window
Customize a transformwidget type and add new files transformwidget.h, transformwidget.cpp:
Transfer list ui structure:
Upload list:
Download list:
Transmission record:
Enter mainwindow.ui and promote the corresponding page under stackedWidget to transformwidget.
7. Implementation of user switching function
Click the Switch User button to jump to the login interface:
1. Set the slot function for switching user buttons and send a switchPage signal in the slot function.
//切换用户按钮
void buttongroup::on_switch_btn_clicked()
{
emit switchPage();
}
//在Dialog设置switchPage的槽函数
connect(mainwindow,&MainWindow::switchUser,this,[=](){
mainwindow->hide();
this->show();
});