Qt control UI design QPushbutton, QToolButton, QMenu

Qt control UI design QPushbutton, QToolButton, QMenu

  • Personal design QToolButton effect
    • design effect
    • running result
  • Chapter1 Qt control UI design QPushbutton, QToolButton, QMenu
    • 1.The relationship and difference between QPushbutton and QToolButton:
    • 2.QMenu can cooperate with QPushbutton to make a drop-down menu
    • 3. The function of clicking the button. The toolbutton theme is drawn with UI. Go directly to the slot to write the function you want to achieve.
    • 4. The pushbutton is new. To implement the function of popping up the messagebox when clicked, it requires connect signals and slots.
  • Chapter2 Qt’s QToolButton
    • Brief description
    • A detailed description
    • Common interfaces
    • More references
  • Chapter3 QToolButton usage (very useful)
    • Introduction
  • Chapter4 Use of Qt QToolButton and QListWidget

Personally designed QToolButton effect

Design effect

Operating effect

void MainWindow::btnPopMenuInit()
{<!-- -->
    P_menu = new QMenu(this);
    P_maincontrol = new QAction(tr("main control"),this);
    p_wrjzh = new QAction(tr("drone"),this);
    p_robot = new QAction(tr("robot"),this);
    P_menu->addAction(P_maincontrol);
    P_menu->addAction(p_wrjzh);
    P_menu->addAction(p_robot);
    ui->btn_SetMenu->setMenu(P_menu);

    connect(P_maincontrol, & amp;QAction::triggered, this, & amp;MainWindow::slot_maincontrol);
    connect(p_wrjzh, & amp;QAction::triggered, this, & amp;MainWindow::slot_wrjzh);
    connect(p_robot, & amp;QAction::triggered, this, & amp;MainWindow::slot_robot);
    connect(this, SIGNAL(sig_maincontrol(QString)), this, SLOT(slot_getSig(QString)));

}

void MainWindow::slot_maincontrol()
{<!-- -->
    QMessageBox::information(this, tr("Drop-down menu trigger prompt"), tr("slot_maincontrol menu signal has been triggered"));
    emit sig_maincontrol(tr("Signal trigger"));
}

void MainWindow::slot_wrjzh()
{<!-- -->
    QMessageBox::information(this, tr("Drop-down menu trigger prompt"), tr("slot_wrjzh menu signal has been triggered"));
}

void MainWindow::slot_robot()
{<!-- -->
    QMessageBox::information(this, tr("Drop-down menu trigger prompt"), tr("slot_robot menu signal has been triggered"));
}

void MainWindow::slot_getSig(QString str)
{<!-- -->
    qDebug()<<__FUNCTION__<<str;
}
void MainWindow::on_toolButton_3_clicked()
{<!-- -->
    ui->label_ActionTip->setText(tr("on_toolButton1 clicked"));
    ui->toolButton_2->show(); //toolButton_2 button display
}

void MainWindow::on_toolButton_5_clicked()
{<!-- -->
    ui->label_ActionTip->setText(tr("on_toolButton2 clicked"));
    ui->toolButton_2->hide(); //toolButton_2 button is hidden
}

Chapter1 Qt control UI design QPushbutton, QToolButton, QMenu

Original link: https://blog.csdn.net/jhonsss/article/details/131290420

toolbutton: mostly used in toolbars to provide commands or options. Generally, there is no text on the button. It is used to display icons.

A toolbar similar to the one in Word. . .

pushbutton: It is an ordinary button that can provide text and icons on the button. You can set certain interface styles, etc.

toolButton has more functions than pushbutton.

1. The relationship and difference between QPushbutton and QToolButton:

1. Association: They are all buttons, and they can control the triggering of click events through signal slots.

2. Difference: toolbutton is more special. It can configure shortcut key trigger slots. Generally, only pictures are used as button configurations and placed in the toolbar. Just like the function options of the editing interface in the figure below, it is very simple to use toolbutton.

The following is a button implemented using toolbutton. The reason for choosing toolbutton this time is because it is easy to display text under the icon.

 ui->ToolBtn_one->setGeometry(10,30,100,100);
    ui->ToolBtn_one->setIcon(QIcon(":/logo/images/1.jpg"));
    ui->ToolBtn_one->setIconSize(QSize(46,46));
    ui->ToolBtn_one->setText(QString::fromLocal8Bit("Master Control Load"));
    ui->ToolBtn_one->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);

