一、前言
记录使用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;
}
效果: