Qt自定義美化滑動條

更新時間：2024年11月14日 09:41:24 作者：小獅子安度因

這篇文章主要為大家詳細(xì)介紹了Qt自定義美化滑動條的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

效果展示

主要代碼

頭文件

下面是hi控件的頭文件，我們繼承一個Qt原生的滑動條類QSlider，然后在基類的基礎(chǔ)上進行自定義，我會對重要的變量進行解析：

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

protected:
    void paintEvent(QPaintEvent *ev) override;
    void mousePressEvent(QMouseEvent* ev) override;

private:
    int sliderHeight;
    QColor normalColor;
    QColor grooveColor;
    QColor handleBorderColor;
    QColor handleColor;
    QColor textColor;

private slots:
    void initForm();
    void initStyle();

public:
    int getSliderHeight();
    QColor getNormalColor();
    QColor getGrooveColor();
    QColor getHandleBorderColor();
    QColor getHandleColor();
    QColor getTextColor();

private:
    void setSliderHeight(int& sliderHeight);
    void setNormalColor(QColor& normalColor);
    void setGrooveColor(QColor& grooveColor);
    void setHandleBorderColor(QColor& handleBorderColor);
    void setHandleColor(QColor& handleColor);
    void setTextColor(QColor& textColor);

Q_SIGNALS:
    void clicked();
};

Q_OBJECT：讓類支持信號和槽

normalColor：沒有覆蓋部分的顏色

grooveColor：覆蓋之后的顏色

handleBorderColor：手柄的邊框顏色

handleColor：手柄的顏色

繪制事件 QPaintEvent

void XSlider::paintEvent(QPaintEvent *ev)
{
    // 繪制父類
    QSlider::paintEvent(ev);

    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing);

    QStyleOptionSlider opt;
    initStyleOption(&opt);
    QRect rect = style()->subControlRect(QStyle::CC_Slider, &opt, QStyle::SC_SliderHandle, this);

    int x = rect.x();
    int y = rect.y();
    int width = rect.width();
    int height = rect.height();
    if (width < height) {
        width = height;
    }
    else {
        height = width;
    }

    QFont font;
    font.setPixelSize(width / 2);
    painter.setFont(font);
    painter.drawText(x, y, width, height, Qt::AlignCenter, QString::number(value()));
}

這段代碼是一個自定義的Qt滑塊控件XSlider的paintEvent函數(shù)實現(xiàn)。在這個函數(shù)中，滑塊的繪制過程改為我們自定義的滑塊，具體邏輯如下：

1.調(diào)用父類繪制: 使用QSlider::paintEvent(ev);來確保滑塊的基本繪制功能得到執(zhí)行。

2.創(chuàng)建畫家對象: QPainter painter(this);創(chuàng)建一個繪圖對象，允許在當(dāng)前控件上進行繪制。

3.設(shè)置抗鋸齒: painter.setRenderHints(QPainter::Antialiasing);啟用抗鋸齒，使得繪制的文本和形狀更加平滑。

4.初始化樣式選項: initStyleOption(&opt);用于獲取當(dāng)前滑塊的樣式選項，這些選項會影響后續(xù)的繪制。

5.獲取滑塊句柄矩形區(qū)域:

QRect rect = style()->subControlRect(QStyle::CC_Slider, &opt, QStyle::SC_SliderHandle, this);

通過樣式獲取滑塊句柄的位置和大小。

6.確定寬高一致性: 根據(jù)矩形的寬度和高度，確保它們一致。如果寬度小于高度，就將寬度設(shè)置為高度；反之亦然。這保證了文本在正方形區(qū)域內(nèi)居中顯示。

7.設(shè)置字體大小:

QFont font;
font.setPixelSize(width / 2);
painter.setFont(font);

設(shè)置字體大小為矩形寬度的一半，以便在控件中適當(dāng)顯示數(shù)值。

8.繪制文本:

painter.drawText(x, y, width, height, Qt::AlignCenter, QString::number(value()));

將當(dāng)前滑塊值以文本形式居中繪制到之前計算出的矩形區(qū)域內(nèi)。

初始化

顏色初始化，沒有什么好說的，只是要記得初始化一個好看的配色：

void XSlider::initForm()
{
    sliderHeight = 18;
    normalColor = QColor("#A0D7DA");
    grooveColor = QColor("#22A3A9");
    handleBorderColor = QColor("#0E99A0");
    handleColor = QColor("#FFFFFF");
    textColor = QColor("#000000");

    this->setOrientation(Qt::Horizontal);
}

樣式表初始化，這個很重要，是自定義的滑動條是否好看的決定性因素：

