QT5:图片显示+屏幕滚动

最新推荐文章于 2024-07-24 00:10:40 发布

有什么昵称不存在

最新推荐文章于 2024-07-24 00:10:40 发布

阅读量739

点赞数 4

文章标签： qt

本文链接：https://blog.csdn.net/m0_55986987/article/details/137151462

版权

前言

初次使用qt，版本为5.12.7，做些简单记录。

一、简单图片显示

1.加载图片资源

首先准备好要用的图片资源，放到一个文件夹中（imgs），左键单击工程选择 “Add New...”

在“文件和类”中选择 QT->QT Resourse File

名称自定义，路径选择保存图片的文件夹（imgs）

点击 “Add Prefix”,会出现默认前缀，这里修改为简单的前缀/，不修改也行，此时“Add Files”变成可点击项。

点击Add Files” 出现文件夹下的图片资源，这里只添加1.jpg.

完成后Ctrl+S保存images.qrc文件（这里没*号），之后就可以在代码中引用图片资源。

2.简单显示图片

这里用Qlable简单的显示图片，由于图片是800*800，因此使用了缩放功能让图片随lable大小进行缩放。

选中图片可copy路径：

在mainwindow.cpp文件下加入代码：

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    QImage im;
    //图片路径可以通过右击工程的图片获取
    im.load(":/1.jpg");
    
    QLabel *lab = new QLabel(this);
    //设置lable位置及大小：200*200
    lab->setGeometry(10,10,200,200);
    QPixmap pixmap = QPixmap::fromImage(im);

    int with = lab->width();
    int height = lab->height();
    // QPixmap fitpixmap = pixmap.scaled(with, height, Qt::IgnoreAspectRatio, Qt::SmoothTransformation);  // 饱满填充

    //选择让图片按比例缩放
    QPixmap fitpixmap = pixmap.scaled(with, height, Qt::KeepAspectRatio, Qt::SmoothTransformation);  // 按比例缩放
    lab->setPixmap(fitpixmap);
}

3.显示效果

这里是交叉编译后在屏上显示的效果。

二、实现屏幕滚动

1.QScrollArea 实现滚动效果

将显示的图片复制多份，通过QScrollArea实现滚动显示效果：

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel>
#include <QScrollArea>
#include <QScrollBar>
#include <QWidget>
#include <QScroller>


MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);


    QScrollArea *sa = new QScrollArea(this);
    sa->setGeometry(10, 30, 700, 1250);
            
    //水平方向滑动
//  sa->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOn);
    //垂直方向挥动（显示滑动条）
    sa->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOn);

    QWidget *w = new QWidget(sa);
    sa->setWidget(w);
    w->setGeometry(0, 0, 650, 250*70);//主要是设置长宽，xy意义不大


    QImage im;
    //图片路径可以通过右击工程的图片获取
    im.load(":/1.jpg");

    for(int i=0;i<70;i++)
    {
      for(int j=0;j<3;j++)
      {
         QLabel *lab = new QLabel(w);
         lab->setGeometry(0,0,200,200);
         QPixmap pixmap = QPixmap::fromImage(im);
         int with = lab->width();
         int height = lab->height();
         // 按比例缩放
         QPixmap fitpixmap = pixmap.scaled(with, height, Qt::KeepAspectRatio, Qt::SmoothTransformation); 

         lab->setPixmap(fitpixmap);
         lab->move(0+j*200,i*250);

         QLabel *label = new QLabel(QString("%1.jpg").arg(i + 1), w);
         label->setFixedSize(200, 50);
         label->move(0+j*200,(i+1)*200+i*50);
       }

    }


}

2.滑动优化

上面代码虽然实现了滚动显示图片，但其缺陷在于只能通过滑动右侧滑动条来实现滚动显示，这对于触摸屏显示基本是不可接受的，通过增加下面代码来实现手指上下滑动进行屏幕滚动显示。

//右侧滑动条不可用
QScroller::grabGesture(sa, QScroller::LeftMouseButtonGesture);

//右侧滑动条可用
//QScroller::grabGesture(sa->viewport(),QScroller::LeftMouseButtonGesture);