Question

我想制作一个双面按钮，如下图所示。当用户将两种颜色悬停时，应该切换一侧（左侧变为红色，右侧变为蓝色）。

到目前为止，我的想法是我可以在Q PushButton中添加2个标签，但这似乎不起作用，因为按钮尺寸不正确，悬停效果似乎不起作用。

请注意，右侧距离左侧较小。

相反，我得到了这个....

这是我目前的代码。

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占据等距部分，必须使用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);
}

<强> mainwindow.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()); 
...

您可以在以下link中找到完整的代码。

是否可以使用QT制作双面按钮？

1 个答案: