返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >Qt界面中滑动条的实现方式
  • 896
分享到

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

Qt界面Qt界面滑动条Qt界面实现滑动条 2022-11-13 19:11:46 896人浏览 泡泡鱼
摘要

目录Qt界面实现滑动条功能效果Qt滑动条解决点击和拖动问题使用原QSlider继承QSlider,重写事件函数Qt界面实现滑动条 功能 在窗体内放置一个滑动条slider、一个spi

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);
}

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

--结束END--

本文标题: Qt界面中滑动条的实现方式

本文链接: https://lsjlt.com/news/171233.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Qt界面中滑动条的实现方式
    目录Qt界面实现滑动条功能效果Qt滑动条解决点击和拖动问题使用原QSlider继承QSlider,重写事件函数Qt界面实现滑动条 功能 在窗体内放置一个滑动条slider、一个spi...
    99+
    2022-11-13
    Qt界面 Qt界面滑动条 Qt界面实现滑动条
  • Qt实现界面滑动切换效果的思路详解
    目录一、Qt实现界面滑动切换效果二、 设计思路三、主要函数讲解四、源代码解析4、1 初始化界面4、2 上一页滑动效果4、3  下一页滑动效果4、4 动画结束处理五、源码地址...
    99+
    2024-04-02
  • vue实现界面滑动效果
    本文实例为大家分享了vue实现界面滑动效果的具体代码,供大家参考,具体内容如下 项目需求+效果图 1.项目需求 【点击底部导航栏,切换页面的时候,会有一个滑动的效果】 2.效果图 ...
    99+
    2024-04-02
  • android怎么实现界面滑动
    在Android中,可以使用ScrollView、RecyclerView、ViewPager等控件来实现界面滑动。下面分别介绍这些...
    99+
    2023-08-18
    android
  • Unity实现滑动更换界面效果
    在做2048这个游戏时,因为菜单页面还能查看游戏规则,而这些规则又不在同一个页上,所以需要滑动页面实现页面切换,但是仅仅使用unity提供的组件做出的效果仅有一个切换的意思,交互感很...
    99+
    2024-04-02
  • vue怎么实现界面滑动效果
    本文小编为大家详细介绍“vue怎么实现界面滑动效果”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue怎么实现界面滑动效果”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。项目需求...
    99+
    2024-04-02
  • Qt基于QScrollArea实现界面嵌套移动
    在实际的应用场景中,经常会出现软件界面战场图大于实际窗体大小,利用QScrollArea可以为widget窗体添加滚动条,可以实现小窗体利用滚动条显示大界面需求。实现如下: QT创建...
    99+
    2024-04-02
  • android实现上下左右滑动界面布局
    本文实例为大家分享了android实现滑动界面布局的具体代码,供大家参考,具体内容如下 1.我使用的是ScrollView嵌套HorizontalScrollView让Scro...
    99+
    2022-06-06
    界面 布局 Android
  • Android实现界面左右滑动切换功能
    相信大家一定都使用过手机QQ和微信之类的软件,当我们使用时不难发现其界面的切换不仅可以通过点击页标签来实现,还可以通过左右滑动来实现的,耗子君刚开始学Android时就觉得这样...
    99+
    2022-06-06
    界面 Android
  • Android 实现滑动的六种方式
    目录1、效果视频2、剖析Android坐标系3、实现方式3.1 layout3.2 scrollBy3.3 offsetLeftAndRight offsetTopAndButton...
    99+
    2024-04-02
  • Qt基于QScrollArea如何实现界面嵌套移动
    本篇内容介绍了“Qt基于QScrollArea如何实现界面嵌套移动”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!QT创建一个qWidget界...
    99+
    2023-07-02
  • Android中实现滑动的七种方式总结
    在Android中想要实现实现滑动有很多方法,这篇博客将提供一些实现滑动的思路,希望可以帮助到有需要的人。 一、Android坐标体系 在讲解滑动之前,我们有必要简单提一下A...
    99+
    2022-06-06
    Android
  • Android中实现可滑动的Tab的3种方式
    1. 第一种,使用 TabHost + ViewPager 实现该方法会有一个Bug,当设置tabHost.setCurrentTab()为0时,ViewPager不显示(准确...
    99+
    2022-06-06
    tab Android
  • PYQT5 实现界面的嵌套方式
    新手,因为查阅各种博客太多,有点混,而且也找不到原本的网址了,所以就自己当作笔记记下,以便以后回来查看。 自己比较会的编程语言就只有python了,但是因为老师那边要求做一个桌面应用...
    99+
    2024-04-02
  • Android实现View滑动的几种方式
    什么是View?实现View滑动的方式有哪些? 1. 关于View我们需要知道的 (1)什么是View?     Android中的View类是...
    99+
    2022-06-06
    view Android
  • Android实现View滑动的6种方式
    本文实例为大家分享了Android实现View滑动的具体方法,供大家参考,具体内容如下1.View的滑动简介View的滑动是Android实现自定义控件的基础,同时在开发中我们也难免会遇到View的滑动的处理。其实不管是那种滑动的方式基本思...
    99+
    2023-05-31
    android view 滑动
  • 如何实现漂亮的Qt 登录界面
    本篇文章为大家展示了如何实现漂亮的Qt 登录界面,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。前言最近在使用Qt5,Qt Creator做一个管理系统类的项目,自然需要用到登录界面,故记录...
    99+
    2023-06-21
  • Android实现实时滑动ViewPager的2种方式
    先看看效果图: activity_main.xml  <RelativeLayout xmlns:android="http://schemas.andro...
    99+
    2022-06-06
    viewpager Android
  • 详解Android中实现ListView左右滑动删除条目的方法
    使用Scroller实现绚丽的ListView左右滑动删除Item效果 这里来给大家带来使用Scroller的小例子,同时也能用来帮助初步解除的读者更加熟悉的掌握Scrolle...
    99+
    2022-06-06
    方法 listview Android
  • Slider中怎么实现一个滑动条效果
    本篇文章给大家分享的是有关Slider中怎么实现一个滑动条效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。预览效果1:这个是仿Apple滑动...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作