The left tab of the QT-ToolButton custom interface (simple and beautiful)

The left tab of the QT-ToolButton custom interface

1. Effect preview

2. Form initialization

  • Initialize the toolbutton state property, set the support selected state, and the 0th index of the stack window is also selected by default.
  • Add a button pop-up menu, and add some expanded other forms to the expanded button, which is convenient for subsequent tab items to be added.

// initialize the form
void QToolButtonDemo::initForm()
{
   // Set toolbutton selectable state 
   ui.tlbDebug->setCheckable( true );
   ui.tlbExtern->setCheckable(false);
   ui.tlbLog->setCheckable(true);
   ui.tlbParam->setCheckable(true);
   ui.tlbProgram->setCheckable(true);

   // Set the default checked program 
   ui.tlbProgram->setChecked( true );
   ui.stackedWidget->setCurrentIndex(0);

   // Set the extended button menu
   ui.tlbExtern->setPopupMode(QToolButton::InstantPopup);
   auto externMenu = new QMenu(ui.tlbExtern);
   auto controlAction = new QAction(QString::fromLocal8Bit( "Device Control" ), externMenu);
   auto videoAction = new QAction(QString::fromLocal8Bit( "Video monitoring" ), externMenu);
   auto systemCopyAction = new QAction(QString::fromLocal8Bit( "System Backup" ), externMenu);

   // add menu
   externMenu->addAction(controlAction);
   externMenu->addAction(videoAction);
   externMenu->addAction(systemCopyAction);

   // Action signal slot connection
   connect(controlAction, SIGNAL(triggered()), this, SLOT(slotActionShow()));
   connect(videoAction, SIGNAL(triggered()), this, SLOT(slotActionShow()));
   connect(systemCopyAction, SIGNAL(triggered()), this, SLOT(slotActionShow()));
   ui.tlbExtern->setMenu(externMenu);
}

3. Set the key signal connection and key mutual exclusive display

  • The effect of the tab is that one of them is selected, and the others are closed. In order to achieve this effect, we first create a function. When the button object is passed in, the button is selected and the other buttons are cleared. Selected, and the tab switches to the specified window.

// key selection
void QToolButtonDemo::selectToolButton(QToolButton *pTlb)
{
   if (ui.tlbProgram == pTlb)
   {
    ui.stackedWidget->setCurrentIndex(0);
    ui.tlbProgram->setChecked(true);
    ui.tlbDebug->setChecked(false);
    ui.tlbParam->setChecked(false);
    ui.tlbLog->setChecked(false);
    ui.tlbExtern->setChecked(false);

   }
   else if (ui.tlbDebug == pTlb)
   {
    ui.stackedWidget->setCurrentIndex(1);
    ui.tlbProgram->setChecked(false);
    ui.tlbDebug->setChecked(true);
    ui.tlbParam->setChecked(false);
    ui.tlbLog->setChecked(false);
    ui.tlbExtern->setChecked(false);
   }
   else if (ui.tlbParam == pTlb)
   {
    ui.stackedWidget->setCurrentIndex(2);
    ui.tlbProgram->setChecked(false);
    ui.tlbDebug->setChecked(false);
    ui.tlbParam->setChecked(true);
    ui.tlbLog->setChecked(false);
    ui.tlbExtern->setChecked(false);
   }
   else if (ui.tlbLog == pTlb)
   {
    ui.stackedWidget->setCurrentIndex(3);
    ui.tlbProgram->setChecked(false);
    ui.tlbDebug->setChecked(false);
    ui.tlbParam->setChecked(false);
    ui.tlbLog->setChecked(true);
    ui.tlbExtern->setChecked(false);
   }
   else if (ui.tlbExtern == pTlb)
   {
    ui.stackedWidget->setCurrentIndex(4);
    ui.tlbProgram->setChecked(false);
    ui.tlbDebug->setChecked(false);
    ui.tlbParam->setChecked(false);
    ui.tlbLog->setChecked(false);
    ui.tlbExtern->setChecked(true);
   }
}

