Qt自定義美化滑動條
效果展示
主要代碼
頭文件
下面是hi控件的頭文件，我們繼承一個(gè)Qt原生的滑動條類QSlider，然后在基類的基礎(chǔ)上進(jìn)行自定義，我會對重要的變量進(jìn)行解析：
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()));
}
這段代碼是一個(gè)自定義的Qt滑塊控件XSlider的paintEvent函數(shù)實(shí)現(xiàn)。在這個(gè)函數(shù)中，滑塊的繪制過程改為我們自定義的滑塊，具體邏輯如下：
1.調(diào)用父類繪制: 使用QSlider::paintEvent(ev);來確?；瑝K的基本繪制功能得到執(zhí)行。
2.創(chuàng)建畫家對象: QPainter painter(this);創(chuàng)建一個(gè)繪圖對象，允許在當(dāng)前控件上進(jìn)行繪制。
3.設(shè)置抗鋸齒: painter.setRenderHints(QPainter::Antialiasing);啟用抗鋸齒，使得繪制的文本和形狀更加平滑。
4.初始化樣式選項(xiàng): initStyleOption(&opt);用于獲取當(dāng)前滑塊的樣式選項(xiàng)，這些選項(xià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)前滑塊值以文本形式居中繪制到之前計(jì)算出的矩形區(qū)域內(nèi)。
初始化
顏色初始化，沒有什么好說的，只是要記得初始化一個(gè)好看的配色：
void XSlider::initForm()
{
sliderHeight = 18;
normalColor = QColor("#A0D7DA");
grooveColor = QColor("#22A3A9");
handleBorderColor = QColor("#0E99A0");
handleColor = QColor("#FFFFFF");
textColor = QColor("#000000");
this->setOrientation(Qt::Horizontal);
}
樣式表初始化，這個(gè)很重要，是自定義的滑動條是否好看的決定性因素：
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));
//偏移一個(gè)像素
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ù)實(shí)現(xiàn)，用于初始化和設(shè)置滑塊控件的樣式。通過使用Qt樣式表（QSS），可以自定義滑塊的外觀。下面對代碼進(jìn)行詳細(xì)解釋：
主要步驟解析
1.計(jì)算尺寸參數(shù):
sliderRadius: 計(jì)算滑塊軌道的半徑，通常為滑塊高度的一半。
handleSize: 定義滑塊手柄的大小，根據(jù)滑塊高度計(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.處理垂直方向樣式:
類似于水平方向，對垂直方向上的控件也進(jìn)行了相應(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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
嵌入式C程序優(yōu)質(zhì)編寫全面教程規(guī)范
這是一年前我為公司內(nèi)部寫的一個(gè)文檔，旨在向年輕的嵌入式軟件工程師們介紹如何在裸機(jī)環(huán)境下編寫優(yōu)質(zhì)嵌入式C程序。感覺是有一定的參考價(jià)值，所以拿出來分享，拋磚引玉2022-04-04
C++ 中dynamic_cast<>的使用方法小結(jié)
將一個(gè)基類對象指針（或引用）cast到繼承類指針，dynamic_cast會根據(jù)基類指針是否真正指向繼承類指針來做相應(yīng)處理2013-03-03
這篇文章主要介紹了 C++11智能指針之weak_ptr詳解，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10
這篇文章主要為大家詳細(xì)介紹了C++實(shí)現(xiàn)簡單的掃雷游戲，控制臺版的掃雷游戲希望大家喜歡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
數(shù)據(jù)結(jié)構(gòu)與算法:單向鏈表實(shí)現(xiàn)與封裝
今天小編就為大家分享一篇關(guān)于數(shù)據(jù)結(jié)構(gòu)與算法:單向鏈表實(shí)現(xiàn)與封裝，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了Qt中線程的使用方法，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Qt有一定的幫助，感興趣的小伙伴可以跟隨小編一起了解一下2022-12-12
這篇文章主要為大家詳細(xì)介紹了C語言實(shí)現(xiàn)三子棋（井字棋）算法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要為大家詳細(xì)介紹了C++實(shí)現(xiàn)簡單單向鏈表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了C++中基本的輸入輸出函數(shù)使用指南,是C++入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-09-09
詳解C/C++ Linux出錯(cuò)處理函數(shù)(strerror與perror)的使用
我們知道，系統(tǒng)函數(shù)調(diào)用不能保證每次都成功，必須進(jìn)行出錯(cuò)處理，這樣一方面可以保證程序邏輯正常，另一方面可以迅速得到故障信息。本文主要為大家介紹兩個(gè)出錯(cuò)處理函數(shù)(strerror、perror)的使用，需要的可以參考一下2023-01-01