Qt/C++开源控件 双层自定义内容按钮

代码讲解

1. 类定义和构造函数：

   #include "MyPushButton.h"MyPushButton::MyPushButton(QWidget *parent): QPushButton(parent) {
   

   这里定义了一个 MyPushButton 类，它继承自 QPushButton。构造函数 MyPushButton::MyPushButton(QWidget *parent) 用于初始化按钮，并将父组件设置为 parent。

2. 标签的创建与布局设置：

       label1 = new QLabel("AAAA", this);label1->setAlignment(Qt::AlignCenter);label2 = new QLabel("aaaaa", this);label2->setAlignment(Qt::AlignCenter);layout = new QVBoxLayout(this);layout->addWidget(label1);layout->addWidget(label2);layout->setAlignment(Qt::AlignCenter);setLayout(layout);
   

   • label1 和 label2 分别是两个 QLabel 标签，用于显示上层和下层的文字内容。
   • label1 的初始内容为 “AAAA”，label2 的初始内容为 “aaaaa”。这些内容可以在初始化时设置为任意值。
   • setAlignment(Qt::AlignCenter) 将标签的文字居中对齐。
   • 使用 QVBoxLayout 布局，将 label1 和 label2 垂直堆叠，并居中显示。
   • 最后，使用 setLayout(layout); 将布局应用到按钮上。

3. 自定义方法 setUpLabCont 和 setDownLabCont：

   void MyPushButton::setUpLabCont(const QString &text, const QString &qss)
   {label1->setText(text);label1->setStyleSheet(qss);
   }void MyPushButton::setDownLabCont(const QString &text, const QString &qss)
   {label2->setText(text);label2->setStyleSheet(qss);
   }
   

   • setUpLabCont 和 setDownLabCont 是两个自定义方法，用于设置上层和下层标签的文本内容和样式。
   • text 参数用于设置标签的文本内容，qss 参数用于设置标签的样式表。
   • 例如，可以通过传入 "font-size: 20px; color: white;" 这样的 qss 样式字符串来控制文字的大小和颜色。

效果讲解

从图片中可以看到，最终效果是一个具有以下特点的按钮：

1. 渐变背景：

   • 按钮的背景色从上到下逐渐加深，呈现从浅蓝色到深蓝色的渐变效果。这个效果可以通过 QPushButton 的 setStyleSheet 方法实现。
   • 渐变背景使按钮更具立体感，模拟了一种反光效果，提升了视觉效果。

2. 双层文字内容：

   • 按钮上显示了两个文字层，上层内容和下层内容。
   • 上层内容在按钮的顶部，字体较大（可以在 setUpLabCont 中设置较大的字体），下层内容在下方，字体相对较小。
   • 这种双层布局使得按钮的信息传达更丰富，适用于需要显示标题和子标题的场景。

3. 圆角效果：

   • 按钮四角带有圆角，使整体视觉效果更加柔和。
   • 圆角使得按钮在界面上看起来不生硬，更符合现代 UI 风格。

4. 样式自定义：

   • 通过 setUpLabCont 和 setDownLabCont 方法，可以动态更改标签的内容和样式。
   • 这意味着您可以在不同情况下调整按钮的内容和样式，而不需要重新定义按钮。

总结

这个按钮项目使用了 QPushButton 和 QLabel 组件，通过自定义的 MyPushButton 类实现了一个带有双层标签、渐变背景和圆角的按钮。布局和样式可以灵活调整，适合展示多层内容的按钮设计。在复杂的 UI 设计中，可以方便地用于不同的场景，例如用于显示标题和说明、主标题和副标题等。

这段代码结构清晰，具有较高的复用性，适合用作具有自定义内容和样式按钮的模板。