Можно ли сделать 2-х стороннюю кнопку используя QT?

Question

Я хочу сделать 2-х стороннюю кнопку, что-то вроде рисунка ниже.Когда пользователь наводит указатель мыши, два цвета должны поменяться местами (левый становится красным, правый становится синим).

Пока что я думаю, что я мог бы добавить 2 метки внутри кнопки Q, но это не так.работа кнопки не имеет правильного размера, а эффекты при наведении не работают.

Обратите внимание, что правая сторона должна быть меньше с левой стороны.

Вместо этого я получаю это ...

Вот мой текущий код.

custombutton.h

#ifndef CUSTOMBUTTON_H
#define CUSTOMBUTTON_H

#include <QWidget>

class CustomButton : public QWidget
{
    Q_OBJECT
public:
    explicit CustomButton(QWidget *parent = nullptr);

signals:

public slots:
};

#endif // CUSTOMBUTTON_H

custombutton.cpp

#include "custombutton.h"

#include <QLabel>
#include <QPushButton>

CustomButton::CustomButton(
        QWidget *parent) :
    QWidget(parent)
{
    QPushButton* button = new QPushButton(this);
    button->setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Preferred);
    button->setGeometry(10, 20, geometry().width(), geometry().height());
    button->setCursor(Qt::PointingHandCursor);

    QLabel* left = new QLabel("Left", button);
    QLabel* right = new QLabel("Right", button);

    left->setStyleSheet("QLabel { "
                        "background-color:blue;"
                        "padding: 30px;"
                        "}"
                        "QButton:hover QLabel {"
                        "background-color:red;"
                        "}");
    right->setStyleSheet("QLabel { "
                         "background-color:red;"
                         "padding: 10px;"
                         "}"
                         "QButton:hover QLabel {"
                         "background-color:blue;"
                         "}");

    button->adjustSize();
}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "custombutton.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    CustomButton* custom = new CustomButton(this);
}

MainWindow::~MainWindow()
{
    delete ui;
}

main.cpp

#include "mainwindow.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();

    return a.exec();
}

mainwindow.ui

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>400</width>
    <height>300</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralWidget"/>
 </widget>
 <layoutdefault spacing="6" margin="11"/>
 <resources/>
 <connections/>
</ui>

Answer 1

В первом случае вам нужно реструктурировать класс CustomButton, я не понимаю, почему он наследует от QWidget, будучи способным наследовать непосредственно от QPushButton.

С другой стороны, для обоих QLabel sчтобы занимать равноудаленные части, необходимо использовать QHBoxLayout.

QLabels должно иметь выравнивание Qt::AlignCenter.

qss не может выполнять условия многих уровней, только обрабатывать псевдо-состояния, например, в следующем коде:

"QButton:hover QLabel {"
    "background-color:blue;"
"}" 

QLabel не изменится при вводе мыши в кнопку, даже если QButton исправлено на QPushButton.

Для обработки изменений я буду использовать события enterEvent и leaveEvent.

Если вы хотите, чтобы нужный элемент имел одинаковую ширину, вы всегда должны использовать setFixedWidth().

Код:

custombutton.h

#ifndef CUSTOMBUTTON_H
#define CUSTOMBUTTON_H

#include <QLabel>
#include <QPushButton>

class CustomButton : public QPushButton
{
    Q_OBJECT
public:
    explicit CustomButton(QWidget *parent = nullptr);
protected:
    void enterEvent(QEvent *event);
    void leaveEvent(QEvent *event);
private:
    QLabel left;
    QLabel right;
    const QString leftqss = "QLabel { "
                            "background-color:blue;"
                            "}";
    const QString rightqss = "QLabel { "
                             "background-color:red;"
                             "}";
};


#endif // CUSTOMBUTTON_H

custombutton.cpp

#include "custombutton.h"

#include <QVBoxLayout>

CustomButton::CustomButton(QWidget *parent) : QPushButton(parent)
{
    move(10, 20);
    setCursor(Qt::PointingHandCursor);
    right.setFixedWidth(50);

    left.setText("Left");
    right.setText("Right");
    left.setAlignment(Qt::AlignCenter);
    right.setAlignment(Qt::AlignCenter);

    QHBoxLayout *hlay = new QHBoxLayout(this);

    hlay->addWidget(&left);
    hlay->addWidget(&right);
    hlay->setContentsMargins(0, 0, 0, 0);
    hlay->setSpacing(0);

    left.setStyleSheet(leftqss);
    right.setStyleSheet(rightqss);

    left.adjustSize();
    right.adjustSize();
}

void CustomButton::enterEvent(QEvent *event)
{
    left.setStyleSheet(rightqss);
    right.setStyleSheet(leftqss);
    QPushButton::enterEvent(event);
}

void CustomButton::leaveEvent(QEvent *event)
{
    left.setStyleSheet(leftqss);
    right.setStyleSheet(rightqss);
    QPushButton::leaveEvent(event);
}

главное окно.cpp

...
CustomButton* custom = new CustomButton(this);
// Stable a new width to visualize that the right item always has the same width
custom->resize(200, custom->height()); 
... 

Полный код можно найти по следующей ссылке .