Qt界面中滑动条的实现方式

目录
  • Qt界面实现滑动条
    • 功能
    • 效果
  • Qt滑动条解决点击和拖动问题
    • 使用原QSlider
    • 继承QSlider,重写事件函数

Qt界面实现滑动条

功能

在窗体内放置一个滑动条slider、一个spin box增减小控件,一个设置中间值的按钮,一个将当前值通过qQebug打印到编译器上。使用弹簧和布局使界面更美观。

效果

Widget.h文件:

#pragma once

#include <QtWidgets/QWidget>
#include<QSlider>		//滑动条头文件
#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;		//定义一个滑动条,在cpp文件的构建函数中设置属性,下列控件同
	QSpinBox *box;			//定义一个增减控件

	QSpacerItem *spacer;	//弹簧1
	QSpacerItem *spacer2;	//弹簧2

	QPushButton *btn_setMedi;		//设置中间值的按钮
	QPushButton *btn_getValue;		//打印当前值的按钮

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设置为水平的滑动条

	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;//相当于this->setLayout(loyout);定义一个水平布局
	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);

	//垂直布局设置了this,让布局依赖在widget上
	//前面的两个水平布局不用设置,因为水平布局依赖在了垂直布局上,只需最外层设置依赖
	QVBoxLayout *vloyout = new QVBoxLayout(this);	//添加垂直布局,把前面的两个水平布局放进来
	vloyout->addLayout(loyout);
	vloyout->addLayout(btnLayout);

	this->setFixedSize(400, 300);	//把窗体大小固定

	//数值改变,滑动条跟着改变
	//函数QSpinBox::valueChanged出现了函数重载(int或char),需要定义一个函数指针排除二义性
	void (QSpinBox:: *box_signal ) (int) = &QSpinBox::valueChanged;
	connect(box ,box_signal , slider, &QSlider::setValue);

	//滑动条改变,数值跟着改变
	connect(slider, &QSlider::valueChanged, box, &QSpinBox::setValue);

	//设置中间值
	//使用了Lambda表达式[](){}
	connect(btn_setMedi, &QPushButton::clicked, [=]() {
		slider->setValue(50);
	});

	//打印当前值
	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滑动条解决点击和拖动问题

