61.QT-QScroller實現home介面滑動效果
阿新 • • 發佈:2020-12-19
由於QScroller至少qt5.0以上,如果版本過低,建議去看58.tablewidget模擬手指實現滑動章節,來自定義實現滑動器.
在學習本章之前需要知道滑動的關鍵詞:
- 滑鼠按下,滑鼠滑動 : 指的是使用者按下螢幕,然後進行移動的操作,此時使用者滑動多少距離,那麼檢視就偏移多少距離.
- 平滑滑動 : 指的是手指離開螢幕了,然後會讀取滑動的速率(距離/時間),從而讓檢視自己平滑的再滑動一段距離.
1.QScroller類
用於觸控式螢幕的一個滑動器,實現使用者用手指來滑動檢視,有大量的引數設定可以通過QScrollerProperties設定,它的預設值基於平臺優化值。
2.QScrollerProperties滑動器引數類
QScrollerProperties類儲存QScroller使用到的引數,預設設定與平臺相關,以便Qt模擬平臺行為進行動態滾動。當然也可以由使用者設定引數。
可以設定的引數型別有以下幾種:
QScrollerProperties::MousePressEventDelay //設定滑鼠按下的延遲時間,比如設定按下多少ms後開始真正觸發滑動器. QScrollerProperties::DragStartDistance //設定移動閥值(按下後需要移動最少多少距離後,觸發滑動),用來避免誤操作. QScrollerProperties::DragVelocitySmoothingFactor//平滑滑動速度,當滑動後手離開屏幕後,進行平滑滑動的速度,此值應介於0和1之間。值越小,速度越慢。 QScrollerProperties::DecelerationFactor //減速速度因子,減速到0速度所需的時間。對於大多數型別,該值應在0.1到2.0的範圍內 QScrollerProperties::MinimumVelocity //平滑滑動的最小速度 QScrollerProperties::MaximumVelocity //平滑滑動的最大速度 QScrollerProperties::SnapTime //滾動曲線的時間因子。設定滾動的時長,值越小,滾動時間越長. QScrollerProperties::FrameRate //設定平滑滑動的重新整理頻率,可以設定的值有如下幾種://QScrollerProperties::Fps60 //QScrollerProperties::Fps30 //QScrollerProperties::Fps20 QScrollerProperties::VerticalOvershootPolicy //垂直越區策略
3.表格類的使用示例
程式碼如下所示:
table = new QTableWidget(this); table->setVerticalScrollMode(QAbstractItemView::ScrollPerPixel); this->viewport()->setFixedWidth(widgetWidth); //避免左右晃動 QScroller* scroller = QScroller::scroller(table->viewport()); //也可以填入直接填入table,只是點選滑動條時會無反應. scroller->grabGesture(table->viewport(),QScroller::LeftMouseButtonGesture);//設定左鍵按下後,實現滑動 QScrollerProperties properties = scroller->scrollerProperties(); properties.setScrollMetric(QScrollerProperties::DragVelocitySmoothingFactor,0.3); properties.setScrollMetric(QScrollerProperties::FrameRate,QScrollerProperties::Fps60); scroller->setScrollerProperties(properties);
4.自定義home介面Demo示例
介面如下所示:
當然可以自定義icon列數,寬高,比如橫屏:
滑動效果圖如下所示:
支援介面自定義拖動,效果圖如下所示:
由於我們要使用QScroller,所以需要子類化QTableWidget.ScrollHome.h如下所示:
class ScrollHome : public QTableWidget { Q_OBJECT int iconSize; //圖示大小 QSize itemSize; //包含圖示和字型 int iconSpacing; //圖示之間的間隔 int iconColumn; //圖示列數 QMargins margins; //上下左右邊距 QFont font; QPalette palette; QWidget *parent; QPushButton* newAppButton(QWidget* app,AppRes& appRes); QWidget* newAppIcon(AppRes& appRes); public: explicit ScrollHome(QWidget *parent ); void InitHome(int iconColumn, int iconSpacing, int widgetWidth, int widgetHeight ); int GetIconSize(); signals: void appClicked(AppRes* app); protected slots: void onIcon(); };
其中InitHome()用來初始化整個home用的.newAppIcon()用來初始化每個app圖示用的.函式如下所示:
QWidget* ScrollHome::newAppIcon(AppRes& appRes) { QWidget *app = new QWidget(this); app->setFixedSize(itemSize); QPushButton *btn = newAppButton(app,appRes); btn->move(iconSpacing/2,iconSpacing/2); QLabel *label = new QLabel(appRes.appName,app); label->setFont(font); label->setAlignment(Qt::AlignTop | Qt::AlignHCenter); label->setGeometry(0,iconSize + btn->y()+4,itemSize.width(),itemSize.height()-iconSize - btn->y()); label->setPalette(palette); return app; } void ScrollHome::InitHome(int iconColumn, int iconSpacing, int widgetWidth, int widgetHeight) { this->iconColumn = iconColumn; this->iconSpacing = iconSpacing; this->setFixedSize(widgetWidth, widgetHeight); this->viewport()->setFixedWidth(widgetWidth); iconSize = (widgetWidth - iconSpacing * iconColumn)/iconColumn; font.setPixelSize(iconSize/5.2); itemSize = QSize(iconSize + iconSpacing,iconSize+iconSpacing + font.pixelSize() +10); this->setColumnCount(iconColumn); for(int i = 0; i < iconColumn; ++i) { this->setColumnWidth(i,itemSize.width()); } this->clearContents(); int rowCount = g_appResSize/iconColumn +(g_appResSize%iconColumn==0 ? 0 : 1); this->setRowCount(rowCount); for(int i = 0; i < rowCount; ++i) { for(int j = 0; j < iconColumn; ++j) { int crtIndex = i * iconColumn + j; if(crtIndex >= g_appResSize) break; g_appRes[crtIndex].resIndex = crtIndex; this->setCellWidget(i, j, newAppIcon(g_appRes[crtIndex])); this->setRowHeight(i,itemSize.height()); } } }
初始化完成後,即可通過QScroller進行繫結滑動器.