4. Add qss interface beautification

  • Open the ui interface and add styles directly in the designer. The advantage of this effect is that after each style is added, we can preview the effect of our style. Of course, if there are many interfaces in the software, we will consider it. Load styles directly from a file.
  • All the styles of this demo are as follows

QWidget
{
    border:1px solid #242424;
    border-radius:0px;
    background:#484848;
}

QToolButton
{
    border-style:none;
    border:1px solid #242424;
    color:#DCDCDC;
    padding:5px;
    min-height:15px;
    border-radius:5px;
    background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #484848,stop:1 #383838);
}

QToolButton:hover
{
    background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #646464,stop:1 #525252);
}

QToolButton:pressed
{
    background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #484848,stop:1 #383838);
}

QToolButton::menu-indicator
{
    image:None;
}

QToolButton:checked
{
    background-color: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #FFCC33, stop:1 #FFCC33);
    color:#4D4D4D;
    border-radius:4px;
    border:1px solid #B8B6B6;
}

QMenu 
{
     border-radius:4px;
     background-color:rgb(89,87,87); 
     border: 3px solid rgb(235,110,36);                    
}

QMenu :: items 
{          
     border-radius:4px;         
     font-size: 9pt; 
     color: rgb(225,225,225); 
     border: 3px solid rgb(60,60,60);   
     background-color:rgb(89,87,87);
     padding:12px 12px;
     margin:2px 2px;
}
QMenu::item:selected 
{ 
    border-radius:4px;
    background-color:rgb(235,110,36);
}

QMenu::item:pressed 
{
    background-color: qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #FFCC33, stop:1 #FFCC33);
    color:#4D4D4D;
    border-radius:4px;
    border:1px solid #B8B6B6;
}

  • The way to add icons by button is shown in the figure

5. Key class [header files] and source files

// header file 
# pragma once 
# include  <QtWidgets/QMainWindow>
 # include  "ui_QToolButtonDemo.h"

class QToolButtonDemo : public QMainWindow
{
    Q_OBJECT

public:
    QToolButtonDemo(QWidget *parent = Q_NULLPTR);

private:
    void initForm();
    void signalSlotConnect();
    void selectToolButton(QToolButton *pTlb);

private slots:
    void slotToolButtonProgram();
    void slotToolButtonDebug();
    void slotToolButtonParam();
    void slotToolButtonLog();
    void slotToolButtonExtern();
    void slotActionShow();

private:
    Ui::QToolButtonDemoClass ui;
};

#include "QToolButtonDemo.h"
#include <QMenu>
#include <QAction>
#include <QMessageBox>

QToolButtonDemo::QToolButtonDemo(QWidget *parent)
    : QMainWindow(parent)
{
    ui.setupUi(this);
    initForm();
    signalSlotConnect();
}

// initialize the form
void QToolButtonDemo::initForm()
{
    // Set toolbutton selectable state 
    ui.tlbDebug->setCheckable( true );
    ui.tlbExtern->setCheckable(false);
    ui.tlbLog->setCheckable(true);
    ui.tlbParam->setCheckable(true);
    ui.tlbProgram->setCheckable(true);

    // Set the default checked program 
    ui.tlbProgram->setChecked( true );
    ui.stackedWidget->setCurrentIndex(0);

    // Set the extended button menu
    ui.tlbExtern->setPopupMode(QToolButton::InstantPopup);
    auto externMenu = new QMenu(ui.tlbExtern);
    auto controlAction = new QAction(QString::fromLocal8Bit( "Device Control" ), externMenu);
    auto videoAction = new QAction(QString::fromLocal8Bit( "Video monitoring" ), externMenu);
    auto systemCopyAction = new QAction(QString::fromLocal8Bit( "System Backup" ), externMenu);

    // add menu
    externMenu->addAction(controlAction);
    externMenu->addAction(videoAction);
    externMenu->addAction(systemCopyAction);

    // Action signal slot connection
    connect(controlAction, SIGNAL(triggered()), this, SLOT(slotActionShow()));
    connect(videoAction, SIGNAL(triggered()), this, SLOT(slotActionShow()));
    connect(systemCopyAction, SIGNAL(triggered()), this, SLOT(slotActionShow()));
    ui.tlbExtern->setMenu(externMenu);

}

