435 阿裏雲技術社區[雲棲]

MFC 列表控件CListCtrl加載類似QQ界麵的頭像與文字

本文主要講述使用VS2012 MFC的CListCtrl(列表)控件加載類似於QQ界麵的圖片與文字數據.主要通過CListCtrl::InsertColumn、InsertItem、SetItemText向列表插入數據,CImageList插入BMP圖片或ICON圖標.

一.創建項目及界麵

1.創建項目
創建項目名為"QQList"的基於MFC對話框的應用程序.資源視圖中對話框IDD_QQLIST_DIALOG刪除"TODE"和按鈕,並添加List Control控件.

2.添加成員變量
項目->類向導->類名為"CQQListDlg"->成員變量點擊"IDC_LIST1"添加成員變量public(訪問) CListCtrl(變量類型) m_list(變量名).同時添加成員變量CImageList m_imList調用其函數實現添加圖片.

3.插入3張BMP圖片
右鍵"資源視圖"中"Dialog"->選擇"添加資源"->點擊"Bitmap"->導入本地圖片3張(工程文件res文件夾中).其ID分別為IDB_BITMAP1,IDB_BITMAP2,IDB_BITMAP3.
注意:在加載圖片時,已經使用畫圖把圖片修改為64*64像素的24位彩色BMP圖片,在後麵對應的m_imList.Create(64,64,ILC_COLOR24,10,20)函數即加載它.倘若選擇ILC_COLOR或32*32會出現幾位黑白色或大小失真現象.

4.添加自定義函數
在"類向導"中向CQQListDlg中添加方法void CQQListDlg::InsertPicAndWord(void)該函數即實現添加圖片和文字功能.
其中QQListDlg.h中的代碼如下圖所示:

public:
	//成員變量
	CListCtrl m_list;            // 列表控件 IDC_LIST1
	CImageList m_imList;         // 圖像列表(相同大小圖像集合)
public:
	//成員函數
	void InsertPicAndWord(void); // 實現插入圖片和文字

二.源代碼

其中主代碼void CQQListDlg::InsertPicAndWord(void)如下:

// 調用該函數實現向CListCtrl中加載圖片和文字
void CQQListDlg::InsertPicAndWord(void)
{
	// 設置CListCtrl控件擴展風格:整行選中\繪製表格\子項目圖標列表
	DWORD dwStyle; 
	dwStyle = m_list.GetExtendedStyle();  
	dwStyle = dwStyle|LVS_EX_FULLROWSELECT|LVS_EX_GRIDLINES|LVS_EX_SUBITEMIMAGES ;
	m_list.SetExtendedStyle(dwStyle);   
	
	// 載入64*64像素 24位真彩(ILC_COLOR24)圖片
	m_imList.Create(64,64,ILC_COLOR24,10,20);    // 創建圖像序列CImageList對象
	CBitmap * pBmp = NULL;
	pBmp = new CBitmap(); 
	pBmp->LoadBitmapW(IDB_BITMAP1);              // 載入位圖IDB_BITMAP1
	m_imList.Add(pBmp,RGB(0,0,0));  
	delete pBmp;  
	//
	pBmp = new CBitmap();  
    pBmp->LoadBitmapW(IDB_BITMAP2);  
    m_imList.Add(pBmp,RGB(0,0,0));  
    delete pBmp;
	//
	pBmp = new CBitmap();  
    pBmp->LoadBitmapW(IDB_BITMAP3);  
    m_imList.Add(pBmp,RGB(0,0,0));  
    delete pBmp;

	// 設置CImageList圖像列表與CListCtrl控件關聯 LVSIL_SMALL小圖標列表
	m_list.SetImageList(&m_imList,LVSIL_SMALL);

	// 向列表視圖控件InsertColumn插入3列數據 
	CRect mRect;
	m_list.GetWindowRect(&mRect);                     // 獲取控件矩形區域
	int length = mRect.Width();
	m_list.InsertColumn(0, _T("用戶頭像"), LVCFMT_CENTER, length / 4, -1);
	m_list.InsertColumn(1, _T("用戶名"), LVCFMT_CENTER, length / 4, -1);
	m_list.InsertColumn(2, _T("QQ格言"), LVCFMT_CENTER, length / 2, -1);
	
	// 添加數據 InsertItem向列表中插入主項數據 SetItemText向列表中的子項寫入數據
	int nRow;                                        // 記錄行號 
	LVITEM lvItem={0};                               // 列表視圖控 LVITEM用於定義"項"的結構
	//第一行數據
 	lvItem.mask = LVIF_IMAGE|LVIF_TEXT|LVIF_STATE;   // 文字、圖片、狀態
	lvItem.iItem = 0;                                // 行號(第一行)
	lvItem.iImage = 0;                               // 圖片索引號(第一幅圖片 IDB_BITMAP1)
	lvItem.iSubItem = 0;                             // 子列號
	nRow = m_list.InsertItem(&lvItem);               // 第一列為圖片
	m_list.SetItemText(nRow,1,_T("dog"));            // 第二列為名字
	m_list.SetItemText(nRow,2,_T("人生在於奮鬥"));     // 第三列為格言
	//第二行數據
	lvItem.mask = LVIF_IMAGE|LVIF_TEXT|LVIF_STATE;   // 文字、圖片、狀態
	lvItem.iItem = 1;                                // 行號(第二行)
	lvItem.iImage = 1;                               // 圖片索引號(第二幅圖片 IDB_BITMAP2)
	lvItem.iSubItem = 0;                             // 子列號
	nRow = m_list.InsertItem(&lvItem);     
	m_list.SetItemText(nRow,1,_T("cat"));  
	m_list.SetItemText(nRow,2,_T("快樂生活每一天"));  
	//第二行數據
	lvItem.mask = LVIF_IMAGE|LVIF_TEXT|LVIF_STATE;   // 文字、圖片、狀態
	lvItem.iItem = 2;                                // 行號(第三行)
	lvItem.iImage = 2;                               // 圖片索引號(第三幅圖片 IDB_BITMAP3)
	lvItem.iSubItem = 0;                             // 子列號
	nRow = m_list.InsertItem(&lvItem);      
	m_list.SetItemText(nRow,1,_T("pig"));   
	m_list.SetItemText(nRow,2,_T("Eastmount製作"));   
}

