Qt界面中滑動(dòng)條的實(shí)現(xiàn)方式
Qt界面實(shí)現(xiàn)滑動(dòng)條
功能
在窗體內(nèi)放置一個(gè)滑動(dòng)條slider、一個(gè)spin box增減小控件,一個(gè)設(shè)置中間值的按鈕,一個(gè)將當(dāng)前值通過qQebug打印到編譯器上。使用彈簧和布局使界面更美觀。
效果
Widget.h文件:
#pragma once #include <QtWidgets/QWidget> #include<QSlider> //滑動(dòng)條頭文件 #include<QSpinBox> //增減控件頭文件 #include<QBoxLayout> //界面布局頭文件,包含了水平布局<QHBoxLayout>和垂直布局<QVBoxLayout> #include<QSpacerItem> //彈簧頭文件 #include<QPushButton> //按鈕頭文件 #include<QDebug> //qDebug輸出頭文件 #include "ui_Widget.h" //ui界面 class Widget : public QWidget { Q_OBJECT public: Widget(QWidget *parent = Q_NULLPTR); QSlider *slider; //定義一個(gè)滑動(dòng)條,在cpp文件的構(gòu)建函數(shù)中設(shè)置屬性,下列控件同 QSpinBox *box; //定義一個(gè)增減控件 QSpacerItem *spacer; //彈簧1 QSpacerItem *spacer2; //彈簧2 QPushButton *btn_setMedi; //設(shè)置中間值的按鈕 QPushButton *btn_getValue; //打印當(dāng)前值的按鈕 private: Ui::WidgetClass ui; };
Widget.cpp:
#include "Widget.h" Widget::Widget(QWidget *parent) : QWidget(parent) { ui.setupUi(this); QSpinBox *box = new QSpinBox(this); QSlider *slider = new QSlider(Qt::Horizontal,this); //Qt::Horizontal設(shè)置為水平的滑動(dòng)條 QSpacerItem *spacer = new QSpacerItem(20, 20); //彈簧的w和h為20,20 QSpacerItem *spacer2 = new QSpacerItem(20, 20); QSpacerItem *spacer3 = new QSpacerItem(20, 20); QSpacerItem *spacer4 = new QSpacerItem(20, 20); QPushButton *btn_setMedi = new QPushButton("set median", this); //按鈕文本為“set median” QPushButton *btn_getValue = new QPushButton("get value", this); QHBoxLayout *loyout = new QHBoxLayout;//相當(dāng)于this->setLayout(loyout);定義一個(gè)水平布局 loyout->addItem(spacer); //添加彈簧用addItem loyout->addWidget(box); //添加控件和按鈕用addWidget loyout->addWidget(slider); loyout->addItem(spacer2); QHBoxLayout *btnLayout = new QHBoxLayout; btnLayout->addItem(spacer3); btnLayout->addWidget(btn_setMedi); btnLayout->addWidget(btn_getValue); btnLayout->addItem(spacer4); //垂直布局設(shè)置了this,讓布局依賴在widget上 //前面的兩個(gè)水平布局不用設(shè)置,因?yàn)樗讲季忠蕾囋诹舜怪辈季稚希恍枳钔鈱釉O(shè)置依賴 QVBoxLayout *vloyout = new QVBoxLayout(this); //添加垂直布局,把前面的兩個(gè)水平布局放進(jìn)來 vloyout->addLayout(loyout); vloyout->addLayout(btnLayout); this->setFixedSize(400, 300); //把窗體大小固定 //數(shù)值改變,滑動(dòng)條跟著改變 //函數(shù)QSpinBox::valueChanged出現(xiàn)了函數(shù)重載(int或char),需要定義一個(gè)函數(shù)指針排除二義性 void (QSpinBox:: *box_signal ) (int) = &QSpinBox::valueChanged; connect(box ,box_signal , slider, &QSlider::setValue); //滑動(dòng)條改變,數(shù)值跟著改變 connect(slider, &QSlider::valueChanged, box, &QSpinBox::setValue); //設(shè)置中間值 //使用了Lambda表達(dá)式[](){} connect(btn_setMedi, &QPushButton::clicked, [=]() { slider->setValue(50); }); //打印當(dāng)前值 connect(btn_getValue, &QPushButton::clicked, [=]() { qDebug() << box->value(); }); }
main.cpp:
#include "Widget.h" #include <QtWidgets/QApplication> int main(int argc, char *argv[]) { QApplication a(argc, argv); Widget w; w.show(); return a.exec(); }
Qt滑動(dòng)條解決點(diǎn)擊和拖動(dòng)問題
QSlider 在點(diǎn)擊非滑塊部分時(shí),不會(huì)直接到點(diǎn)擊位置,而是一步一步執(zhí)行,在項(xiàng)目中使用時(shí)會(huì)感覺不流暢。可以通過改變QSlider的鼠標(biāo)點(diǎn)擊事件(mousePressEvent)和鼠標(biāo)移動(dòng)事件(mouseMoveEvent)解決。
使用原QSlider
如UI中使用verticalSlider,MySliderUI.h 頭文件:
class MySliderUI : public QWidget { ? ? Q_OBJECT public: ? ? explicit MySliderUI(QWidget *parent = 0); ? ? ~MySliderUI(); protected: ? ? bool eventFilter(QObject *obj, QEvent *event); private: ? ? Ui::EpsSliderUI *ui; };
MySliderUI.cpp
MySliderUI::MySliderUI(QWidget *parent) : ? ? QWidget(parent) { ? ? ui->slider->installEventFilter(this); }
添加事件過濾,對QSlider的事件重新處理。
bool MySliderUI::eventFilter(QObject *obj, QEvent *event) { ? ? if( obj == ui->slider) ? ? { ? ? ? ? if (event->type() == QEvent::MouseButtonPress) ? ? ? ? { ? ? ? ? ? ? QMouseEvent *mouseEvent = static_cast<QMouseEvent *>(event); ? ? ? ? ? ? if (mouseEvent->button() == Qt::LeftButton) ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ui->slider->event(event); ? ? ? ? ? ? ? ? double pos = mouseEvent->pos().y() / (double)ui->slider->height(); ? ? ? ? ? ? ?? ?int value = ?pos * (ui->slider->maximum() - ui->slider->minimum())? ? ? ? ? ? ? ?? ??? ??? ??? ??? ? ?+ ui->slider->minimum()+0.5; ? ? ? ? ? ? ? ? ui->slider->setValue(value); ? ? ? ? ? ? ? ? return true; ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? else if (event->type() == QEvent::MouseButtonDblClick) ? ? ? ? { ? ? ? ? ? ? return true; ? ? ? ? } ? ? ? ? else if (event->type() == QEvent::MouseMove) ? ? ? ? { ? ? ? ? ? ? QMouseEvent *mouseEvent = static_cast<QMouseEvent *>(event); ? ? ? ? ? ? ui->slider->event(event); ? ? ? ? ? ? double pos = mouseEvent->pos().y() / (double)ui->slider->height(); ? ? ? ? ? ? int value = ?pos * (ui->slider->maximum() - ui->slider->minimum())? ? ? ? ? ? ? ?? ??? ??? ??? ??? ?+ ui->slider->minimum()+0.5; ? ? ? ? ? ? ui->slider->setValue(value); ? ? ? ? ? ? return true; ? ? ? ? } ? ? } ? ? return QObject::eventFilter(obj,event); }
繼承QSlider,重寫事件函數(shù)
頭文件
class MySlider : public QSlider { ? ? Q_OBJECT public: ? ? MySlider(QWidget *parent = nullptr); ? ? ~MySlider(); protected: ? ? void mousePressEvent(QMouseEvent *event); ?//單擊 ? ? void mouseMoveEvent(QMouseEvent *event); };
實(shí)現(xiàn)文件
#include "myslider.h" #include <QMouseEvent> MySlider::MySlider(QWidget *parent) ? ? :QSlider (parent) { } MySlider::~MySlider() { } void MySlider::mousePressEvent(QMouseEvent *event) { ? ? if (event->button() == Qt::LeftButton)?? ?//判斷左鍵 ? ? { ? ? ? ? //注意應(yīng)先調(diào)用父類的鼠標(biāo)點(diǎn)擊處理事件,這樣可以不影響拖動(dòng)的情況 ? ? ? ? QSlider::mousePressEvent(event); ? ? ? ? double pos = ((double)height() - event->pos().y()) / (double)height(); ? ? ? ? int value = pos * (maximum() - minimum()) + minimum(); ? ? ? ? setValue(value); ? ? } } void MySlider::mouseMoveEvent(QMouseEvent *event) { ? ? //注意應(yīng)先調(diào)用父類的鼠標(biāo)點(diǎn)擊處理事件,這樣可以不影響拖動(dòng)的情況 ? ? QSlider::mouseMoveEvent(event); ? ? double pos = ?((double)height() - event->pos().y()) / (double)height(); ? ? int value = pos * (maximum() - minimum()) + minimum(); ? ? setValue(value); }
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
C++基于socket編程實(shí)現(xiàn)聊天室功能
這篇文章主要介紹了C++基于socket編程實(shí)現(xiàn)聊天室功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-07-07C++?二叉樹的實(shí)現(xiàn)超詳細(xì)解析
二叉樹可以簡單理解為對于一個(gè)節(jié)點(diǎn)來說,最多擁有一個(gè)上級節(jié)點(diǎn),同時(shí)最多具備左右兩個(gè)下級節(jié)點(diǎn)的數(shù)據(jù)結(jié)構(gòu)。本文將詳細(xì)介紹一下C++中二叉樹的實(shí)現(xiàn)和遍歷,需要的可以參考一下2022-03-03Qt?TCP網(wǎng)絡(luò)通信學(xué)習(xí)
用于數(shù)據(jù)傳輸?shù)牡蛯泳W(wǎng)絡(luò)協(xié)議,多個(gè)物聯(lián)網(wǎng)協(xié)議都是基于TCP協(xié)議的,這篇文章為大家介紹了Qt?TCP網(wǎng)絡(luò)通信,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08Cocos2d-x學(xué)習(xí)筆記之世界坐標(biāo)系、本地坐標(biāo)系、opengl坐標(biāo)系、屏幕坐標(biāo)系
這篇文章主要介紹了Cocos2d-x學(xué)習(xí)筆記之世界坐標(biāo)系、本地坐標(biāo)系、opengl坐標(biāo)系、屏幕坐標(biāo)系,本文用代碼和注釋講解了Cocos2d-x中的坐標(biāo)體系,需要的朋友可以參考下2014-09-09