element.ui-Qt实现之时间控件

最新推荐文章于 2024-09-30 15:25:01 发布
最新推荐文章于 2024-09-30 15:25:01 发布
阅读量4.3k 收藏 13
点赞数 4
分类专栏： Qt自定义组件 文章标签： Qt时分秒组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42174113/article/details/83754402
版权

时分秒滚动控件

废话少说，直入主题，今天我们来实现一个时分秒滚动控件，类似前端组件
element时间控件

Qt实现的时间控件效果，因为不会传动态效果，所以没有滚动效果。

注意本文只介绍了时分秒滚动区域的实现，只是当前日期组件的一部分，整个日期控件在后面的博客中介绍
在这里插入图片描述

  • QScrollTime有三个listview组成，分别是可滚动的时、分、秒区域
QScrollTime::QScrollTime(QWidget *parent, Qt::WindowFlags enumFlags)
	: QFrame(parent, enumFlags)
{
	ui = new Ui::QScrollTime();
	ui->setupUi(this);
	ui->listViewHour->setModel(new QHourModel(this));
	ui->listViewHour->setItemDelegate(new QScrollTimeDelegate(this));
	ui->listViewHour->viewport()->installEventFilter(this);
	ui->listViewHour->setVerticalScrollMode(QAbstractItemView::ScrollPerPixel);
	ui->listViewMinute->setModel(new QMinuteModel(this));
	ui->listViewMinute->setItemDelegate(new QScrollTimeDelegate(this));
	ui->listViewMinute->viewport()->installEventFilter(this);
	ui->listViewMinute->setVerticalScrollMode(QAbstractItemView::ScrollPerPixel);
	ui->listViewSecond->setModel(new QSecondModel(this));
	ui->listViewSecond->setItemDelegate(new QScrollTimeDelegate(this));
	ui->listViewSecond->viewport()->installEventFilter(this);
	ui->listViewSecond->setVerticalScrollMode(QAbstractItemView::ScrollPerPixel);
	ui->frameScroll->setFixedHeight(ITEM_HEIGHT * 5.5);

	setStyleSheet("\
				#frameScroll,#listViewHour,#listViewMinute,#listViewSecond {background:transparent;} \
				#frame {border-top:1px solid #D1D1D1;} \
				#pBScrollCancel{border:none;} \
				#pBScrollConfirm {border:none;color:#58BBE4;} \
				#pBScrollConfirm:hover {color:#79C8E9;} \
				#pBScrollConfirm:pressed {color:#4695B6;}");

	connect(ui->listViewHour, &QListView::clicked, this, &QScrollTime::slotTimeClicked);
	connect(ui->listViewMinute, &QListView::clicked, this, &QScrollTime::slotTimeClicked);
	connect(ui->listViewSecond, &QListView::clicked, this, &QScrollTime::slotTimeClicked);

	//垂直滚动条Value变化---当前时间被调整
	connect(ui->listViewHour->verticalScrollBar(), &QScrollBar::valueChanged, this, &QScrollTime::slotTimeChangedByScorll);
	connect(ui->listViewMinute->verticalScrollBar(), &QScrollBar::valueChanged, this, &QScrollTime::slotTimeChangedByScorll);
	connect(ui->listViewSecond->verticalScrollBar(), &QScrollBar::valueChanged, this, &QScrollTime::slotTimeChangedByScorll);

	connect(ui->pBScrollCancel, &QPushButton::clicked, this, [&](){
		emit this->singalCancelClicked(m_origTime);
		this->hide();
	});
	connect(ui->pBScrollConfirm, &QPushButton::clicked, this, [&](){
		if (!m_origTime.isValid())
		{
			emit this->timeChanged(m_showTime);
		}
		this->hide();
	});

	setContentsMargins(LEFT_SHAWDE,TOP_SHAWDE,RIGHT_SHAWDE,BOTTOM_SHAWDE);
	m_layerRect = QRect(contentsRect().left(), ITEM_HEIGHT * 2.5 + contentsRect().top(), contentsRect().width(), ITEM_HEIGHT);

	setAttribute(Qt::WA_TranslucentBackground, true);
}
  • 初始化时间
