易语言自绘 UI 实战：5 分钟打造高颜值登录界面-可达鸭小栈

智谱

AI 正在加载摘要

前言：

今天给大家分享一套基于美易分层自绘模块开发的登录界面源码，结构干净、扩展性强，最适合用来做软件登录页、工具启动页。只需要在资源表里替换图片，不用改动核心代码，就能快速做出属于自己风格的 UI。

一、前言：为什么用美易分层自绘？

这套源码依赖 美易分层自绘模块，它是易语言里非常成熟、稳定的自绘方案，优势很明显：

封装完善，不用手写 GDI、不用处理复杂消息
窗口、按钮、编辑框、标签全部统一自绘，样式统一不违和
支持图片按钮常态 / 热点态切换，交互体验好
坐标布局直观，改改数字就能调整控件位置
非常适合做登录窗口、弹窗、工具界面

你只需要安装好美易分层自绘模块，直接粘贴代码就能运行。

二、整体效果与功能

界面包含完整登录 UI 结构：

自定义背景图窗口
账号输入框（普通编辑框）
密码输入框（密码掩码●）
登录按钮（热点态切换）
窗口最小化、关闭按钮
红色提示标签（输入时自动清空）

下载地址：

此处内容已隐藏，请评论后刷新页面查看.

核心亮点：
只替换资源表中的 #背景图，就能瞬间更换整套界面风格，真正做到 “换图即用”。

.版本 2

.程序集 窗口程序集_启动窗口
.程序集变量 主窗口, 分层_窗口
.程序集变量 编辑框, 分层_编辑框, , "2"
.程序集变量 按钮, 分层_按钮, , "3"
.程序集变量 标签, 分层_标签
.程序集变量 Update, 逻辑型

.子程序 __启动窗口_创建完毕

' 入口：调用自绘，传入窗口句柄
自绘 (_启动窗口.取窗口句柄 ())

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

' ==============================================
' 美易分层自绘 - 创建主窗口与背景
' ==============================================
主窗口.创建自句柄 (hwnd, 0, #背景图, , , , , , , , , )

' ==============================================
' 关闭按钮
' ==============================================
按钮 [1].创建图形钮 (hwnd, 0, 465, 0, 33, 31, #关闭通常图, #关闭热点图, , , “关闭”)
按钮 [1].事件_鼠标单击 (到整数 (&关闭按钮_单击事件))

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

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

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

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

' ==============================================
' 提示标签（红色加粗）
' ==============================================
标签.创建 (hwnd, 0, 109, 232, 282, 26, “”, , , , , , , , )
标签.置字体属性 (, #红色, 17, #字体风格_加粗, 假, , )

.子程序 编辑框1_内容改变事件
' 输入内容时自动清空提示文字
标签.标题 (“”, )

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

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

.子程序 登录按钮_单击事件
' 登录逻辑在这里写
' 例如：取账号 ＝ 编辑框[1].标题 ()
'       取密码 ＝ 编辑框[2].标题  ()
'       然后判断或网络验证