同時需要在初始化程序時調用該函數即可實現:

BOOL CQQListDlg::OnInitDialog()
{
	...
	// TODO: 在此添加額外的初始化代碼
	InsertPicAndWord();      // 調用該函數實現加載圖片和文字
	return TRUE;             // 除非將焦點設置到控件，否則返回 TRUE
}

注意:現在可能你運行後會遇到一個錯誤就是SetItemText、InsertColum加載的數據和圖片不能顯示.Why?
那是需要設置CListCtrl控件IDC_LIST1屬性View為Report風格.ListCtrl有四種風格:
Icons(圖標)使用32*32大小圖標顯示列表
Small Icons(小圖標)使用16*16大小圖標顯示單一列表
List(列表)使用Small Icons,可有多列,第二列必須填充之前必須填充第一列,自上而下排序
Report(報表)編程者自定義的格式顯示列表
如果程序中想要在加載ICON圖標,則代碼為:

HICON hIcon;  
m_imList.Create(32,32,ILC_COLOR24,10,20);  
hIcon = AfxGetApp()->LoadIconW(IDI_ICON_GREE);  
m_imList.Add(hIcon);

程序運行結果:

希望文章能夠對大家有所幫助,同時如果文章中有錯誤或不足之處,還請大家海涵.同時感謝文章資料的作者和向我提出該問題的那個同學.(By:Eastmount 2014-2-28 夜2點原創:https://blog.csdn.net/eastmount)
下載源代碼地址:https://download.csdn.net/detail/eastmount/6972035
參考資料及在線筆記:
(1).ListCtrl控件,Report風格列表中添加圖片 - ribut9225(主要講述加載圖片)
https://blog.csdn.net/ribut9225/article/details/6905165
(2).VC MFC列表視圖(CListCtrl)控件 - 無盡的路(講述CListCtrl加載圖文字附圖)
https://hi.baidu.com/3582077/item/38858bb484e11477254b090a
(3).CListCtrl基礎用法 - welkangm(詳細講述CListCtrl概述、加載數據獲取行號刪除行)
https://welkangm.blog.163.com/blog/static/190658510201232032336899/
(4).CListCtrl加載圖片技術 - woshishushangdezhu(可參考加載動態路徑下的圖片F:\\)
https://blog.csdn.net/woshishushangdezhu/article/details/3938433
(5).如何更改CListCtrl每行的高度(可參考rwx_tech的回答設置行高度)
https://bbs.csdn.net/topics/60367436

最後更新：2017-04-03 12:55:19

MFC 列表控件CListCtrl加載類似QQ界麵的頭像與文字

一.創建項目及界麵

二.源代碼

上一篇：滑動開關按鈕SlideSwich

下一篇： C++編程規範之48：在構造函數中使用初始化代替賦值

相關內容

熱門內容

最新內容

MFC 列表控件CListCtrl加載類似QQ界麵的頭像與文字

一.創建項目及界麵

二.源代碼

上一篇： 滑動開關按鈕SlideSwich

下一篇： C++編程規範之48：在構造函數中使用初始化代替賦值

相關內容

熱門內容

最新內容

上一篇：滑動開關按鈕SlideSwich