void QScrollTime::initTime(const QTime& time)
{
	if (time.isValid())
	{
		m_origTime = time;
		m_showTime = time;
		QTimer::singleShot(0, this, SLOT(slotDelaySetTime())); //这里不能直接滚动，因为此刻还未显示，放到事件循环尾部
	}
	else
	{
		m_showTime = QTime(0, 0, 0);
	}
}

  • 绘制时间区域底色和:号

  • 绘制背景阴影

  • 绘制区域底色

  • 绘制：号

	QPainter painter(this);
	QPixmap pix(":/images/Calendar/timeBorder.png");
	qDrawBorderPixmap(&painter, rect(), QMargins(0, 0, 0, 0), pix);
	painter.fillRect(m_layerRect, QColor(88, 187, 228));
	QRect colon1Rect(ui->listViewHour->width() + m_layerRect.left() - 2, ITEM_HEIGHT * 2.5 + contentsRect().top(), 4, ITEM_HEIGHT - 2);
	QRect colon2Rect(ui->listViewSecond->x() + m_layerRect.left() - 2, ITEM_HEIGHT * 2.5 + contentsRect().top(), 4, ITEM_HEIGHT - 2);
	QPen pen(Qt::white);
	painter.setPen(pen);
	painter.drawText(colon1Rect, Qt::AlignCenter, ":");
	painter.drawText(colon2Rect, Qt::AlignCenter, ":");
  • 过滤在当前时分秒区域鼠标事件
bool QScrollTime::eventFilter(QObject *obj, QEvent *event)
{
	QEvent::Type t = event->type();
	if ((obj == ui->listViewHour->viewport() || obj == ui->listViewMinute->viewport() || obj == ui->listViewSecond->viewport()) \
		&& (t == QEvent::MouseMove || t == QEvent::MouseButtonPress || t == QEvent::MouseButtonRelease || t == QEvent::MouseButtonDblClick))
	{
		QMouseEvent* pMouseEvent = dynamic_cast<QMouseEvent*>(event);
		QPoint pos = pMouseEvent->pos();
		if (m_layerRect.contains(pos))
		{
			return true;
		}	
	}
	return false;
}
  • 时分秒Item被点击后移到中间
void QScrollTime::slotTimeClicked(const QModelIndex &index)
{
	if (QListView* view = qobject_cast<QListView*>(sender()))
	{
		setCenterCoveredRow(view, index.row());
	}	
}
  • 当滚动条变化后，发射时间变化信号
  • 这里有针对滚动超出范围后，微调整滚动条
void QScrollTime::slotTimeChangedByScorll()
{
	bool bTimeChanged = false;
	if (ui->listViewHour->verticalScrollBar() == sender())
	{
		const QModelIndex index = ui->listViewHour->indexAt(ui->listViewHour->viewport()->rect().center());
		if (index.isValid())
		{
			//调整index位置
			QRect indexRect = ui->listViewHour->visualRect(index);
			indexRect.adjust(contentsRect().left(), contentsRect().top(), contentsRect().left(), contentsRect().top());
			if (indexRect != m_layerRect.intersected(indexRect))
			{
				setCenterCoveredRow(ui->listViewHour, index.row());
				return;
			}
			QString value = index.data(Qt::DisplayRole).toString();
			if (!value.isEmpty())
			{
				int hour = value.toInt();
				if (hour != m_showTime.hour())
				{
					bTimeChanged = true;
					m_showTime.setHMS(hour, m_showTime.minute(), m_showTime.second());
				}
			}
		}
	}
	else if (ui->listViewMinute->verticalScrollBar() == sender())
	{
		const QModelIndex index = ui->listViewMinute->indexAt(ui->listViewMinute->viewport()->rect().center());
		if (index.isValid())
		{
			//调整index位置
			QRect indexRect = ui->listViewMinute->visualRect(index);
			indexRect.adjust(contentsRect().left(), contentsRect().top(), contentsRect().left(), contentsRect().top());
			if (indexRect != m_layerRect.intersected(indexRect))
			{
				setCenterCoveredRow(ui->listViewMinute, index.row());
				return;
			}
			QString value = index.data(Qt::DisplayRole).toString();
			if (!value.isEmpty())
			{
				int minu = value.toInt();
				if (minu != m_showTime.minute())
				{
					bTimeChanged = true;
					m_showTime.setHMS(m_showTime.hour(), minu, m_showTime.second());
				}
			}
		}
	}
	else if (ui->listViewSecond->verticalScrollBar() == sender())
	{
		const QModelIndex index = ui->listViewSecond->indexAt(ui->listViewSecond->viewport()->rect().center());
		if (index.isValid())
		{
			//调整index位置
			QRect indexRect = ui->listViewSecond->visualRect(index);
			indexRect.adjust(contentsRect().left(), contentsRect().top(), contentsRect().left(), contentsRect().top());
			if (indexRect != m_layerRect.intersected(indexRect))
			{
				setCenterCoveredRow(ui->listViewSecond, index.row());
				return;
			}
			QString value = index.data(Qt::DisplayRole).toString();
			if (!value.isEmpty())
			{
				int secs = value.toInt();
				if (secs != m_showTime.second())
				{
					bTimeChanged = true;
					m_showTime.setHMS(m_showTime.hour(), m_showTime.minute(), secs);
				}
			}
		}
	}

	if (bTimeChanged)
	{
		emit timeChanged(m_showTime);
	}
}
  • 设置时分秒时，将滚动条值设置
