理解 Duilib 框架中按钮图像属性的使用：forenormalimage、normalimage、hotimage 和 pushedimage

使用 Duilib 框架提供的图像属性，我们可以有效地增强按钮的视觉吸引力和用户体验。本文将探讨在按钮设计中使用 forenormalimage、normalimage、hotimage 和 pushedimage 属性的不同策略及其效果。

使用 forenormalimage 和 hotimage 实现视觉层叠

在 Duilib 中，forenormalimage 常用于展示按钮的前景图像，如图标或特殊装饰，而 hotimage 则用于定义鼠标悬停时的背景变化。当同时使用这两种属性时，hotimage 将作为背景层显示，而 forenormalimage 则保持在最前面，两者叠加展现。这种设计可以在按钮被激活时（如鼠标悬停）提供丰富的视觉反馈，同时保持按钮的核心视觉元素（如图标）不变，增强了界面的连贯性和吸引力。

例如，一个设置按钮可能在正常状态下展示一个简单的齿轮图标（使用 forenormalimage），而在鼠标悬停时，背景色变化（通过 hotimage）来提醒用户这是一个可交互的元素。
 

<Class name="btn_wnd_min" width="auto" height="auto" 
       forenormalimage="file='../public/button/btn_wnd_gray_min.png' dest='4,4,16,16'" 
       normalimage="" 
       hotimage="file='../public/button/btn_wnd_gray_min_hovered.png' dest='4,4,16,16'" 
       pushedimage="file='../public/button/btn_wnd_gray_min_pushed.png' dest='4,4,16,16'"/>

单独使用 normalimage、hotimage 和 pushedimage

如果目标是为每个按钮状态提供完全独立的视觉效果，而不是叠加显示，则可以只使用 normalimage、hotimage 和 pushedimage。这三个属性允许为常态、悬停态和按下态定义独立的图像，避免了任何图像之间的叠加，每种状态的图像完全独立展现。

例如：
 

<Class name="btn_custom" width="20" height="20"
       normalimage="file='../public/button/btn_normal.png'"
       hotimage="file='../public/button/btn_hover.png'"
       pushedimage="file='../public/button/btn_pressed.png'"/>

宽度和高度的设置

设置按钮的 width 和 height 属性为具体数值可以确保图像不会因适应不同尺寸而失真。如果设计允许，使用 width="auto" 和 height="auto" 可以让按钮根据图像大小自动调整尺寸，适应内容的变化。