本文介绍利用QListWidget和QSS样式表制作的一个水平滑动列表的示例。
实现
QListWidget
实现QListWidget *view = new QListWidget;
view->setViewMode(QListView::ListMode);
view->setFlow(QListView::LeftToRight);
view->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
view->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
view->setHorizontalScrollMode(QListWidget::ScrollPerPixel);
QScroller::grabGesture(view,QScroller::LeftMouseButtonGesture);
for (int i = 0; i < 10; i++) {
QListWidgetItem *item = new QListWidgetItem(QString::number(i));
/* 设置文字居中 */
item->setTextAlignment(Qt::AlignCenter);
view->addItem(item);
}
view->setStyleSheet(R"(
QListWidget { outline: none; border:1px solid gray; color: black; }
QListWidget::Item { width: 50px; height: 50px; }
QListWidget::Item:hover { background: #4CAF50; color: white; }
QListWidget::item:selected { background: #e7e7e7; color: #f44336; }
QListWidget::item:selected:!active { background: lightgreen; }
)");
view->show();
#include <QApplication>
#include <QListWidget>
#include <QStringListModel>
#include <QScroller>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QListWidget *view = new QListWidget;
view->setWindowTitle(QString::fromLocal8Bit("ListWidget by Qt君"));
view->resize(QSize(350, 50));
/* 设置为列表显示模式 */
view->setViewMode(QListView::ListMode);
/* 从左往右排列 */
view->setFlow(QListView::LeftToRight);
/* 屏蔽水平滑动条 */
view->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
/* 屏蔽垂直滑动条 */
view->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
/* 设置为像素滚动 */
view->setHorizontalScrollMode(QListWidget::ScrollPerPixel);
/* 设置鼠标左键拖动 */
QScroller::grabGesture(view,QScroller::LeftMouseButtonGesture);
/* 装载数据 */
for (int i = 0; i < 10; i++) {
QListWidgetItem *item = new QListWidgetItem(QString::number(i));
/* 设置文字居中 */
item->setTextAlignment(Qt::AlignCenter);
view->addItem(item);
}
/* 设置样式 */
view->setStyleSheet(R"(
QListWidget { outline: none; border:1px solid gray; color: black; }
QListWidget::Item { width: 50px; height: 50px; }
QListWidget::Item:hover { background: #4CAF50; color: white; }
QListWidget::item:selected { background: #e7e7e7; color: #f44336; }
QListWidget::item:selected:!active { background: lightgreen; }
)");
view->show();
return a.exec();
}