// signal slot connection
void QToolButtonDemo::signalSlotConnect()
{
    connect(ui.tlbProgram, SIGNAL(clicked()), this, SLOT(slotToolButtonProgram()));
    connect(ui.tlbDebug, SIGNAL(clicked()), this, SLOT(slotToolButtonDebug()));
    connect(ui.tlbExtern, SIGNAL(clicked()), this, SLOT(slotToolButtonExtern()));
    connect(ui.tlbParam, SIGNAL(clicked()), this, SLOT(slotToolButtonParam()));
    connect(ui.tlbLog, SIGNAL(clicked()), this, SLOT(slotToolButtonLog()));
}


void QToolButtonDemo::slotToolButtonProgram()
{
    selectToolButton(ui.tlbProgram);
}

void QToolButtonDemo::slotToolButtonDebug()
{
    selectToolButton(ui.tlbDebug);
}

void QToolButtonDemo::slotToolButtonParam()
{
    selectToolButton(ui.tlbParam);
}

void QToolButtonDemo::slotToolButtonLog()
{
    selectToolButton(ui.tlbLog);
}

void QToolButtonDemo::slotToolButtonExtern()
{
    selectToolButton(ui.tlbExtern);
}

void QToolButtonDemo::slotActionShow()
{
    QMessageBox::information(this, QString::fromLocal8Bit( "Key Menu Demonstration" ), QString::fromLocal8Bit( "Key Selection Trigger" ), QMessageBox::Yes);
}

// key selection
void QToolButtonDemo::selectToolButton(QToolButton *pTlb)
{
    if (ui.tlbProgram == pTlb)
    {
        ui.stackedWidget->setCurrentIndex(0);
        ui.tlbProgram->setChecked(true);
        ui.tlbDebug->setChecked(false);
        ui.tlbParam->setChecked(false);
        ui.tlbLog->setChecked(false);
        ui.tlbExtern->setChecked(false);

    }
    else if (ui.tlbDebug == pTlb)
    {
        ui.stackedWidget->setCurrentIndex(1);
        ui.tlbProgram->setChecked(false);
        ui.tlbDebug->setChecked(true);
        ui.tlbParam->setChecked(false);
        ui.tlbLog->setChecked(false);
        ui.tlbExtern->setChecked(false);
    }
    else if (ui.tlbParam == pTlb)
    {
        ui.stackedWidget->setCurrentIndex(2);
        ui.tlbProgram->setChecked(false);
        ui.tlbDebug->setChecked(false);
        ui.tlbParam->setChecked(true);
        ui.tlbLog->setChecked(false);
        ui.tlbExtern->setChecked(false);
    }
    else if (ui.tlbLog == pTlb)
    {
        ui.stackedWidget->setCurrentIndex(3);
        ui.tlbProgram->setChecked(false);
        ui.tlbDebug->setChecked(false);
        ui.tlbParam->setChecked(false);
        ui.tlbLog->setChecked(true);
        ui.tlbExtern->setChecked(false);
    }
    else if (ui.tlbExtern == pTlb)
    {
        ui.stackedWidget->setCurrentIndex(4);
        ui.tlbProgram->setChecked(false);
        ui.tlbDebug->setChecked(false);
        ui.tlbParam->setChecked(false);
        ui.tlbLog->setChecked(false);
        ui.tlbExtern->setChecked(true);
    }
}

6. Download all code

This demo download link: /download/u013083044/14962734

Leave a Comment

Your email address will not be published. Required fields are marked *