├── MuItemDelegate.cpp ├── MuItemDelegate.h ├── MuListItemData.h ├── MuListView.pro ├── MuListView.pro.user ├── Style.qrc ├── Widget.cpp ├── Widget.h ├── Widget.ui ├── images ├── HotDog.jpg ├── PACT.jpg ├── li.jpg ├── logo.jpg ├── yang.jpg └── zhang.jpg ├── imgs.qrc ├── main.cpp └── style.qss /MuItemDelegate.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include "MuItemDelegate.h" 4 | #include "MuListItemData.h" 5 | 6 | MuItemDelegate::MuItemDelegate(QObject *parent) : 7 | QStyledItemDelegate(parent) 8 | { 9 | 10 | } 11 | 12 | void MuItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const 13 | { 14 | if (index.isValid()) { 15 | painter->save(); 16 | QVariant var = index.data(Qt::UserRole+1); 17 | MuItemData itemData = var.value(); 18 | 19 | // item 矩形区域 20 | QRectF rect; 21 | rect.setX(option.rect.x()); 22 | rect.setY(option.rect.y()); 23 | rect.setWidth(option.rect.width()-1); 24 | rect.setHeight(option.rect.height()-1); 25 | 26 | QPainterPath path; 27 | path.moveTo(rect.topRight()); 28 | path.lineTo(rect.topLeft()); 29 | path.quadTo(rect.topLeft(), rect.topLeft()); 30 | path.lineTo(rect.bottomLeft()); 31 | path.quadTo(rect.bottomLeft(), rect.bottomLeft()); 32 | path.lineTo(rect.bottomRight()); 33 | path.quadTo(rect.bottomRight(), rect.bottomRight()); 34 | path.lineTo(rect.topRight()); 35 | path.quadTo(rect.topRight(), rect.topRight()); 36 | 37 | // 鼠标悬停或者选中时改变背景色 38 | if (option.state.testFlag(QStyle::State_MouseOver)) { 39 | painter->setPen(QPen(QColor("#ebeced"))); 40 | painter->setBrush(QColor("#ebeced")); 41 | painter->drawPath(path); 42 | } 43 | if (option.state.testFlag(QStyle::State_Selected)) { 44 | painter->setPen(QPen(QColor("#e3e3e5"))); 45 | painter->setBrush(QColor("#e3e3e5")); 46 | painter->drawPath(path); 47 | } 48 | 49 | // 绘制图片,歌手,数量位置区域 50 | QRectF iconRect = QRect(rect.left()+5, rect.top()+5, 40, 40); 51 | QRectF singerRect = QRect(iconRect.right()+5, iconRect.top(), rect.width()-10-iconRect.width(), 20); 52 | QRectF songNbRect = QRect(singerRect.left(), singerRect.bottom()+5, rect.width()-10-iconRect.width(), 20); 53 | 54 | painter->drawImage(iconRect, QImage(itemData.iconPath)); 55 | painter->setPen(QPen(Qt::black)); 56 | painter->setFont(QFont("Microsoft Yahei", 10)); 57 | painter->drawText(singerRect, itemData.singer); 58 | 59 | painter->setPen(QPen(Qt::gray)); 60 | painter->drawText(songNbRect, itemData.songsNb); 61 | 62 | painter->restore(); 63 | } 64 | } 65 | 66 | QSize MuItemDelegate::sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const 67 | { 68 | Q_UNUSED(index) 69 | return QSize(option.rect.width(), 50); 70 | } 71 | -------------------------------------------------------------------------------- /MuItemDelegate.h: -------------------------------------------------------------------------------- 1 | #ifndef MUITEMDELEGATE_H 2 | #define MUITEMDELEGATE_H 3 | 4 | #include 5 | 6 | class MuItemDelegate : public QStyledItemDelegate 7 | { 8 | public: 9 | MuItemDelegate(QObject *parent = nullptr); 10 | 11 | // painting 12 | void paint(QPainter *painter, 13 | const QStyleOptionViewItem &option, const QModelIndex &index) const Q_DECL_OVERRIDE; 14 | 15 | QSize sizeHint(const QStyleOptionViewItem &option, 16 | const QModelIndex &index) const Q_DECL_OVERRIDE; 17 | }; 18 | 19 | #endif // MUITEMDELEGATE_H 20 | -------------------------------------------------------------------------------- /MuListItemData.h: -------------------------------------------------------------------------------- 1 | #ifndef MULISTITEMDATA_H 2 | #define MULISTITEMDATA_H 3 | 4 | #include 5 | 6 | typedef struct { 7 | QString iconPath; 8 | QString singer; 9 | QString songsNb; 10 | } MuItemData; 11 | 12 | Q_DECLARE_METATYPE(MuItemData) 13 | 14 | #endif // MULISTITEMDATA_H 15 | -------------------------------------------------------------------------------- /MuListView.pro: -------------------------------------------------------------------------------- 1 | #------------------------------------------------- 2 | # 3 | # Project created by QtCreator 2018-11-21T13:19:56 4 | # 5 | #------------------------------------------------- 6 | 7 | QT += core gui 8 | 9 | greaterThan(QT_MAJOR_VERSION, 4): QT += widgets 10 | 11 | TARGET = MuListView 12 | TEMPLATE = app 13 | 14 | # The following define makes your compiler emit warnings if you use 15 | # any feature of Qt which has been marked as deprecated (the exact warnings 16 | # depend on your compiler). Please consult the documentation of the 17 | # deprecated API in order to know how to port your code away from it. 18 | DEFINES += QT_DEPRECATED_WARNINGS 19 | 20 | # You can also make your code fail to compile if you use deprecated APIs. 21 | # In order to do so, uncomment the following line. 22 | # You can also select to disable deprecated APIs only up to a certain version of Qt. 23 | #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0 24 | 25 | 26 | SOURCES += \ 27 | main.cpp \ 28 | Widget.cpp \ 29 | MuItemDelegate.cpp 30 | 31 | HEADERS += \ 32 | Widget.h \ 33 | MuItemDelegate.h \ 34 | MuListItemData.h 35 | 36 | FORMS += \ 37 | Widget.ui 38 | 39 | RESOURCES += \ 40 | Style.qrc \ 41 | imgs.qrc 42 | -------------------------------------------------------------------------------- /MuListView.pro.user: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | EnvironmentId 7 | {d602c0f3-1ca8-4909-adfc-d8499076b22a} 8 | 9 | 10 | ProjectExplorer.Project.ActiveTarget 11 | 0 12 | 13 | 14 | ProjectExplorer.Project.EditorSettings 15 | 16 | true 17 | false 18 | true 19 | 20 | Cpp 21 | 22 | CppGlobal 23 | 24 | 25 | 26 | QmlJS 27 | 28 | QmlJSGlobal 29 | 30 | 31 | 2 32 | UTF-8 33 | false 34 | 4 35 | false 36 | 80 37 | true 38 | true 39 | 1 40 | true 41 | false 42 | 0 43 | true 44 | true 45 | 0 46 | 8 47 | true 48 | 1 49 | true 50 | true 51 | true 52 | false 53 | 54 | 55 | 56 | ProjectExplorer.Project.PluginSettings 57 | 58 | 59 | 60 | ProjectExplorer.Project.Target.0 61 | 62 | Desktop Qt 5.9.6 MinGW 32bit 63 | Desktop Qt 5.9.6 MinGW 32bit 64 | qt.596.win32_mingw53_kit 65 | 0 66 | 0 67 | 0 68 | 69 | E:/projects/test/build-MuListView-Desktop_Qt_5_9_6_MinGW_32bit-Debug 70 | 71 | 72 | true 73 | qmake 74 | 75 | QtProjectManager.QMakeBuildStep 76 | true 77 | 78 | false 79 | false 80 | false 81 | 82 | 83 | true 84 | Make 85 | 86 | Qt4ProjectManager.MakeStep 87 | 88 | false 89 | 90 | 91 | 92 | 2 93 | Build 94 | 95 | ProjectExplorer.BuildSteps.Build 96 | 97 | 98 | 99 | true 100 | Make 101 | 102 | Qt4ProjectManager.MakeStep 103 | 104 | true 105 | clean 106 | 107 | 108 | 1 109 | Clean 110 | 111 | ProjectExplorer.BuildSteps.Clean 112 | 113 | 2 114 | false 115 | 116 | Debug 117 | Debug 118 | Qt4ProjectManager.Qt4BuildConfiguration 119 | 2 120 | true 121 | 122 | 123 | E:/projects/test/build-MuListView-Desktop_Qt_5_9_6_MinGW_32bit-Release 124 | 125 | 126 | true 127 | qmake 128 | 129 | QtProjectManager.QMakeBuildStep 130 | false 131 | 132 | false 133 | false 134 | false 135 | 136 | 137 | true 138 | Make 139 | 140 | Qt4ProjectManager.MakeStep 141 | 142 | false 143 | 144 | 145 | 146 | 2 147 | Build 148 | 149 | ProjectExplorer.BuildSteps.Build 150 | 151 | 152 | 153 | true 154 | Make 155 | 156 | Qt4ProjectManager.MakeStep 157 | 158 | true 159 | clean 160 | 161 | 162 | 1 163 | Clean 164 | 165 | ProjectExplorer.BuildSteps.Clean 166 | 167 | 2 168 | false 169 | 170 | Release 171 | Release 172 | Qt4ProjectManager.Qt4BuildConfiguration 173 | 0 174 | true 175 | 176 | 177 | E:/projects/test/build-MuListView-Desktop_Qt_5_9_6_MinGW_32bit-Profile 178 | 179 | 180 | true 181 | qmake 182 | 183 | QtProjectManager.QMakeBuildStep 184 | true 185 | 186 | false 187 | true 188 | false 189 | 190 | 191 | true 192 | Make 193 | 194 | Qt4ProjectManager.MakeStep 195 | 196 | false 197 | 198 | 199 | 200 | 2 201 | Build 202 | 203 | ProjectExplorer.BuildSteps.Build 204 | 205 | 206 | 207 | true 208 | Make 209 | 210 | Qt4ProjectManager.MakeStep 211 | 212 | true 213 | clean 214 | 215 | 216 | 1 217 | Clean 218 | 219 | ProjectExplorer.BuildSteps.Clean 220 | 221 | 2 222 | false 223 | 224 | Profile 225 | Profile 226 | Qt4ProjectManager.Qt4BuildConfiguration 227 | 0 228 | true 229 | 230 | 3 231 | 232 | 233 | 0 234 | 部署 235 | 236 | ProjectExplorer.BuildSteps.Deploy 237 | 238 | 1 239 | 部署设置 240 | 241 | ProjectExplorer.DefaultDeployConfiguration 242 | 243 | 1 244 | 245 | 246 | false 247 | false 248 | 1000 249 | 250 | true 251 | 252 | false 253 | false 254 | false 255 | false 256 | true 257 | 0.01 258 | 10 259 | true 260 | 1 261 | 25 262 | 263 | 1 264 | true 265 | false 266 | true 267 | valgrind 268 | 269 | 0 270 | 1 271 | 2 272 | 3 273 | 4 274 | 5 275 | 6 276 | 7 277 | 8 278 | 9 279 | 10 280 | 11 281 | 12 282 | 13 283 | 14 284 | 285 | 2 286 | 287 | MuListView 288 | 289 | Qt4ProjectManager.Qt4RunConfiguration:E:/projects/test/MuListView/MuListView.pro 290 | true 291 | 292 | MuListView.pro 293 | false 294 | 295 | E:/projects/test/build-MuListView-Desktop_Qt_5_9_6_MSVC2015_32bit-Debug 296 | 3768 297 | false 298 | true 299 | false 300 | false 301 | true 302 | 303 | 1 304 | 305 | 306 | 307 | ProjectExplorer.Project.Target.1 308 | 309 | Desktop Qt 5.9.6 MSVC2015 32bit 310 | Desktop Qt 5.9.6 MSVC2015 32bit 311 | qt.596.win32_msvc2015_kit 312 | 0 313 | 0 314 | 0 315 | 316 | E:/projects/test/build-MuListView-Desktop_Qt_5_9_6_MSVC2015_32bit-Debug 317 | 318 | 319 | true 320 | qmake 321 | 322 | QtProjectManager.QMakeBuildStep 323 | true 324 | 325 | false 326 | false 327 | false 328 | 329 | 330 | true 331 | Make 332 | 333 | Qt4ProjectManager.MakeStep 334 | 335 | false 336 | 337 | 338 | 339 | 2 340 | Build 341 | 342 | ProjectExplorer.BuildSteps.Build 343 | 344 | 345 | 346 | true 347 | Make 348 | 349 | Qt4ProjectManager.MakeStep 350 | 351 | true 352 | clean 353 | 354 | 355 | 1 356 | Clean 357 | 358 | ProjectExplorer.BuildSteps.Clean 359 | 360 | 2 361 | false 362 | 363 | Debug 364 | Debug 365 | Qt4ProjectManager.Qt4BuildConfiguration 366 | 2 367 | true 368 | 369 | 370 | E:/projects/test/build-MuListView-Desktop_Qt_5_9_6_MSVC2015_32bit-Release 371 | 372 | 373 | true 374 | qmake 375 | 376 | QtProjectManager.QMakeBuildStep 377 | false 378 | 379 | false 380 | false 381 | false 382 | 383 | 384 | true 385 | Make 386 | 387 | Qt4ProjectManager.MakeStep 388 | 389 | false 390 | 391 | 392 | 393 | 2 394 | Build 395 | 396 | ProjectExplorer.BuildSteps.Build 397 | 398 | 399 | 400 | true 401 | Make 402 | 403 | Qt4ProjectManager.MakeStep 404 | 405 | true 406 | clean 407 | 408 | 409 | 1 410 | Clean 411 | 412 | ProjectExplorer.BuildSteps.Clean 413 | 414 | 2 415 | false 416 | 417 | Release 418 | Release 419 | Qt4ProjectManager.Qt4BuildConfiguration 420 | 0 421 | true 422 | 423 | 424 | E:/projects/test/build-MuListView-Desktop_Qt_5_9_6_MSVC2015_32bit-Profile 425 | 426 | 427 | true 428 | qmake 429 | 430 | QtProjectManager.QMakeBuildStep 431 | true 432 | 433 | false 434 | true 435 | false 436 | 437 | 438 | true 439 | Make 440 | 441 | Qt4ProjectManager.MakeStep 442 | 443 | false 444 | 445 | 446 | 447 | 2 448 | Build 449 | 450 | ProjectExplorer.BuildSteps.Build 451 | 452 | 453 | 454 | true 455 | Make 456 | 457 | Qt4ProjectManager.MakeStep 458 | 459 | true 460 | clean 461 | 462 | 463 | 1 464 | Clean 465 | 466 | ProjectExplorer.BuildSteps.Clean 467 | 468 | 2 469 | false 470 | 471 | Profile 472 | Profile 473 | Qt4ProjectManager.Qt4BuildConfiguration 474 | 0 475 | true 476 | 477 | 3 478 | 479 | 480 | 0 481 | 部署 482 | 483 | ProjectExplorer.BuildSteps.Deploy 484 | 485 | 1 486 | 部署设置 487 | 488 | ProjectExplorer.DefaultDeployConfiguration 489 | 490 | 1 491 | 492 | 493 | false 494 | false 495 | 1000 496 | 497 | true 498 | 499 | false 500 | false 501 | false 502 | false 503 | true 504 | 0.01 505 | 10 506 | true 507 | 1 508 | 25 509 | 510 | 1 511 | true 512 | false 513 | true 514 | valgrind 515 | 516 | 0 517 | 1 518 | 2 519 | 3 520 | 4 521 | 5 522 | 6 523 | 7 524 | 8 525 | 9 526 | 10 527 | 11 528 | 12 529 | 13 530 | 14 531 | 532 | 2 533 | 534 | MuListView 535 | 536 | Qt4ProjectManager.Qt4RunConfiguration:E:/projects/test/MuListView/MuListView.pro 537 | true 538 | 539 | MuListView.pro 540 | false 541 | 542 | E:/projects/test/build-MuListView-Desktop_Qt_5_9_6_MSVC2015_32bit-Debug 543 | 3768 544 | false 545 | true 546 | false 547 | false 548 | true 549 | 550 | 1 551 | 552 | 553 | 554 | ProjectExplorer.Project.TargetCount 555 | 2 556 | 557 | 558 | ProjectExplorer.Project.Updater.FileVersion 559 | 18 560 | 561 | 562 | Version 563 | 18 564 | 565 | 566 | -------------------------------------------------------------------------------- /Style.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | style.qss 4 | 5 | 6 | -------------------------------------------------------------------------------- /Widget.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include "Widget.h" 4 | #include "ui_Widget.h" 5 | #include "MuListItemData.h" 6 | #include "MuItemDelegate.h" 7 | 8 | const QStringList icons = { 9 | ":/images/HotDog.jpg", ":/images/li.jpg", ":/images/logo.jpg", 10 | ":/images/PACT.jpg", ":/images/yang.jpg", ":/images/zhang.jpg", 11 | }; 12 | const QStringList singers = { 13 | "MC-Hotdog", "李荣浩", "Author", 14 | "PACT", "杨千嬅", "张震岳", 15 | }; 16 | 17 | Widget::Widget(QWidget *parent) : 18 | QWidget(parent), 19 | ui(new Ui::Widget) 20 | { 21 | ui->setupUi(this); 22 | 23 | QStandardItemModel *pModel = new QStandardItemModel(); 24 | for (int i=0; isetData(QVariant::fromValue(itemData), Qt::UserRole+1); 31 | pModel->appendRow(pItem); 32 | } 33 | 34 | MuItemDelegate *pItemDelegate = new MuItemDelegate(this); 35 | ui->listView->setItemDelegate(pItemDelegate); 36 | ui->listView->setModel(pModel); 37 | } 38 | 39 | Widget::~Widget() 40 | { 41 | delete ui; 42 | } 43 | -------------------------------------------------------------------------------- /Widget.h: -------------------------------------------------------------------------------- 1 | #ifndef WIDGET_H 2 | #define WIDGET_H 3 | 4 | #include 5 | 6 | namespace Ui { 7 | class Widget; 8 | } 9 | 10 | class QStandardItemModel; 11 | class Widget : public QWidget 12 | { 13 | Q_OBJECT 14 | 15 | public: 16 | explicit Widget(QWidget *parent = 0); 17 | ~Widget(); 18 | 19 | private: 20 | Ui::Widget *ui; 21 | 22 | QStandardItemModel *m_model; 23 | }; 24 | 25 | #endif // WIDGET_H 26 | -------------------------------------------------------------------------------- /Widget.ui: -------------------------------------------------------------------------------- 1 | 2 | 3 | Widget 4 | 5 | 6 | 7 | 0 8 | 0 9 | 400 10 | 300 11 | 12 | 13 | 14 | Widget 15 | 16 | 17 | 18 | 19 | 20 | 21 | 20 22 | 23 | 24 | 20 25 | 26 | 27 | 20 28 | 29 | 30 | 20 31 | 32 | 33 | 20 34 | 35 | 36 | 37 | 38 | 39 | 200 40 | 16777215 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /images/HotDog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FlyWM/MuListView/59a0d5eabed3c0ddd122f57d6c652e3c8f24b067/images/HotDog.jpg -------------------------------------------------------------------------------- /images/PACT.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FlyWM/MuListView/59a0d5eabed3c0ddd122f57d6c652e3c8f24b067/images/PACT.jpg -------------------------------------------------------------------------------- /images/li.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FlyWM/MuListView/59a0d5eabed3c0ddd122f57d6c652e3c8f24b067/images/li.jpg -------------------------------------------------------------------------------- /images/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FlyWM/MuListView/59a0d5eabed3c0ddd122f57d6c652e3c8f24b067/images/logo.jpg -------------------------------------------------------------------------------- /images/yang.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FlyWM/MuListView/59a0d5eabed3c0ddd122f57d6c652e3c8f24b067/images/yang.jpg -------------------------------------------------------------------------------- /images/zhang.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FlyWM/MuListView/59a0d5eabed3c0ddd122f57d6c652e3c8f24b067/images/zhang.jpg -------------------------------------------------------------------------------- /imgs.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | images/HotDog.jpg 4 | images/li.jpg 5 | images/logo.jpg 6 | images/PACT.jpg 7 | images/yang.jpg 8 | images/zhang.jpg 9 | 10 | 11 | -------------------------------------------------------------------------------- /main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include "Widget.h" 4 | 5 | void setStyle(const QString &qssFile) 6 | { 7 | QFile qss(qssFile); 8 | qss.open(QFile::ReadOnly); 9 | qApp->setStyleSheet(qss.readAll()); 10 | qss.close(); 11 | } 12 | 13 | int main(int argc, char *argv[]) 14 | { 15 | QApplication a(argc, argv); 16 | 17 | setStyle(":/style.qss"); 18 | 19 | Widget w; 20 | w.show(); 21 | 22 | return a.exec(); 23 | } 24 | -------------------------------------------------------------------------------- /style.qss: -------------------------------------------------------------------------------- 1 | QScrollBar:vertical { 2 | border: none; 3 | background: #ffffff; 4 | width: 10px; 5 | margin: 0px 0 0px 0; 6 | } 7 | QScrollBar::handle:vertical { 8 | background: Gainsboro; 9 | min-height: 20px; 10 | border-radius: 5px; 11 | border: none; 12 | } 13 | QScrollBar::add-line:vertical { 14 | border: 0px solid grey; 15 | background: #32CC99; 16 | height: 0px; 17 | subcontrol-position: bottom; 18 | subcontrol-origin: margin; 19 | } 20 | QScrollBar::sub-line:vertical { 21 | border: 0px solid grey; 22 | background: #32CC99; 23 | height: 0px; 24 | subcontrol-position: top; 25 | subcontrol-origin: margin; 26 | } 27 | QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical { 28 | background: none; 29 | width: 0px; 30 | height: 0px; 31 | } 32 | 33 | QListView#listView { 34 | background-color: #ffffff; 35 | } 36 | --------------------------------------------------------------------------------