Qt自带的按钮QButton，基础而丑陋，能够满足功能需求，而无法满足审美需求，因此，在GUI开发的时候，很多时候要定制自己的图标按钮，其具体操作十分简单，通过Qt Designer即可。

　　第一步，打开VS项目管理器中的Qt资源文件，添加资源，注意是Qt资源文件，不是VS资源文件，Qt的资源文件在资源文件夹中，且与类名相同，VS的资源文件在资源管理器的根目录中（图中最后一行），与项目名同名。

　　添加所需资源文件，并保存。这一步其实可有可无，使用Qt资源管理器的目的是为了管理资源，方便后面Qt 设计器的使用。

　　打开Qt Designer，在Button按钮属性编辑器中找到icon选项，选择资源文件即可：

　　同时还可以在iconsize中调整图标的大小，如果想显示无边框的类型，需要在QPushButton中勾选flat选项

　　最后效果：

　　点击左上角按钮，打开图片文件，并显示在下方的QLabel区域中。关于图标素材，网上有很多主题网站都可以免费下载，非常给力，这里推荐两个比较常用的：

1. https://www.iconfont.cn
2. https://www.easyicon.net

效果图

wxml代码

<view class="image">
<view class="txt" wx:for="{{imgs1}}" wx:key="{{index}}">
<image class="im" src="{{item.url}}" bindtap="hao" data-id="{{index}}"></image>
<view class="t">
{{item.name}}
</view>
</view>
</view>

js代码

1.data里

data: {
    imgs1:[
      { url: '../images1/button/1.jpg', name: '珠江夜游',id:"0"},
      { url: '../images1/button/2.jpg', name: '动物园',id:"1"},
      { url: '../images1/button/3.jpg', name: '白云山',id:"2"},
      { url: '../images1/button/4.jpg', name: '黄花岗',id:"3"},
      { url: '../images1/button/5.jpg', name: '长隆乐园',id:"4"},
      { url: '../images1/button/6.jpg', name: '广州塔' ,id:"5"},
    ],

2.按钮实现页面跳转

  hao: function (e) {
    console.log(e.currentTarget.dataset.id)
    const guan = e.currentTarget.dataset.id
    wx.navigateTo({
      url: '../detail/detail?ying=' + guan,
    })
  },

wxss代码

.image{
  display:flex;
  flex-wrap: wrap;
}
.im{
  margin-left: 80rpx;
  margin-top: 35rpx;
  height: 145rpx;
  width: 145rpx;
  border-radius:50%;
}
.txt{
  width:230rpx;
  text-align: center
}
.t{
margin-left: 80rpx;
}

1."IconBtn.h"

 
class CIconBtn : public CButton
{
 
public:
	CIconBtn();
	CImageList* m_pImageList;	//图像列表指针
	int			m_ImageIndex;	//图标索引
	BOOL		IsPressed;		//按钮是否被按下
 
 	public:
	virtual void DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct);//虚方法，绘制图标按钮
	 
public:
	void SetImageIndex(UINT Index);//设置索引值
	void SetImageList(CImageList* pImage);//设置图像列表
	virtual ~CIconBtn();

 
protected:
	 
	afx_msg void OnLButtonDown(UINT nFlags, CPoint point);
	afx_msg void OnLButtonUp(UINT nFlags, CPoint point);
 

	DECLARE_MESSAGE_MAP()
};

 

2.IconBtn.cpp

// IconBtn.cpp : implementation file
//

#include "stdafx.h"
#include "IconButton.h"
#include "IconBtn.h"
 
 
CIconBtn::CIconBtn()
{
	IsPressed = FALSE;
}

CIconBtn::~CIconBtn()
{
}


BEGIN_MESSAGE_MAP(CIconBtn, CButton)
	 
	ON_WM_LBUTTONDOWN()
	ON_WM_LBUTTONUP()
	 
END_MESSAGE_MAP()

 

void CIconBtn::SetImageList(CImageList *pImage)
{
	m_pImageList = pImage;
}

void CIconBtn::SetImageIndex(UINT Index)
{
	m_ImageIndex = Index;
}