void QScrollTime::slotDelaySetTime()
{
	setCenterCoveredRow(ui->listViewHour, m_origTime.hour() + TOP_SPACEITEM_NUM);
	setCenterCoveredRow(ui->listViewMinute, m_origTime.minute() + TOP_SPACEITEM_NUM);
	setCenterCoveredRow(ui->listViewSecond, m_origTime.second() + TOP_SPACEITEM_NUM);
}

void QScrollTime::setCenterCoveredRow(QListView* view, int row)
{
	if (view == ui->listViewHour)
	{
		ui->listViewHour->verticalScrollBar()->setValue((row - TOP_SPACEITEM_NUM) * ITEM_HEIGHT);
	}
	else if (view == ui->listViewMinute)
	{
		ui->listViewMinute->verticalScrollBar()->setValue((row - TOP_SPACEITEM_NUM) * ITEM_HEIGHT);
	}
	else if (view == ui->listViewSecond)
	{
		ui->listViewSecond->verticalScrollBar()->setValue((row - TOP_SPACEITEM_NUM) * ITEM_HEIGHT);
	}
}
  • 时分秒的Model
enum TimePartValue
{
	HoursOfDay = 24,
	MinutesOfHour = 60,
	SecondsOfMin = 60,
};

class QTimeModel : public QAbstractListModel
{
	Q_OBJECT
protected:
	QTimeModel(TimePartValue v, QObject *parent) : QAbstractListModel(parent), value(v){}
	~QTimeModel() {}
public:
	int rowCount(const QModelIndex &parent = QModelIndex()) const;
	QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const;
	Qt::ItemFlags flags(const QModelIndex &index) const;
private:
	int value;
};

class QHourModel : public QTimeModel
{
	Q_OBJECT

public:
	QHourModel(QObject *parent) : QTimeModel(HoursOfDay, parent){}
	~QHourModel(){}
};

class QMinuteModel : public QTimeModel
{
	Q_OBJECT

public:
	QMinuteModel(QObject *parent) : QTimeModel(MinutesOfHour, parent){}
	~QMinuteModel(){}
};

class QSecondModel : public QTimeModel
{
	Q_OBJECT

public:
	QSecondModel(QObject *parent) : QTimeModel(SecondsOfMin, parent){}
	~QSecondModel(){}
};

.cpp，注意上下有两个空Item，为了给滚动条留空间

int QTimeModel::rowCount(const QModelIndex &parent) const
{ 
	if (parent.isValid())
	{
		return 0;
	}
	return value + TOP_SPACEITEM_NUM + BUTTOM_SPACEITEM_NUM; //上下2空Item
}

QVariant QTimeModel::data(const QModelIndex &index, int role) const
{
	int row = index.row();
	if (Qt::TextAlignmentRole == role)
	{
		return Qt::AlignCenter;
	}
	if (Qt::DisplayRole == role)
	{
		if (row >= TOP_SPACEITEM_NUM && row < value + TOP_SPACEITEM_NUM)
		{
			QString strTime;
			strTime.sprintf("%02d", row - TOP_SPACEITEM_NUM);
			return strTime;
		}
	}
	return QVariant();
}

