易语言自绘UI实战：基于美易模块的登录界面快速开发（可换肤）

模块下载地址：https://www.ikdya.com/2026/04/14/686.html

一、为什么选择自绘UI？美易模块的优势

在易语言开发中，原生组件样式较为单一。自绘UI 能实现更现代、美观的界面。而"美易分层自绘模块"是易语言生态中成熟的解决方案，核心优势包括：

封装度高：无需手动处理GDI绘图和窗口消息。
样式统一：窗口、按钮、编辑框等所有控件使用统一自绘风格。
交互反馈：支持按钮常态、热点态图片切换，提升用户体验。
布局灵活：采用坐标定位方式，通过修改数字即可调整控件位置。
适用场景：登录窗口、工具启动页、弹窗等。

二、最终界面效果与功能模块

效果展示：

该登录界面包含以下标准UI模块：

自定义背景图窗口
账号输入框（明文）
密码输入框（掩码字符●）
登录按钮（支持热点态切换）
窗口最小化与关闭按钮
红色提示标签（输入内容时自动清空）

核心亮点 ：只需替换资源表中的 #背景图 及其他图片资源，无需改动核心代码，即可快速更换整套界面风格，实现"换图即用"。

三、核心代码实现与解析

下面是基于美易分层自绘模块的完整实现。代码中已添加详细注释，方便你理解每个控件的创建过程。

复制代码

.版本 2

.程序集 窗口程序集_启动窗口
.程序集变量 主窗口, 分层_窗口
.程序集变量 编辑框, 分层_编辑框, , "2"  ' 索引1:账号框，索引2:密码框
.程序集变量 按钮, 分层_按钮, , "3"  ' 索引1:关闭钮，2:登录钮，3:最小化钮
.程序集变量 标签, 分层_标签       ' 红色提示标签
.程序集变量 Update, 逻辑型

.子程序 __启动窗口_创建完毕
    ' 入口：启动自绘流程
    自绘 (_启动窗口.取窗口句柄 ())

.子程序 自绘
.参数 hwnd, 整数型

    ' 1. 创建主窗口并设置背景图
    主窗口.创建自句柄 (hwnd, 0, #背景图, , , , , , , , , )

    ' 2. 创建关闭按钮 (x:465, y:0, 宽:33, 高:31)
    按钮 [1].创建图形钮 (hwnd, 0, 465, 0, 33, 31, #关闭通常图, #关闭热点图, , , "关闭")
    按钮 [1].事件_鼠标单击 (到整数 (&关闭按钮_单击事件))

    ' 3. 创建最小化按钮 (x:431, y:0)
    按钮 [3].创建图形钮 (hwnd, 0, 431, 0, 33, 31, #最小化通常图, #最小化热点图, , , "最小化")
    按钮 [3].事件_鼠标单击 (到整数 (&最小化按钮_单击事件))

    ' 4. 创建登录按钮 (x:111, y:268, 宽:286, 高:32)
    按钮 [2].创建图形钮 (hwnd, 0, 111, 268, 286, 32, #登陆通常图, #登录热点图, , , )
    按钮 [2].事件_鼠标单击 (到整数 (&登录按钮_单击事件))

    ' 5. 创建账号输入框 (x:142, y:141, 宽:251, 高:34)
    编辑框 [1].创建 (hwnd, , 142, 141, 251, 34, , #白色, 255, 假, , , , , , , , , , )
    编辑框 [1].事件_内容被改变 (到整数 (&编辑框1_内容改变事件))

    ' 6. 创建密码输入框，并设置掩码为●
    编辑框 [2].创建 (hwnd, , 142, 194, 251, 34, , #白色, 255, 假, , , #输入方式_密码_ME, , , , , , , , , , , , , "*", , , , )
    编辑框 [2].置密码掩码符 ("●")
    编辑框 [2].事件_内容被改变 (到整数 (&编辑框1_内容改变事件))

    ' 7. 创建红色提示标签 (x:109, y:232, 宽:282, 高:26)
    标签.创建 (hwnd, 0, 109, 232, 282, 26, "", , , , , , , , )
    标签.置字体属性 (, #红色, 17, #字体风格_加粗, 假, , )

.子程序 编辑框1_内容改变事件
    ' 当用户开始输入时，自动清空标签的提示文字
    标签.标题 ("", )

.子程序 最小化按钮_单击事件
    _启动窗口.位置 ＝ 2  ' 最小化窗口

.子程序 关闭按钮_单击事件
    结束 ()

.子程序 登录按钮_单击事件
    ' ★★★ 在此处编写你的登录验证逻辑 ★★★
    ' 获取账号：编辑框[1].标题
    ' 获取密码：编辑框[2].标题
    ' 例如：进行本地数据库比对或网络验证

四、环境配置与使用步骤

1. 必需模块

必须引用 ：美易分层自绘模块。
缺失后果：运行时会提示"数据类型未定义"或找不到相关命令。

2. 资源表准备

在易语言资源表中添加以下图片资源（可自定义图片内容）：

资源名称	用途
`#背景图`	登录窗口的底图
`#关闭通常图`	关闭按钮的常态图片
`#关闭热点图`	关闭按钮的悬停/点击图片
`#最小化通常图`	最小化按钮的常态图片
`#最小化热点图`	最小化按钮的悬停/点击图片
`#登陆通常图`	登录按钮的常态图片
`#登录热点图`	登录按钮的悬停/点击图片

3. 简单二次开发（换肤/调整布局）

更换主题 ：设计或找一张新的背景图，替换资源表中的 #背景图 即可。
调整位置 ：修改每个控件创建命令中的 x、y、宽度、高度 四个参数。
重新编译：运行即可看到全新的界面。

五、功能扩展思路

你可以基于此源码轻松扩展更多功能：

验证集成 ：在 登录按钮_单击事件 中加入网络验证、本地密码比对或数据库查询。
用户选项：增加"记住密码"或"自动登录"复选框。
安全增强：添加验证码输入框或滑块验证。
交互优化：实现窗口拖动功能，或为按钮增加点击音效、呼吸灯效果。

六、适合的开发者群体

易语言新手：希望快速做出美观UI，避免复杂的GDI编程。
工具/辅助开发者：需要为工具制作专业、现代的登录界面。
项目迭代者：经常需要为不同客户更换皮肤或整体界面风格。

总结：以上内容基于美易分层自绘模块，提供了一个完整、可运行的易语言登录界面模板。通过调整资源图片和坐标参数，即可快速构建个性化的应用入口。