62. QT qscroller realizes the sliding effect of home interface


Since qscroller is at least above qt5.0, if the version is too low, it is recommended to see it58. Tablewidget simulates finger slidingChapter, customize the implementation slider

Before learning this chapter, you need to know the key words of sliding:

  • Press the mouse and slide the mouse:It refers to that the user presses the screen and then moves it. At this time, the view will be offset by how much distance the user slides
  • Smooth sliding:It means that when the finger leaves the screen, it will read the sliding rate (distance / time), so that the view can slide smoothly for another distance

1. Qscroller class

A slider for the touch screen enables users to slide the view with their fingers. A large number of parameter settings can be set through qscroller properties. Its default value is based on the platform optimization value.


2. Qscrollerproperties slider parameter class

The qscroller properties class stores the parameters used by qscroller. The default settings are platform related, so that QT can simulate the platform behavior for dynamic scrolling. Of course, parameters can also be set by the user.

The following types of parameters can be set:

//Set the delay time of mouse pressing, for example, set the number of ms after pressing to actually trigger the slider

//Set the movement threshold (the minimum distance to be moved after pressing, and then trigger sliding) to avoid misoperation

//Smooth sliding speed: the speed of smooth sliding when the sliding hand leaves the screen. This value should be between 0 and 1. The lower the value, the slower the speed.

//Deceleration speed factor, the time required to decelerate to 0 speed. For most types, the value should be in the range of 0.1 to 2.0
//Minimum speed of smooth sliding
//Maximum speed of smooth sliding
//The time factor of the rolling curve. Set the scrolling time. The smaller the value, the longer the scrolling time
//Set the refresh frequency of smooth sliding. The following values can be set:

//Vertical Handoff Strategy

3. Use examples of table classes

The code is as follows:

table = new QTableWidget(this);
QScroller* scroller = QScroller::scroller(table->viewport()); // You can also fill in the table directly, but there will be no response when you click the slider
QScrollerProperties properties = scroller->scrollerProperties();

4. Custom home interface demo example
The interface is as follows:

Of course, you can customize the number of icon columns, width and height, and the spacing between icons, such as horizontal screen:

The sliding effect diagram is as follows:

Support user-defined dragging of the interface, and the effect diagram is as follows:

Because we want to use qscroller, we need to subclass qtablewidget. Scrollhome. H as follows:

class ScrollHome : public QTableWidget

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

  explicit ScrollHome(QWidget *parent );

  void InitHome(int iconColumn, int iconSpacing, int widgetWidth, int widgetHeight );

  int GetIconSize();

  void appClicked(AppRes* app);

protected slots:
  void onIcon();


Inithome() is used to initialize the whole home, and. Newappicon() is used to initialize each app icon. The functions are as follows:

QWidget* ScrollHome::newAppIcon(AppRes& appRes)
  QWidget *app = new QWidget(this);


  QPushButton *btn = newAppButton(app,appRes);

  QLabel *label = new QLabel(appRes.appName,app);
  label->setAlignment(Qt::AlignTop | Qt::AlignHCenter);
  label->setGeometry(0,iconSize + btn->y()+4,itemSize.width(),itemSize.height()-iconSize - btn->y());

  return app;

void ScrollHome::InitHome(int iconColumn, int iconSpacing, int widgetWidth, int widgetHeight)
  this->iconColumn = iconColumn;
  this->iconSpacing = iconSpacing;
  this->setFixedSize(widgetWidth, widgetHeight);

  iconSize = (widgetWidth - iconSpacing * iconColumn)/iconColumn;
  itemSize = QSize(iconSize + iconSpacing,iconSize+iconSpacing + font.pixelSize() +10);

  for(int i = 0; i < iconColumn; ++i)

  int rowCount = g_appResSize/iconColumn +(g_appResSize%iconColumn==0 ? 0 : 1);

  for(int i = 0; i < rowCount; ++i) {
    for(int j = 0; j < iconColumn; ++j) {

      int crtIndex = i * iconColumn + j;

      if(crtIndex >= g_appResSize)

      g_appRes[crtIndex].resIndex = crtIndex;

      this->setCellWidget(i, j, newAppIcon(g_appRes[crtIndex]));


After initialization, the slider can be bound through qscroller

Link Download:https://download.csdn.net/download/qq_37997682/13729857

Learn the following chapters:63.qt – rewrite qstackedwidget to realize left-right sliding of home interface


Recommended Today

Detailed explanation of how to customize redis command with Lua

preface As a very successful database, redis provides a wealth of data types and commands. Using these, we can easily and efficiently complete many cache operations, but there are always some special problems or needs to be solved. At this time, we may need to customize our own redis data structure and commands. Redis command […]