<學習QT>在QListWidget中實現每個單元項顯示文字在上圖片在下

　　

　　今天要實現一個新的需求，要求一個選圖界面的每個單元項以文字在上，圖片在下的形式顯示。但QListWidget中只有兩種搭配，一是文字在下圖片在上，二是圖片在左文字在右，如下圖所示。

　　

　　查找資料后，受到這位朋友的啟發（https://blog.csdn.net/DK29030901065/article/details/50017795?utm_source=blogxgwz5），可以把要呈現的圖片和文字轉化為圖片畫在QListWidgetItem，實現代碼大概如下。

//文字框高度
const int textHight = 30; //圖片框距左邊界距離
const int imgMarin = 20; //獲得圖片路徑
QString strPath = "./library/1.bmp"; QFileInfo fi(strPath); if(fi.isFile()) { //生成圖像objPixmap
 QPixmap objPixmap(strPath); //生成圖標對象
 QPixmap iconPixmap(m_W_ICONSIZE,m_H_ICONSIZE); iconPixmap.fill(QColor(255,255,255)); // 在圖標上生成QPainter對象
    QPainter painter(&iconPixmap); // 設置畫筆顏色
    painter.setPen(QColor(0, 0, 0)); // 設置字體：SimSun、大小15
 QFont font; font.setFamily("SimSun"); font.setPointSize(15); painter.setFont(font); // 定義文本框矩形
    const QRect rectangle = QRect(0, 0, m_W_ICONSIZE, textHight); // 繪制文本
    painter.drawText(rectangle, Qt::AlignHCenter, QString("text name")); // 反走樣
    painter.setRenderHint(QPainter::Antialiasing, true); // 定義繪圖框矩形,畫圖
    const QRect img_rectangle = QRect(imgMarin, textHight, m_W_ICONSIZE-(2*imgMarin), m_H_ICONSIZE-textHight-imgMarin); painter.drawPixmap(img_rectangle, objPixmap); // 定義繪圖框矩形,並畫圖
    const QRect img2_rectangle = QRect(m_W_ICONSIZE-textHight, 0, textHight, textHight); QPixmap objPixmap2(":/image/image/open.png"); painter.drawPixmap(img2_rectangle, objPixmap2); // 為單元項添加圖標對象 
    QListWidgetItem *pItem = new QListWidgetItem(QIcon(iconPixmap.scaled(QSize(m_W_ICONSIZE,m_H_ICONSIZE),Qt::KeepAspectRatio,Qt::SmoothTransformation)),QString("0")); // 設置單元項的寬度和高度
    pItem->setSizeHint(QSize(m_W_ICONSIZE,m_H_ICONSIZE)); ui->listWidget->insertItem(0, pItem); }