Qt::ItemFlags QTimeModel::flags(const QModelIndex &index) const
{
	int row = index.row();
	if ((row >= 0 && row < TOP_SPACEITEM_NUM) || row >= value + TOP_SPACEITEM_NUM)
	{
		return 0;
	}

	return QAbstractListModel::flags(index);
}

  • view的delegate，控制View的绘制

  • 注意第二个Item的高度是别的Item一半高度，为了滚动区域顶部显示一半的效果，为什么不用第一个Item呢？ 因为滚动条的singlestep是第一个Item高度，这从QlistView源码得知

QScrollTimeDelegate::QScrollTimeDelegate(QObject *parent)
	: QItemDelegate(parent)
{

}

QScrollTimeDelegate::~QScrollTimeDelegate()
{

}

void QScrollTimeDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
	QString text = index.data(Qt::DisplayRole).toString();
	if (text.isEmpty())
	{
		return;
	}
	painter->save();
	int height = option.widget->height() / 2;
	if (option.rect.y() <= height && option.rect.y() + option.rect.width() >= height)
	{
		QPen pen(Qt::white);
		painter->setPen(pen);
		painter->drawText(option.rect,Qt::AlignCenter,text);
	}
	else
	{
		if (option.state & QStyle::State_MouseOver)
		{
			painter->fillRect(option.rect, QColor(214, 238, 248));
		}
		painter->drawText(option.rect, Qt::AlignCenter, text);
	}
	painter->restore();
}

QSize QScrollTimeDelegate::sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const
{
	if (SCROLLBAR_STEP_BY_INDEX == index.row())
	{
		return QSize(0, ITEM_HEIGHT >> 1);
	}
	return QSize(0, ITEM_HEIGHT);
}
  • 以上用的的宏定义如下