void CIconBtn::DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct)
{
	CDC dc;//设备上下文
	dc.Attach(lpDrawItemStruct->hDC);//获取按钮设备上下文 	
	if(m_pImageList)//判断列表视图中是否为空
	{
		UINT state  = lpDrawItemStruct->itemState; //获取状态
		//获取图像列中图像大小
		IMAGEINFO imageinfo;//声明IMAGEINFO变量
		m_pImageList->GetImageInfo(m_ImageIndex,&imageinfo);//获取图像列表中图像的大小
		CSize imagesize;//CSize类型变量
		imagesize.cx = imageinfo.rcImage.right - imageinfo.rcImage.left;//获取图标宽度
		imagesize.cy = imageinfo.rcImage.bottom - imageinfo.rcImage.top;//获取图标高度
		//在按钮垂直方向居中显示位图
		CRect rect;//声明区域变量
		GetClientRect(rect);//获得按钮的客户区域
		CPoint point;//声明Cpoint变量
		point.x = 5;//设置图标显示的水平位置
		point.y = (rect.Height() - imagesize.cy)/2;//设置图标显示的垂直位置
		m_pImageList->Draw(&dc,m_ImageIndex,point,ILD_NORMAL|ILD_TRANSPARENT);//绘制图标
		CRect focusRect(rect);//声明焦点区域
		focusRect.DeflateRect(2,2,2,2);//设置焦点区域	
		//按钮被选中或者获得焦点时
		if((state&ODS_SELECTED)||(state&ODS_FOCUS))
		{
			CPen pen(PS_DASHDOTDOT,1,RGB(0,0,0));//创建画笔
			CBrush brush;//声明画刷
			brush.CreateStockObject(NULL_BRUSH);//创建画刷
			dc.SelectObject(&brush);//将画刷选入设备上下文
			dc.SelectObject(&pen);//将画笔选入设备上下文
			//绘制焦点矩形
			dc.DrawFocusRect(focusRect);
			//绘制立体效果
			dc.DrawEdge(rect,BDR_RAISEDINNER|BDR_RAISEDOUTER,BF_BOTTOMLEFT|BF_TOPRIGHT);			
			//获得焦点时绘制黑色边框
			dc.Draw3dRect(rect,RGB(0,0,0),RGB(0,0,0));//获得焦点时绘制黑色边框
		}
		else  //默认情况下
		{		
			CPen pen(PS_DOT,1,RGB(192,192,192));//创建画笔
			CBrush brush;
			brush.CreateStockObject(NULL_BRUSH);
			dc.SelectObject(&brush);
			dc.SelectObject(&pen);
			dc.Rectangle(focusRect);//绘制焦点区域矩形			
			dc.DrawEdge(rect,BDR_RAISEDINNER|BDR_RAISEDOUTER,BF_BOTTOMLEFT|BF_TOPRIGHT);//绘制立体效果	
		}
		if(IsPressed) //在按钮被按下时绘制按下效果
		{
			dc.DrawFocusRect(focusRect);//绘制焦点矩形			
			dc.DrawEdge(rect,BDR_SUNKENINNER |BDR_SUNKENOUTER,BF_BOTTOMLEFT|BF_TOPRIGHT);//绘制立体效果
			dc.Draw3dRect(rect,RGB(0,0,0),RGB(0,0,0));//绘制边框	
		}
		//绘制按钮文本
		CString text;//声明字符串变量
		GetWindowText(text);//获得显示文本
		rect.DeflateRect(point.x+imagesize.cx,0,0,0);//设置文本显示区域
		dc.SetBkMode(TRANSPARENT);//设置背景透明
		dc.DrawText(text,rect,DT_CENTER|DT_SINGLELINE|DT_VCENTER);//绘制按钮文本
	}
}

void CIconBtn::OnLButtonDown(UINT nFlags, CPoint point) 
{
	// TODO: Add your message handler code here and/or call default
	IsPressed = TRUE;
	CButton::OnLButtonDown(nFlags, point);
}

void CIconBtn::OnLButtonUp(UINT nFlags, CPoint point) 
{
	// TODO: Add your message handler code here and/or call default
	IsPressed = FALSE;
	CButton::OnLButtonUp(nFlags, point);
}

3.处理WM_BUTTONDOWN消息

4.处理WM_BUTTONUP消息

5.按钮属性Owner draw=true.(使用DrawItem虚函数绘制按钮的外观时)

6.对话框头文件声明图像列表对象，并引用IconBtn.h

	CImageList m_ImageList;

7.对话框OnInitDialog函数创建图像列表

// TODO: Add extra initialization here
	m_ImageList.Create(16,16,ILC_COLOR24|ILC_MASK,1,0);
	m_ImageList.Add(AfxGetApp()->LoadIcon(IDI_ICON1));
	m_ImageList.Add(AfxGetApp()->LoadIcon(IDI_ICON2));

	m_Save.SetImageList(&m_ImageList);
	m_Exit.SetImageList(&m_ImageList);
	m_Save.SetImageIndex(0);
	m_Exit.SetImageIndex(1);