一、前言

记录使用QScrollArea控件，实现平板类触摸屏硬件滑动界面效果

二、环境

qt5.7

windows

linux同样支持

三、正文

创建控件：

使用控件QScrollArea创建一个满屏的verticalscrollarea，在里面创建一个widget用垂直布局，并将widget设置最小高度任意长度，超过界面就会出现滚动条，当对界面布局时可以拉动滚动条放置控件，在实际使用触摸屏时，想要滑动效果使用下面语句

    QScroller::grabGesture(ui->scrollArea, QScroller::TouchGesture);//维修建议触摸屏滑动

初始化时使用下面语句可以保证每次进入界面在起始位置，或者可以根据需求设定任意位置

    ui->scrollArea->verticalScrollBar()->setSliderPosition(0);//跳转行到指定位置
    qDebug()<<QString::number(ui->scrollArea->verticalScrollBar()->height());

打印信息为获取当前scrollarea高度。

控件样式：

在QScrollArea样式表设置背景、滑动条等样式

#scrollArea{
border: 2px solid #c3c3c3;
border-radius:15px;
}


QScrollBar:vertical {/*设置滚动条背景*/
    border: none;
    border-radius:10px;
    width: 20px;
    background:rgba(153, 153, 153, 0.5);
    border-image: url(:/icon/tou.png);
}
QScrollBar::handle:vertical {/*设置滑动条*/
    border: none;
    border-radius:10px; 

    background-color: rgb(55, 156, 212);
  }
QScrollBar::sub-line:vertical {
      border: none;
      height: 0px;
      subcontrol-position: top;
      subcontrol-origin: margin;
  }
QScrollBar::add-line:vertical {
      border: none;
      height: 0px;
      subcontrol-position: bottom;
      subcontrol-origin: margin;
  }
  QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
    border:none;
      width: 0px;
      height: 0px;
  }
  QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
      background: none;
  }




QScrollBar:horizontal {/*设置滚动条背景*/
    border: none;
    border-radius:2px;
    height: 20px;
    background:rgba(153, 153, 153, 0.5);
    border-image: url(:/icon/tou.png);
}
QScrollBar::handle:horizontal {/*设置滑动条*/
    border: none;
    border-radius:2px; 

    background-color: rgb(55, 156, 212);
  }
QScrollBar::sub-line:horizontal {
      border: none;
      width: 0px;
      subcontrol-position: left;
      subcontrol-origin: margin;
  }
QScrollBar::add-line:horizontal {
      border: none;
      width: 0px;
      subcontrol-position: right;
      subcontrol-origin: margin;
  }
  QScrollBar::up-arrow:horizontal, QScrollBar::down-arrow:vertical {
    border:none;
      width: 0px;
      height: 0px;
  }
  QScrollBar::add-page:horizontal, QScrollBar::sub-page:vertical {
      background: none;
  }

效果：

四、结语