#define CALENDAR_DEFINE_H
#define ITEM_HEIGHT 35
#define TOP_SPACEITEM_NUM 3
#define BUTTOM_SPACEITEM_NUM 2
#define SCROLLBAR_STEP_BY_INDEX 1
#define TOP_SHAWDE 6
#define BOTTOM_SHAWDE 18
#define LEFT_SHAWDE 12
#define RIGHT_SHAWDE 12
87.qt qml-分页组件控件(支持设置任意折叠页数等)
抵抗时间扭曲，坚持做一件有意义的事
05-24 1155
截图如下所示:效果如下所示:未完待续，下章实现Table表格，配合分页控件, 模拟请求服务器数据来实现数据分解效果，因为一般使用分页的时候，一般都是分页请求，避免数据量过多，导致ui卡顿。
qt 定制日期时间控件
11-21
定制QDateTimeEdit控件，采用qt5.9vs版编译，下拉选择年份月份
QT时间控件
u012922277的专栏
01-10 3126
CDateRdit.h #ifndef CDATEEDIT_H #define CDATEEDIT_H #include #include #include #include QT_BEGIN_NAMESPACE class QCalendarWidget; QT_END_NAMESPACE class CCalendarWidget : public QDialo
动态时钟控件：Qt/C++ 项目代码解读
最新发布
专注于 Qt/C++ 应用开发和机器视觉领域的开源项目分享。期待与您共同进步，共同推动行业前沿发展！
09-30 682
基于Qt的动态时钟控件项目。该项目展示了如何通过Qt的绘图系统绘制一个带有表盘背景、时针、分针、秒针、以及时间日期显示的时钟。同时，这个时钟控件支持背景切换，并且每秒钟刷新一次，实时显示当前时间
Qt的时间控件类QDateTimeEdit，QTimeEdit，QDateEdit，QCalendarWidget
simple_core的博客
01-06 7348
Qt的时间控件类QDateTimeEdit，QTimeEdit，QDateEdit，QCalendarWidgetQDateTimeEdit属性datetime：date：time：maximumDateTime、minimumDateTime:maximumDate、minimumDate:maximumTime、minimumTime:currentSection：currentSectionIndex：calendarPopup：displayFormat：用于日期显示的格式符及其意义时间日期转换为字
Qt的日期、时间、日历等控件
weixin_43756295的博客
12-04 1449
Qt的日期、时间、日历等控件
基于Qt的时钟控件
qq_68884672的博客
09-06 613
简单的实现了一个时钟控件，功能比较单调；一、时钟控件是什么？控件是指对数据和方法的封装，而时钟控件就是封装了一个时钟功能的类，可以达到时钟的功能；以上就是简单的时针控件的代码分享，本文仅仅简单实现了一个时钟控件，而和真实的时针有部分差距，后续内容就看大家自由发挥了。
QT漂亮QSS样式模仿流行VUE Element UI QSS漂亮大方美观样式 QSS样式 QTableWidget
06-24
对于使用Qt框架进行桌面应用开发的开发者而言，虽然Qt自带了丰富的UI控件，但追求与现代Web风格如Element UI相匹配的界面效果，无疑能提升应用的美观度和用户满意度。本文将探讨如何通过Qt的样式表（QSS）来模仿...
QT漂亮QSS样式模仿流行VUE Element UI 表单 QSS快速入门 QSS无基础快速开发实战例子 QSS漂亮下料
06-24
QT漂亮QSS样式模仿流行VUE Element UI 表单，QSS漂亮大方美观表单样式 QSS...通过QSS，开发者可以轻松地改变Qt应用中控件的颜色、字体、大小、背景以及更复杂的视觉效果，实现与Element UI类似的现代、清爽的界面风格。
如何使用QSS模仿Element UI风格的QT界面
在本例中，作者尝试将Element UI中流行的表格组件风格应用到Qt应用程序中，通过QSS来实现一个视觉上与Element UI相似的QTableWidget样式。 知识点四：QTableWidget的使用与美化 QTableWidget是Qt中的一个控件，用于...
QSS快速入门：打造Vue Element UI风格的QT表单界面
然而，它也有自己的一些特定属性，例如用于修改控件状态（如：hover、focus、active）的伪类，以及特定于QT控件的一些属性。 7. 部署与调试QSS样式 在部署和调试QSS样式时，开发者可以利用QT提供的样式编辑器工具或...
qt日历控件
05-08
qt5.7.0写的一个简单的日历控件代码
Qt自定义实现的DateTime控件，使用样式对控件进行了美化，并添加了农历的实现，此为源码
05-31
Qt重新自定义实现了日历控件，QCalendarWidget控件的样式表太难设置，且整体背景无法实现外发光的效果，于是重新自定义实现了改控件，并对控件的外观进行了美化，同时添加了农历的实现。使用vs2015或QtCreator都可以打开。
qt 滚动式日期时刻设定控件
01-19
日期时刻设定整合。日历点选日期，时分秒滚动式设定时刻，可鼠标拖动，可滚轮滚动，可鼠标点选。qt5.0
qt实现的滑动设置时间自定义控件
04-03
分享一个Qt实现的滑动设置自定义控件，常用于设置时间，还有一些其他的类似设置； 没有积分的朋友私信我
QT自定义的日期选择控件
07-21
QDateTimeEdit 或 QCalendarWidget 不好操作，美化界面时都比较难实现，很多效果实现不了，就有了想要自定义一个日期选择的控制，操作简单，界面可以结合整体界面的样式通过QSS美化。提供自定义的日期控制源码、demo、qss、可执行的EXE， 在VS2015+ Qt5.12.8编译城功。
QT中的日历组件QCalendarWidget及其他时间日期控件
qq_52137592的博客
06-22 674
QCalendarWidget是Qt中用于显示日历的控件，可以显示一个完整的月份的日历，用户可以选择不同的年份和月份进行查看，用户可通过重写方法自定义日历的外观和行为，以满足特定的应用需求。
Qt之QTimeEdit时间控件
君莫笑的博客
12-28 3688
Qt之QTimeEdit时间控件
Qt自定义DateTime控件--实现日历及时间选择器自定义
热门推荐
slowlytalk
07-06 1万+
怎样能够完全地实现一个不用其他控件就能正常使用的控件。最近尝试了下，使用了Qt的基础控件实现了一个完全自定义的日历控件，顺便改良了一下以前的时间选择器，测试效果还可以。终于实现了自定义的DateTime控件。......
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值