void XSlider::initStyle()
{
    int sliderRadius = sliderHeight / 2;
    int handleSize = (sliderHeight * 3) / 2 + (sliderHeight / 5);
    int handleRadius = handleSize / 2;
    int handleOffset = handleRadius / 2;

    QStringList list;
    int handleWidth = handleSize + sliderHeight / 5 - 1;
    list.append(QString("QSlider::horizontal{min-height:%1px;color:%2;}").arg(sliderHeight * 2).arg(textColor.name()));
    list.append(QString("QSlider::groove:horizontal{background:%1;height:%2px;border-radius:%3px;}")
                .arg(normalColor.name()).arg(sliderHeight).arg(sliderRadius));
    list.append(QString("QSlider::add-page:horizontal{background:%1;height:%2px;border-radius:%3px;}")
                .arg(normalColor.name()).arg(sliderHeight).arg(sliderRadius));
    list.append(QString("QSlider::sub-page:horizontal{background:%1;height:%2px;border-radius:%3px;}")
                .arg(grooveColor.name()).arg(sliderHeight).arg(sliderRadius));
    list.append(QString("QSlider::handle:horizontal{width:%3px;margin-top:-%4px;margin-bottom:-%4px;border-radius:%5px;"
                        "background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.8 %1,stop:0.9 %2);}")
                .arg(handleColor.name()).arg(handleBorderColor.name()).arg(handleWidth).arg(handleOffset).arg(handleRadius));

    //偏移一個像素
    handleWidth = handleSize + sliderHeight / 5;
    list.append(QString("QSlider::vertical{min-width:%1px;color:%2;}").arg(sliderHeight * 2).arg(textColor.name()));
    list.append(QString("QSlider::groove:vertical{background:%1;width:%2px;border-radius:%3px;}")
                .arg(normalColor.name()).arg(sliderHeight).arg(sliderRadius));
    list.append(QString("QSlider::add-page:vertical{background:%1;width:%2px;border-radius:%3px;}")
                .arg(grooveColor.name()).arg(sliderHeight).arg(sliderRadius));
    list.append(QString("QSlider::sub-page:vertical{background:%1;width:%2px;border-radius:%3px;}")
                .arg(normalColor.name()).arg(sliderHeight).arg(sliderRadius));
    list.append(QString("QSlider::handle:vertical{height:%3px;margin-left:-%4px;margin-right:-%4px;border-radius:%5px;"
                        "background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.8 %1,stop:0.9 %2);}")
                .arg(handleColor.name()).arg(handleBorderColor.name()).arg(handleWidth).arg(handleOffset).arg(handleRadius));


    QString qss = list.join("");
    this->setStyleSheet(qss);
}

這段代碼是XSlider類的initStyle()函數(shù)實現(xiàn)，用于初始化和設(shè)置滑塊控件的樣式。通過使用Qt樣式表（QSS），可以自定義滑塊的外觀。下面對代碼進行詳細(xì)解釋：

主要步驟解析

1.計算尺寸參數(shù):

sliderRadius: 計算滑塊軌道的半徑，通常為滑塊高度的一半。

handleSize: 定義滑塊手柄的大小，根據(jù)滑塊高度計算得到。

handleRadius: 手柄半徑，為手柄尺寸的一半。

handleOffset: 手柄偏移量，便于后續(xù)位置調(diào)整。

2.創(chuàng)建樣式列表:

使用QStringList list;來存儲不同狀態(tài)下的樣式字符串。

3.添加水平樣式:

list.append(QString("QSlider::horizontal{min-height:%1px;color:%2;}").arg(sliderHeight * 2).arg(textColor.name()));

- 定義了水平方向上滑塊的最小高度及文本顏色。

4.繪制軌道、增加和減少頁面背景:

list.append(QString("QSlider::groove:horizontal{background:%1;height:%2px;border-radius:%3px;}")
            .arg(normalColor.name()).arg(sliderHeight).arg(sliderRadius));

- 自定義了軌道（groove）、增加頁面（add-page）和減少頁面（sub-page）的背景色、高度以及邊角圓弧。

5自定義手柄樣式:

list.append(QString("QSlider::handle:horizontal{width:%3px;margin-top:-%4px;margin-bottom:-%4px;border-radius:%5px;"
                     "background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.8 %1,stop:0.9 %2);}")
             .arg(handleColor.name()).arg(handleBorderColor.name()).arg(handleWidth).arg(handleOffset).arg(handleRadius));

- 為水平手柄設(shè)置寬度、邊距、圓角，并應(yīng)用徑向漸變作為背景，使其外觀更具層次感。

6.處理垂直方向樣式:

類似于水平方向，對垂直方向上的控件也進行了相應(yīng)的樣式設(shè)定，包括最小寬度、軌道顏色以及手柄等。這一部分代碼與水平部分邏輯相似，但根據(jù)垂直方向調(diào)整了參數(shù)，如寬度和高度等。

7.應(yīng)用樣式表:

最后，將所有收集到的QSS規(guī)則通過以下方式應(yīng)用到當(dāng)前控件：

QString qss = list.join("");
this->setStyleSheet(qss);

到此這篇關(guān)于Qt自定義美化滑動條的文章就介紹到這了,更多相關(guān)Qt美化滑動條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Qt
滑動條

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Qt自定義美化滑動條

目錄

效果展示

主要代碼

頭文件

繪制事件 QPaintEvent

初始化

主要步驟解析

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具