The effect is as follows:

2.QMenu can be used with QPushbutton to create a drop-down menu

new a pushbutton, new a QMenu, new several QActions, add the action object to the menu object,

Set this pushbutton object to menu form, the code is as follows:

 QPushButton *P_SetMenuBtn = new QPushButton(this);
    P_SetMenuBtn->setGeometry(460,30,100,30);
    P_SetMenuBtn->setText("Joystick selection");
    P_menu = new QMenu(this);
    P_maincontrol = new QAction("main control",this);
    p_wrjzh = new QAction("drone",this);
    p_robot = new QAction("robot",this);
    P_menu->addAction(P_maincontrol);
    P_menu->addAction(p_wrjzh);
    P_menu->addAction(p_robot);
    P_SetMenuBtn->setMenu(P_menu);

The effect is as follows:

3. The function of clicking the button. The toolbutton theme is drawn with UI. Go directly to the slot to write the function you want to achieve

For example, what I want to achieve is to open a Linux terminal:

 ui->ToolBtn_one->setEnabled(false);
        ui->ToolBtn_two->setEnabled(true);
        ui->ToolBtn_three->setEnabled(true);
        QString cmd = "gnome-terminal \\
";
        QProcess start_one;
        start_one.setProcessChannelMode(QProcess::MergedChannels);
        start_one.start("bash");
        start_one.write(cmd.toUtf8());
        start_one.waitForBytesWritten();
        start_one.waitForFinished();
        start_one.closeWriteChannel();
        QString output = start_one.readAll();
        qDebug()<<"output"<<output;

4.pushbutton is new. To realize the function of popping up the messagebox by clicking on it, connect signals and slots are required.

1. Signals and slots: This function of Qt is basically an encapsulation of the C++ callback function. It is more convenient to use than the callback function, but it will sacrifice some performance and will be slower. This is how I understand the parameters of connect: who sends what signal, who you want to send, and what function you want to achieve. It also has a fifth parameter, which is the connection method of signals and slots, which is generally defaulted. For example, if the signal and slot are not in the same thread and the event loop needs to receive the signal, then the default parameter should be Queuedconnection, which I won’t go into details here.

2. This time, a pop-up window function is implemented after clicking the action under the menu. The code is as follows:

connect(P_maincontrol, & amp;QAction::triggered,this, & amp;MainWindow::do_maincontrol);
 
 
void MainWindow::do_maincontrol()
{<!-- -->
    QMessageBox::information(this," ","This is the master remote sensing");
 
    emit ZHchaged();
}

Chapter2 Qt-QToolButton

Brief description

The QToolButton class provides buttons for quick access to commands or options, typically used inside a QToolBar.

Tool buttons are different from ordinary command buttons in that they usually do not display text, but display icons.

Detailed description

Tool buttons are usually created when a new (or existing) QAction is added to the toolbar using QToolBar::addAction(). You can build tool buttons and other widgets and layout them in the same way.

QToolButton supports automatic floating. In automatic floating mode, the three-dimensional frame is drawn only when the mouse points to it. This feature is automatically enabled when the button is used in a QToolBar and can be changed using setAutoRaise().

The appearance and size of the button can be adjusted through setToolButtonStyle() and setIconSize(). When used in a QMainWindow’s QToolBar, the button automatically adjusts to fit the QMainWindow’s settings (see QMainWindow::setToolButtonStyle() and QMainWindow::setIconSize()).

Tool buttons can provide a pop-up menu, which can be set using setMenu(). Use setPopupMode() to set the pop-up mode of the menu. The default mode is DelayedPopupMode. This feature is sometimes useful for the “back” button in web browsers. After pressing the button for a period of time, a pop-up window will pop up showing all the possibilities for back browsing. The menu list of the page has a default delay of 600 milliseconds, which can be adjusted with setPopupDelay().

Common interfaces

  • void setMenu(QMenu * menu)
    Sets the button’s popup menu. The usage is similar to QPushButton. For details, see: Qt’s QPushButton

  • void setPopupMode(ToolButtonPopupMode mode)
    Set the pop-up menu method. By default, it is set to DelayedPopup.

Enum QToolButton::ToolButtonPopupMode:

  • void setToolButtonStyle(Qt::ToolButtonStyle style)
    Set the button style to display only one icon, with the text or text next to or below the icon. The default value is Qt::ToolButtonIconOnly.