QSlider 在点击非滑块部分时,不会直接到点击位置,而是一步一步执行,在项目中使用时会感觉不流畅。可以通过改变QSlider的鼠标点击事件(mousePressEvent)和鼠标移动事件(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,重写事件函数

头文件

class MySlider : public QSlider
{
    Q_OBJECT
public:
    MySlider(QWidget *parent = nullptr);
    ~MySlider();

protected:
    void mousePressEvent(QMouseEvent *event);  //单击
    void mouseMoveEvent(QMouseEvent *event);
};

实现文件

#include "myslider.h"
#include <QMouseEvent>

MySlider::MySlider(QWidget *parent)
    :QSlider (parent)
{
}

MySlider::~MySlider()
{
}

void MySlider::mousePressEvent(QMouseEvent *event)
{
    if (event->button() == Qt::LeftButton)    //判断左键
    {
        //注意应先调用父类的鼠标点击处理事件,这样可以不影响拖动的情况
        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)
{
    //注意应先调用父类的鼠标点击处理事件,这样可以不影响拖动的情况
    QSlider::mouseMoveEvent(event);
    double pos =  ((double)height() - event->pos().y()) / (double)height();
    int value = pos * (maximum() - minimum()) + minimum();
    setValue(value);
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Qt基于QScrollArea实现界面嵌套移动

    在实际的应用场景中,经常会出现软件界面战场图大于实际窗体大小,利用QScrollArea可以为widget窗体添加滚动条,可以实现小窗体利用滚动条显示大界面需求.实现如下: QT创建一个qWidget界面 在ui界面中利用QT自带的widget控件布局一个如下图所示的层叠关系,widget_2界面大小需大于widget大小 界面布局好后,将widget_2提升为类,提升之前需为工程新添加一个设计界面类,添加完之后,将widget_2提升为类类名和前面新添加的设计界面类名一致 源码实现如下 pat

  • QT自定义之滑动开关

    本文实例为大家分享了QT自定义之滑动开关的具体代码,供大家参考,具体内容如下 写了一个简单的滑动开关, 不多说,上图: 代码如下: #ifndef SLIDERBUTTON_H #define SLIDERBUTTON_H #include <QWidget> #include <QMouseEvent> #include <QPaintEvent> #include <QPainter> #include <QPen> #include <

  • Qt实现界面滑动切换效果的思路详解

    目录 一.Qt实现界面滑动切换效果 二. 设计思路 三.主要函数讲解 四.源代码解析 4.1 初始化界面 4.2 上一页滑动效果 4.3  下一页滑动效果 4.4 动画结束处理 五.源码地址 一.Qt实现界面滑动切换效果 效果如下图,滑动效果移动上下屏幕. 二. 设计思路 利用QStackWidget将页面存储起来,因为页面比较少,因此我直接将所有的页面存储在QStachWidget中,如果页面相对较多,可以使用使用使渲染的方式. 然后使用show函数同时展示两个页面的内容,这个很重要,如果使用

  • Qt自绘实现苹果按钮滑动效果的示例代码

    用到的类:QTimer,QPaintEvent,QPainter,QRectF 首先,重写绘制事件,需要在头文件加入QPaintEvent头文件,并定义几个变量. bool ison=false; float currentValue; float widthSize,heightSize; 然后加入如下代码: 思路就是鼠标点击,触发paintEvent函数 void MainWindow::mousePressEvent(QMouseEvent *event){ Q_UNUSED(event)

  • Qt界面中滑动条的实现方式

    目录 Qt界面实现滑动条 功能 效果 Qt滑动条解决点击和拖动问题 使用原QSlider 继承QSlider,重写事件函数 Qt界面实现滑动条 功能 在窗体内放置一个滑动条slider.一个spin box增减小控件,一个设置中间值的按钮,一个将当前值通过qQebug打印到编译器上.使用弹簧和布局使界面更美观. 效果 Widget.h文件: #pragma once #include <QtWidgets/QWidget> #include<QSlider> //滑动条头文件 #i

  • Qt如何自定义滑动条

    目录 先放效果图 1.头文件 2.声明 3.构造函数 4.设置样式表 5.重写鼠标点击事件 6.重写鼠标释放事件 7.绘制刻度 8.实际使用 最近要用到滑动条,Qt自带的QSlider虽然能满足需求,但是操作起来有很多不舒服的地方,于是在它的基础上改了改,分享给大家使用. 先放效果图 在QSlider的基础上,改变了样式,绘制了刻度,增加了取整功能,只需要微调就能适应各种需求. 1.头文件 需要包含下面的东西 #include <QSlider> #include <QtCore>

  • Python中Tkinter Scrollbar滚动条(窗口滑动条)

    目录 简介 语法 参数 简介 滚动条小部件用于向下滚顶其他小部件的内容,如列表框,文本和画布,但是,我们也可以为Entry小部件创建水平滚动条,常常被用于实现文本,画布和列表框的滚动 可以配合Text组件,Canvas组,Listbox组件一起使用,水平滚动条还能跟Entry组件配合 语法 D = Scrollbar(top,options) 参数 activebackground 鼠标悬停在滑块和箭头上方时他们的颜色 bg 当鼠标不在滑块和箭头上方时,滑块和箭头的颜色 bd 围绕槽的整个周长的

  • Android实现View滑动的几种方式

    什么是View?实现View滑动的方式有哪些? 1. 关于View我们需要知道的 (1)什么是View? Android中的View类是所有UI控件的基类(Base class),也就是说我们平时所有到的各种UI控件,比如Button.ImagView等等都继承自View类.LinearLayout.FrameLayout等布局管理器的直接父类是ViewGroup,而ViewGroup也有View类派生.总的来说,View是对UI控件的抽象,它代表了屏幕上的一个矩形区域.通过继承View,并重写

  • 高仿网易新闻顶部滑动条效果实现代码

    这个是网易新闻的主界面,我们知道底部可以用tabhost实现,这个很容易,我们在其他软件中也会经常用到. 至于顶部的滑动条,个人感觉还是比较漂亮的所以今天也模仿了下,网易顶部滑动条的效果,由于初次模仿这种效果,可能有些地方还不够完美,不过基本已经实现,希望大家能够喜欢. 废话不多说,下面上代码: 首先是布局layout下的main.xml 复制代码 代码如下: <?xmlversion="1.0"encoding="utf-8"?> <Relati

  • WPF Slider滑动条的颜色修改方法

    效果如下: 鄙人虽然开发WPF有些时间,但之前一直是一些简单Template和Style改改之类的工作,并没有深入研究过.此次为了完成工作,首先也是网上搜了半天,没有找到合适的代码直接拷贝(搜索能力待提高),干脆就直接静下心来琢磨琢磨. 一开始在界面上就放了Slider,挠挠头,怎么修改Template才能达到效果呢?后来想到了Blend,之前一直听说很强大的界面设计工具,但是一直没有用过,就趁此机会就简单运用了一下.Blend中很牛逼的就是编辑模板,通过创建模板副本,可以看到Slider结构

  • python使用Qt界面以及逻辑实现方法

    用过Qt的朋友 特别是QtCreator的习惯在界面UI上面对应的CPP中写代码.但是在PyQt中不是这样的.pyQt只是个界面,只会生成界面即UI,就算是一个按钮也需要在python只自己写.不会想当然的找槽函数自动生成那么简单了. 安装pyQt5 pip3 install pyQt   安装设计器 pip3 install pyQt-tools 打开Qt5tools中的设计器 做一个界面,随便放几个控件 需要处理事件的可以在python中使用Connect 也可以在编辑Siangls/slo

  • layui table去掉右侧滑动条的实现方法

    使用layui table后,table会自动有一个滑动条,使用时需要去掉,原理如下: 定义一个tab的父div id,在这个id中寻找 class为 layui-table-main,layui-form的标签,将高度设置为100%即可. //在layui table加载完成后,重新设置表格高度为100%,不限制表格高度,不会在表格上出现垂直滚动条 function AutoTableHeight() { var dev_obj = document.getElementById('table

  • Qt编写提示进度条的实现示例

    目录 一.前言 二.实现的功能 三.效果图 四.头文件代码 五.核心代码 六.控件介绍 一.前言 我们在很多的安装包中,在安装过程中,经常可以在底部看到一个漂亮的进度条,上面悬浮着显示对应的进度,然后底部进度多种颜色渐变展示,Qt自带的进度条或者操作系统的进度条样式,不够炫,这次索性直接来个自定义绘制实现,至于是继承QWidget类还是QProgressBar类,都无所谓,如果是继承自QWidget类的话,就需要自己设置最大值最小值范围值,而继承自QProgressBar的话就可以直接用自带的函

  • AjaxUI:滑动条

    New Document body{text-align:center;font:12px Arial;} #bg{width:600px;height:20px;background:#099;margin:auto;padding:3px;text-align:left;} #drag{width:20px;height:20px;background:#0ff;} p{width:600px;text-align:left;} var Parameter; var first=true;

随机推荐