[QT Network Cloud Disk Client] —— Design da interface da janela principal

Language 2023-10-04 19:26:52 views: null

Índice

1. Projete a interface da janela principal 

 2. Defina a imagem de fundo da janela

3. Personalize a barra de título 

3.1 Defina a imagem do botão de ferramenta 

3.2 Definir tamanho do botão

3.3 Adicione a barra de título personalizada à página principal

 3.4 Remova a barra de título original da janela

 3.5 Definir cor do botão

3.6 Implementação da função de troca de página

4. Design da minha página de arquivo

4.1 Design da barra de menu

4.2 Personalizar barra de menu

4.3 Defina a função de slot no item de menu

 5. Design da janela da lista de compartilhamento

6. Design da janela da lista de transferências

 7. Implementação da função de troca de usuário

Link do código completo

Quando o login for bem-sucedido, o cliente abrirá uma interface principal. As funções desta interface principal são as seguintes:

 

 

1. Projete a interface da janela principal 

1. O tipo de interface principal é definido como o tipo mainwindows, que é um tipo QMainWindow.

2. A interface UI do mainwindows é a seguinte

O widget é usado para exibir uma barra de título personalizada e o stackWidget pode ser usado para exibir várias páginas . 

Adicione 3 páginas ao stackedWidget  , nomeadamente " Meus Arquivos ", " Lista de Compartilhamento" , " Lista de Transferência ", 

Nota: A página recém-adicionada de stackedWidget não pode ser excluída individualmente.

 

 

 2. Defina a imagem de fundo da janela

A janela sem definir a cor de fundo é a seguinte:

 Para definir a cor de fundo, você precisa reescrever o paintEvent e exibir a imagem correspondente com o QPainter.

 ps: Quando a janela for exibida, paintEvent será chamado.



//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();
}

efeito de exibição: 

3. Personalize a barra de título 

Crie um objeto buttongroup , sua interface é uma interface QWidget, adicione vários botões de ferramentas a esta interface e defina as imagens e o texto dos botões.

Perceber

Como segue, a largura no arquivo buttongroup.ui não pode ser maior que a largura das janelas principais.

 

3.1 Defina a imagem do botão de ferramenta 

1. Adicione a imagem correspondente ao  caminho do recurso  e encontre a página de propriedades do botão->ícone->adicionar imagem

Nota: Não adicione imagens à folha de estilos. Se você adicionar imagens à folha de estilos, o texto não poderá ser colocado abaixo da imagem.

2. Defina o texto abaixo da imagem, encontre toolButtonStyle e defina o tipo de botão como ToolButtonTextUnderIcon.

3.2 Definir tamanho do botão

Encontre o valor do atributo do botão. Se o botão for muito pequeno, defina minimizeSize . Se o botão for muito grande, defina MaximumSize.

 

3.3 Adicione a barra de título personalizada à página principal

Clique com o botão direito no QWidget na janela superior das janelas principais e clique no botão "Promover para".

Adicione o nome da classe da janela personalizada, selecione a classe correspondente e clique em Boost.

 

Mostrar janela:

 3.4 Remova a barra de título original da janela

 Adicione código no construtor:

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

 

 3.5 Definir cor do botão

Quando clicamos no botão correspondente, o botão aparecerá em branco e os outros botões aparecerão em preto . 

 Etapas: Defina a função de slot de cada botão . Quando o botão correspondente é clicado, a cor do botão correspondente é definida como branco e a cor dos outros botões é definida como preto .

 


//我的文件按钮的槽函数
//当我们点击 ”我的文件“按钮时,其他按钮的也是这样
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 Implementação da função de troca de página

  • Como buttongroup e QStackWidget são janelas filhas em MainWindow , buttongroup não pode alternar diretamente a interface em QStackWidget .
  • Quando clicamos no botão correspondente no grupo de botões, o grupo de botões enviará o sinal correspondente e a MainWindow mudará a página correspondente de acordo com a função do slot.

 


//我的文件按钮
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 da minha página de arquivo

Personalize um tipo myfile e adicione novos arquivos myfile.h, myfile.cpp, myfile.ui:

texto meuarquivo.ui:

ps: O objeto armazenado por QListWidget é QListWidgetItem . 

 No arquivo mainwindow.ui, selecione uma página em stackedWidget  e promova a página para o tipo myfile

4.1 Design da barra de menu

  1. Quando o mouse clica com o botão direito em uma área em branco da janela , uma barra de menu em branco aparece .
  2. Quando você clica com o botão direito em um arquivo na janela  , a barra de menu do arquivo aparece .

 

concluir:

1. Deixe a janela listWidget usar  setContextMenuPolicy(Qt::CustomContextMenu) para definir a mensagem emitida ao clicar com o botão direito do mouse.

sinal customContextMenuRequested( const QPoint& pos)  , a variável pos é a posição atual do mouse

2. Defina duas barras de menu

 //在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 Personalizar barra de menu

Barra de menu normal: 

Barra de menu personalizada:

 

 1. Personalize uma classe de barra de menu MyMenu e herde esta barra de menu do QMenu

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

2.MyMenu pode usar setStyleSheet para definir o estilo no construtor

3. Os estilos podem ser selecionados na folha de estilos  .

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

4.3 Defina a função de slot no item de menu


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 da janela da lista de compartilhamento

O design da janela da lista compartilhada é exatamente o mesmo do meu arquivo, portanto nenhuma explicação adicional será dada aqui.

6. Design da janela da lista de transferências

Personalize um tipo de transformwidget e adicione novos arquivos transformwidget.h, transformwidget.cpp:

Estrutura da interface do usuário da lista de transferência:

Lista de uploads:

 

 Lista de downloads:

Registro de transmissão:

Digite mainwindow.ui e promova a página correspondente em stackedWidget para transformwidget.

 7. Implementação da função de troca de usuário

Clique no botão Trocar usuário para ir para a interface de login:

1. Defina a função de slot para alternar os botões do usuário e envie um sinal switchPage na função de slot.

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

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

Link do código completo:

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

Acho que você gosta

Origin blog.csdn.net/sjp11/article/details/131777438
Recomendado
Clasificación
Diario
Más
2024-06-14(0)
2024-06-13(0)
2024-06-12(0)
2024-06-11(0)
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)

Code World

© 2018 codetd.com