最近在做個小軟體,用到定時提醒功能,定時選擇時間的時候我想到了錘子手機的鬧鐘設定介面,當然這種數字滾動選擇器也是很常見啦,類似下面的效果
參考了
這個大佬的的demo是橫向的,單個數字,數字左右移動切換
還有 這個大佬的效果也是一條數字框,上下切換
借鑑了他們兩個的**,我做了個時鐘選擇器,效果是這樣的
主要思路是先實現一條數字選擇器,然後把他提公升為乙個類,管他叫timeselect;用的時候new兩個timeselect類,new的時候可以把兩個類的父類填成我們想要他顯示的視窗。
**挺多的,我不全貼啦,貼出最主要的,也就是滾動選擇器的**,基本上我都一一注釋了
selectime.h
#ifndef selecttime_h
#define selecttime_h
#include
#include
#include
#include
namespace ui
class
selecttime
:public qwidget
;#endif
// selecttime_h
selectime.cpp
#include
"selecttime.h"
#include
"ui_selecttime.h"
#include
selecttime::
selecttime
(qwidget *parent)
:qwidget
(parent)
,m_minrange(1
),m_maxrange(24
),m_currentvalue(16
),isdragging(0
),m_deviation(0
),m_numsize(6
),ismiddle(0
),ui(
new ui::selecttime)
selecttime::
~selecttime()
//設定範圍
void selecttime::
setrange
(int min,
int max)
repaint()
;//重繪此元件,需要進行重繪時,要使用repaint
}//獲取當前值
int selecttime::
readvalue()
//滑鼠按下事件
void selecttime::
mousepressevent
(qmouseevent *e)
//滑鼠移動事件
void selecttime::
mousemoveevent
(qmouseevent *e)
}//滑鼠鬆開事件
void selecttime::
mousereleaseevent
(qmouseevent *)}
//繪圖事件
void selecttime::
paintevent
(qpaintevent *)if
(m_deviation <=
-height/
5&& m_currentvalue < m_maxrange)
//同理,數字加一
//中間數字
paintnum
(painter,m_currentvalue,m_deviation,ismiddle=1)
;//將選中數字畫到中間
//兩側數字1
if(m_currentvalue != m_minrange)
//選中的數字不是最小,不是最大,那麼就有兩側數字,然後畫出兩側數字
paintnum
(painter,m_currentvalue-
1,m_deviation-height*2/
10,ismiddle=0)
;if(m_currentvalue != m_maxrange)
paintnum
(painter,m_currentvalue+
1,m_deviation+height*2/
10,ismiddle=0)
;//兩側數字2,超出則不顯示
if(m_deviation >=
0&& m_currentvalue-
2>= m_minrange)
paintnum
(painter,m_currentvalue-
2,m_deviation-height*4/
10,ismiddle=0)
;if(m_deviation <=
0&& m_currentvalue+
2<= m_maxrange)
paintnum
(painter,m_currentvalue+
2,m_deviation+height*4/
10,ismiddle=0)
;//畫邊框,中間數字兩側的邊框
painter.
setpen
(qpen
(qcolor(0
,0,0
,120),
2));
painter.
drawline(0
,height/8*
3,width,height/8*
3); painter.
drawline(0
,height/8*
5,width,height/8*
5);}
//畫數字函式
void selecttime::
paintnum
(qpainter &painter,
int num,
int deviation,
bool ismiddle)
else
painter.
drawtext
(qrectf(0
,y,width,height)
,//畫文字,引數:qrectf引數:位置xy,長寬大小;對齊方式,左對齊;內容
qt::aligncenter,
qstring::
number
(num));
}//使選中的數字回到螢幕中間
void selecttime::
homing()
else
if(m_deviation >-(
height()
)/20)
else
if(m_deviation
height()
)/20)
emit currentvaluechanged
(m_currentvalue)
;//傳送當前數值改變訊號
homingani-
>
start()
;//開始動畫
}//獲取滑鼠移動偏移量
int selecttime::
readdeviation()
//設定偏移量
void selecttime::
setdeviation
(int n)
QT 自製控制項 滾動選擇器
因為我需要有連續的數字以供選擇,所以只記了數字範圍。如有需求可以改為用任意線性容器保持資料 self contained.h ifndef selfcontained h define selfcontained h include include include include endif sel...
CSS HTML滾動效果,滾動選擇器
之前看到乙個案例是乙個滾動的效果,是用css和html寫的乙個滾動選擇器,主要是用了css裡面的scroll snap type和scroll snap align他們有不同的引數可以實現不同的效果,小白不太熟悉,需要的話可以去看文件,下面是效果圖 這個是實現的方法,但是那個案例並沒有說如何獲取當前...
css滾動條設定(選擇器)
webkit scrollbar 整個滾動條.webkit scrollbar button 滾動條上的按鈕 上下箭頭 webkit scrollbar thumb 滾動條上的滾動滑塊.webkit scrollbar track 滾動條軌道.webkit scrollbar track piece...