QT滾動數字 滾動選擇器 滑動選擇器

2021-10-04 11:13:39 字數 3812 閱讀 2225

最近在做個小軟體,用到定時提醒功能,定時選擇時間的時候我想到了錘子手機的鬧鐘設定介面,當然這種數字滾動選擇器也是很常見啦,類似下面的效果

參考了 

這個大佬的的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...