Enumeration Qt::ToolButtonStyle:

  • void setArrowType(Qt::ArrowType type)
    Sets whether the button displays an arrow instead of a normal icon. This will display an arrow as the QToolButton’s icon.
    By default, this property is set to Qt::NoArrow.

Enum Qt::ArrowType:

Effect:

QToolButton *pButton = new QToolButton(this);
pButton->setArrowType(Qt::LeftArrow);
pButton->setText("Left Arrow");
// The text is under the icon
pButton->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
pButton->setStyleSheet("QToolButton{border: none; background: rgb(68, 69, 73); color: rgb(0, 160, 230);}");

Here, we can set the color of the icon and text color through the style sheet color.

  • void setDefaultAction(QAction * action)
    Set the default QAction. If there is a default action, the action will define the text, icon, TooTip and other button properties of the QToolButton.
QAction *pAction = new QAction(this);
pAction->setText(QString::fromLocal8Bit("一去丶二三里"));
pAction->setIcon(QIcon(":/Images/logo"));
pButton->setIconSize(QSize(48, 48));
pAction->setToolTip(QString::fromLocal8Bit("Youth is not old, the struggle is endless!"));
pButton->setDefaultAction(pAction);
pButton->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);

More references

Qt’s QAbstractButton

Qt’s QPushButton

Qt’s QCheckBox

QRadioButton in Qt

Chapter3 QToolButton usage (very useful)

Original link: https://blog.csdn.net/kangkanglhb88008/article/details/127119094

Introduction

QToolButton inherits QPushButton (and QPushButton inherits from QAsractButton), so it has all the properties, members, and methods of QPushButton. As can be seen from the design interface, there are only the following four items unique to QToolButton in property settings:

Compared with QPushButton’s unique feature introduction

  1. PopupMode
    //By default, the menu will pop up after a delay.
    setPopupMode(QToolButton::ToolButtonPopupMode) sets the menu popup mode

The parameters are enumeration values as follows:

QToolButton::DelayedPopup //Default value delayed popup

QToolButton::MenuButtonPopup //In this mode, clicking the small arrow on the button will immediately pop up the menu. But the click area is limited to the small arrow area.

QToolButton::InstantPopup //Override the trigger of the button itself. Click the button to pop up the menu
  1. ToolButtonStyle
    There are several display styles
ui->toolButton->setToolButtonStyle(Qt::ToolButtonTextOnly);
Qt::ToolButtonIconOnly only displays the icon
Qt::ToolButtonTextOnly displays text only
Qt::ToolButtonTextBesideIcon text is displayed next to the icon
Qt::ToolButtonTextUnderIcon text is displayed under the icon
Qt::ToolButtonFollowStyle follows QStyle::StyleHint
  1. autoRaise
    This can achieve a flattening effect, and the mouse hover will have an effect. It is good and can be used in many ways.
ui->toolButton->setAutoRaise(true); When this is set, the button's border will be hidden.
  1. arrowType
    There are 3 states
    Several displays of button arrows
setArrowType(Qt::ArrowType type) The default value is no arrow

Qt::NoArrow no arrow

Qt::UpArrow upward arrow

Qt::DownArrow downward arrow

Qt::LeftArrow left arrow

Qt::RightArrow right arrow

Arrow and icon displays are optional

  1. One more triggered(QAction*) signal
    This is to implement the pop-up menu, and then which action we click, the signal is emitted. Note: This aciton is the kind of action we can create on the interface, which is really simple and easy to use. I think this is easy to understand and intuitive. Some people also add actions to buttons through code, and the action sets a listview as a widget. Each listview contains multiple items (each item is an action). I think this is complicated, unintuitive, and unwieldy. Easy to understand.


Button menu usage

QMenu* menu = new QMenu();
menu->addAction("1");
menu->addAction("2");
menu->addAction("3");
ui->toolButton->setMenu(menu);
connect(ui->toolButton, & amp;QToolButton::triggered, [ & amp;](QAction * act)
{<!-- -->
    qDebug() << act>text();
});

Set button default QAction

QAction *action = new QAction(this);
action->setText(u8"action");
action->setToolTip(u8"This is an action");
action->setDefaultAction(pAction);

Others are the same as QPushButton. Therefore, it is good to use this QToolButton more.

Chapter4 Use of Qt QToolButton and QListWidget

Original link