Qt開源作品14-導航按鈕控件

一、前言

導航按鈕控件，主要用於各種漂亮精美的導航條，我們經常在web中看到導航條都非常精美，都是html+css+js實現的，還自帶動畫過度效果，Qt提供的qss其實也是無敵的，支持基本上所有的CSS2屬性，配合QPainter這個無敵大法工具，沒有什么不能繪制的。這個控件總結了大部分的導航條樣式，比如左側+右側+頂部+底部，線條指示器，倒三角指示器等。還可以在導航條前面加上圖標等，就顯得更加有特色。有了此控件，再也不用擔心沒有精美的導航了。總之這個控件在我的很多的項目中都在用，而且很多Qt界的朋友也在用，反響很熱烈很好。

主要功能：

1. 可設置文字的左側+右側+頂部+底部間隔
2. 可設置文字對齊方式
3. 可設置顯示倒三角/倒三角邊長/倒三角位置/倒三角顏色
4. 可設置顯示圖標/圖標間隔/圖標尺寸/正常狀態圖標/懸停狀態圖標/選中狀態圖標
5. 可設置顯示邊框線條/線條寬度/線條間隔/線條位置/線條顏色
6. 可設置正常背景顏色/懸停背景顏色/選中背景顏色
7. 可設置正常文字顏色/懸停文字顏色/選中文字顏色
8. 可設置背景顏色為畫刷顏色

二、代碼思路

void NavButton::paintEvent(QPaintEvent *)
{
    //繪制准備工作,啟用反鋸齒
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

    //繪制背景
    drawBg(&painter);
    //繪制文字
    drawText(&painter);
    //繪制圖標
    drawIcon(&painter);
    //繪制邊框線條
    drawLine(&painter);
    //繪制倒三角
    drawTriangle(&painter);
}

void NavButton::drawBg(QPainter *painter)
{
    painter->save();
    painter->setPen(Qt::NoPen);

    int width = this->width();
    int height = this->height();

    QRect bgRect;
    if (linePosition == LinePosition_Left) {
        bgRect = QRect(lineSpace, 0, width - lineSpace, height);
    } else if (linePosition == LinePosition_Right) {
        bgRect = QRect(0, 0, width - lineSpace, height);
    } else if (linePosition == LinePosition_Top) {
        bgRect = QRect(0, lineSpace, width, height - lineSpace);
    } else if (linePosition == LinePosition_Bottom) {
        bgRect = QRect(0, 0, width, height - lineSpace);
    }

    //如果畫刷存在則取畫刷
    QBrush bgBrush;
    if (isChecked()) {
        bgBrush = checkBgBrush;
    } else if (hover) {
        bgBrush = hoverBgBrush;
    } else {
        bgBrush = normalBgBrush;
    }

    if (bgBrush != Qt::NoBrush) {
        painter->setBrush(bgBrush);
    } else {
        //根據當前狀態選擇對應顏色
        QColor bgColor;
        if (isChecked()) {
            bgColor = checkBgColor;
        } else if (hover) {
            bgColor = hoverBgColor;
        } else {
            bgColor = normalBgColor;
        }

        painter->setBrush(bgColor);
    }

    painter->drawRect(bgRect);

    painter->restore();
}

void NavButton::drawText(QPainter *painter)
{
    painter->save();
    painter->setBrush(Qt::NoBrush);

    //根據當前狀態選擇對應顏色
    QColor textColor;
    if (isChecked()) {
        textColor = checkTextColor;
    } else if (hover) {
        textColor = hoverTextColor;
    } else {
        textColor = normalTextColor;
    }

    QRect textRect = QRect(paddingLeft, paddingTop, width() - paddingLeft - paddingRight, height() - paddingTop - paddingBottom);
    painter->setPen(textColor);
    painter->drawText(textRect, textAlign | Qt::AlignVCenter, text());

    painter->restore();
}

void NavButton::drawIcon(QPainter *painter)
{
    if (!showIcon) {
        return;
    }

    painter->save();

    QPixmap pix;
    if (isChecked()) {
        pix = iconCheck;
    } else if (hover) {
        pix = iconHover;
    } else {
        pix = iconNormal;
    }

    if (!pix.isNull()) {
        //等比例平滑縮放圖標
        pix = pix.scaled(iconSize, Qt::KeepAspectRatio, Qt::SmoothTransformation);
        painter->drawPixmap(iconSpace, (height() - iconSize.height()) / 2, pix);
    }

    painter->restore();
}

void NavButton::drawLine(QPainter *painter)
{
    if (!showLine) {
        return;
    }

    if (!isChecked()) {
        return;
    }

    painter->save();

    QPen pen;
    pen.setWidth(lineWidth);
    pen.setColor(lineColor);
    painter->setPen(pen);

    //根據線條位置設置線條坐標
    QPoint pointStart, pointEnd;
    if (linePosition == LinePosition_Left) {
        pointStart = QPoint(0, 0);
        pointEnd = QPoint(0, height());
    } else if (linePosition == LinePosition_Right) {
        pointStart = QPoint(width(), 0);
        pointEnd = QPoint(width(), height());
    } else if (linePosition == LinePosition_Top) {
        pointStart = QPoint(0, 0);
        pointEnd = QPoint(width(), 0);
    } else if (linePosition == LinePosition_Bottom) {
        pointStart = QPoint(0, height());
        pointEnd = QPoint(width(), height());
    }

    painter->drawLine(pointStart, pointEnd);

    painter->restore();
}

void NavButton::drawTriangle(QPainter *painter)
{
    if (!showTriangle) {
        return;
    }

    //選中或者懸停顯示
    if (!hover && !isChecked()) {
        return;
    }

    painter->save();
    painter->setPen(Qt::NoPen);
    painter->setBrush(triangleColor);

    //繪制在右側中間,根據設定的倒三角的邊長設定三個點位置
    int width = this->width();
    int height = this->height();
    int midWidth = width / 2;
    int midHeight = height / 2;

    QPolygon pts;
    if (trianglePosition == TrianglePosition_Left) {
        pts.setPoints(3, triangleLen, midHeight, 0, midHeight - triangleLen, 0, midHeight + triangleLen);
    } else if (trianglePosition == TrianglePosition_Right) {
        pts.setPoints(3, width - triangleLen, midHeight, width, midHeight - triangleLen, width, midHeight + triangleLen);
    } else if (trianglePosition == TrianglePosition_Top) {
        pts.setPoints(3, midWidth, triangleLen, midWidth - triangleLen, 0, midWidth + triangleLen, 0);
    } else if (trianglePosition == TrianglePosition_Bottom) {
        pts.setPoints(3, midWidth, height - triangleLen, midWidth - triangleLen, height, midWidth + triangleLen, height);
    }

    painter->drawPolygon(pts);

    painter->restore();
}

三、效果圖

四、開源主頁

以上作品完整源碼下載都在開源主頁，會持續不斷更新作品數量和質量，歡迎各位關注。

1. 國內站點：https://gitee.com/feiyangqingyun/QWidgetDemo
2. 國際站點：https://github.com/feiyangqingyun/QWidgetDemo
3. 個人主頁：https://blog.csdn.net/feiyangqingyun
4. 知乎主頁：https://www.zhihu.com/people/feiyangqingyun/