使用Qt實現簡單的圖片預覽效果
阿新 • • 發佈：2019-01-31
Qt簡化了UI介面的開發，相比MFC而言確實入門和進階速度都快些；該文章主要講解使用QListWidget載入圖片進行排列並設定主視窗背景圖片的功能；
介面效果如下圖所示：上面兩排為預載入的縮圖，單擊單個縮圖則將對應的圖片設定為主視窗的背景圖片
主要程式碼如下，主視窗的建構函式功能（生成視窗部件與載入內容）：
//建構函式
MainWindow::MainWindow(QWidget
*parent): QMainWindow(parent)
{
//建立QListWidget部件
m_pListWidget
= new QListWidget(this);
//設定QListWidget中的單元項的圖片大小
m_pListWidget->setIconSize(QSize(W_ICONSIZE,
H_ICONSIZE));
m_pListWidget->setResizeMode(QListView::Adjust);
//設定QListWidget的顯示模式
m_pListWidget->setViewMode(QListView::IconMode);
//設定QListWidget中的單元項不可被拖動
m_pListWidget->setMovement(QListView::Static);
//設定QListWidget中的單元項的間距m_pListWidget->setSpacing(10);
//依次建立11個單元項
for(int nIndex
= 0;nIndex<11;++nIndex)
{
//獲得圖片路徑
QString
strPath=QString(":/list/image/%1.jpg").arg(nIndex+1);
//生成影象objPixmap
QPixmap
objPixmap(strPath);
//生成QListWidgetItem物件(注意：其Icon影象進行了伸縮[96*96])---scaled函式
QListWidgetItem
*pItem = new QListWidgetItem(QIcon(objPixmap.scaled(QSize(W_ICONSIZE,H_ICONSIZE))),"animal
tiger pig");
//設定單元項的寬度和高度
pItem->setSizeHint(QSize(W_ICONSIZE,H_ITEMSIZE));
m_pListWidget->insertItem(nIndex,
pItem);
}
setCentralWidget(m_pListWidget);
//設定訊號槽
connect(m_pListWidget,SIGNAL(itemClicked(QListWidgetItem*)),this,SLOT(Slot_ItemClicked(QListWidgetItem*)));
m_strPath
= "";
setWindowTitle("www.hnmade.com");
}
|
設定視窗背景圖片的程式碼如下：
//設定主視窗背景
void MainWindow::SetBgImage(const QString
&strPath)
{
QPixmap
objPixmap(strPath);
QPalette
palette = this->palette();
if(strPath.isEmpty())
{
palette.setBrush(QPalette::Base,
QBrush(QColor(0,0,255)));
}
else
{
palette.setBrush(QPalette::Base,
QBrush(objPixmap.scaled(width(),height())));
}
setPalette(palette);
}
|
原始碼下載地址：http://files.cnblogs.com/appsucc/ListWidgetImage.rar
移動電商平臺搭建：http://www.imooc.com/learn/100