Day41 使用listwidget制作简易图片播放器

1.简介

使用QlistWidget实现简易图片播放器,可以打开一个图片序列,通过item的单击事件实现图片的切换,通过设置list的各种属性实现图片预览的显示,美化滚动条即可实现一个简易图片播放器。

2.效果

3.实现步骤:

1.初始化界面部件,主要是设置list为水平滚动模式并且关闭自动换行,这样他可以一直将所有图片显示在一行中,效果为图片播放器的预览窗口。然后设置view mode为图标模式,禁止拖动复制,具体属性在代码部分可见。

cpp 复制代码
    ui->listWidget->setHorizontalScrollMode(QAbstractItemView::ScrollPerItem); // 设置水平滚动模式为每个item滚动
    ui->listWidget->setWordWrap(false); // 开启自动换行
    ui->listWidget->setFlow(QListView::TopToBottom);
    ui->listWidget->setViewMode(QListWidget::IconMode);//设置为图标显示方式
    ui->listWidget->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
    ui->listWidget->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOn);
    ui->listWidget->setIconSize(QSize(200,150));
    ui->listWidget->setSpacing(10);
    ui->listWidget->setDragDropMode(QAbstractItemView::NoDragDrop); // 禁止拖动复制

2.设置滚动条样式表

cs 复制代码
horizontalScrollBar = ui->listWidget->horizontalScrollBar();
    QString styleSheet = "QScrollBar:horizontal {"
                        "    border: 2px solid #999999;"
                        "    background: #f0f0f0;"
                        "    height: 15px;"
                        "    margin: 0px 22px 0px 22px;"
                        "    border-radius: 7px;"
                        "}"
                        "QScrollBar::handle:horizontal {"
                        "    background: #666666;"
                        "    min-width: 20px;"
                        "    border-radius: 7px;"
                        "}"
                        "QScrollBar::add-line:horizontal {"
                        "    width: 20px;"
                        "    subcontrol-position: right;"
                        "    subcontrol-origin: margin;"
                        "    border-image: url(:/images/arrow_right.png);"
                        "}"
                        "QScrollBar::sub-line:horizontal {"
                        "    width: 20px;"
                        "    subcontrol-position: left;"
                        "    subcontrol-origin: margin;"
                        "    border-image: url(:/images/arrow_left.png);"
                        "}";
    horizontalScrollBar->setStyleSheet(styleSheet);

3.通过按钮弹出文件选择对话框,选择各种类型的图片。

cpp 复制代码
QStringList paths = QFileDialog::getOpenFileNames(this,"Seclect img","D:\\", tr("ALL Files (*.jpg *.jpeg *.png *.bmp);;JPEG Files (*.jpg *.jpeg);;PNG Files (*.png);;GIF Files (*.gif);;BMP Files (*.bmp)"));

4.将所有的图片加载成item项,同时滚动条可以根据图片内容自动调整大小。

cpp 复制代码
totalNumber = paths.size();
    //序列显示
    for(int i = 0; i < totalNumber; i++) {
        QFileInfo fileInfo(currentPaths.at(i));
        qDebug()<<"currentPaths"<<fileInfo.fileName();
        QListWidgetItem *signalPicItem=new QListWidgetItem(QIcon(currentPaths.at(i)),fileInfo.fileName());
        ui->listWidget->addItem(signalPicItem);
    }

5.连接item单击事件,完成图片的切换操作。

cpp 复制代码
QObject::connect(ui->listWidget, &QListWidget::itemClicked, [&](QListWidgetItem *item) {
            // 在这里处理项目单击事件
            setCurrentImage(ui->listWidget->row(item));
            qDebug() << "Clicked item text:" << item->text()<<ui->listWidget->row(item);
        });

6.中心部分的显示区域由Qlabel完成图片的显示。

cpp 复制代码
void MainWindow::setCurrentImage(int index)
{
    QString path = currentPaths.at(index);
    QPixmap pix(path);
    ui->label->setPixmap(path);
    ui->listWidget->setItemSelected(ui->listWidget->item(index), true);
}
相关推荐
重生之我是数学王子3 小时前
QT基础 编码问题 定时器 事件 绘图事件 keyPressEvent QT5.12.3环境 C++实现
开发语言·c++·qt
----云烟----12 小时前
QT中QString类的各种使用
开发语言·qt
「QT(C++)开发工程师」18 小时前
【qt版本概述】
开发语言·qt
一路冰雨1 天前
Qt打开文件对话框选择文件之后弹出两次
开发语言·qt
老赵的博客1 天前
QT 自定义界面布局要诀
开发语言·qt
码码哈哈0.01 天前
VSCode 2022 离线安装插件QT VSTOOl报错此扩展不能安装在任何当前安装的产品上。
ide·vscode·qt
feiyangqingyun1 天前
Qt/C++离线地图的加载和交互/可以离线使用/百度和天地图离线/支持手机上运行
c++·qt·qt天地图·qt离线地图·qt地图导航
gz94562 天前
windows下,用CMake编译qt项目,出现错误By not providing “FindQt5.cmake“...
开发语言·qt
「QT(C++)开发工程师」2 天前
Ubuntu 26.04 LTS 大升级:Qt 6 成为未来新引擎
qt
兆。2 天前
python实战案例----使用 PyQt5 构建简单的 HTTP 接口测试工具
爬虫·python·qt