前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >分享按钮栏实现小例子

分享按钮栏实现小例子

作者头像
Qt君
发布2020-06-17 15:27:41
4230
发布2020-06-17 15:27:41
举报
文章被收录于专栏:跟Qt君学编程

实现普通按钮+底部线条组合成的按钮。

实现

  使用QPushButton(按钮)和QLabel(底部线条)组合实现。

  1. 底部线条实现:
代码语言:javascript
复制
class Line : public QLabel {
    Q_OBJECT
public:
    Line(QWidget *parent = NULL) : QLabel(parent) { }

    /* 绘图事件 */
    void paintEvent(QPaintEvent *)
    {
        QPainter painter(this);
        /* 设置画笔 */
        painter.setPen(QPen(Qt::black, height()));
        /* 画线 */
        painter.drawLine(0, 0, width(), 0);
    }
};
  1. 按钮实现:
代码语言:javascript
复制
class Button : public QPushButton {
    Q_OBJECT
public:
    Button(const QString &text, QWidget *parent = NULL) :
        QPushButton(text, parent)
    {
        m_line = new Line(this);
        m_line->setVisible(false);
        QString styleSheet = R"(
                             QPushButton {
                                 border: 0px;
                                 border-radius: 5px;
                                 margin: 0px;
                                 padding: 0px;
                                 font-size: 16px;
                                 background: white;
                                 color: black;
                                 outline: none;
                             }
                             QPushButton:pressed{
                                 outline: none;
                                 background: #1ABC9C;
                                 color: white;
                             }
                             )";
        this->setStyleSheet(styleSheet);
    }

    void focusInEvent(QFocusEvent *)
    {
        /* 焦点进入则显示底部线条 */
        m_line->setVisible(true);
    }

    void focusOutEvent(QFocusEvent *)
    {
        /* 焦点离开则隐藏底部线条 */
        m_line->setVisible(false);
    }

    void resizeEvent(QResizeEvent *event)
    {
        /* 按按钮大小变化时ye也要自动适应其底部线条的大小与位置 */
        m_line->resize(event->size().width()*0.75, 5);
        int lineX = (event->size().width() - m_line->width())/2;
        int lineY = event->size().height() * 0.85;
        m_line->move(lineX, lineY);
    }

private:
    Line *m_line;
};

使用

代码语言:javascript
复制
QHBoxLayout *layout = new QHBoxLayout;
for (int i = 0; i < 5; i++) {
    Button *btn = new Button(QString::fromLocal8Bit("标题") + QString::number(i+1));
    btn->setFixedSize(80, 50);
    layout->addWidget(btn);
}

QWidget w;
w.setWindowTitle(QString::fromLocal8Bit("按钮栏@Qt君"));
w.setLayout(layout);
w.show();

  完整运行源码可以回复"入群",后再群文件获取。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-06-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Qt君 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 实现
  • 使用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档