组件：按钮

按钮组件是轻语言中最常用的交互组件之一，用于触发用户操作，支持丰富的样式定制和事件回调。它继承自 视图 类，拥有所有视图的通用属性和方法，并额外提供了单击、双击、鼠标悬停、焦点等交互事件。适用于表单提交、功能触发、页面导航、确认/取消等几乎所有需要点击交互的场景。

典型使用场景：

• 表单提交（登录、注册、保存、重置）
• 功能触发（打开对话框、切换状态、发送请求）
• 确认/取消操作（删除确认、操作取消）
• 页面导航（跳转、返回、切换页面）
• 数据操作（添加、编辑、删除）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边 顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

样式美化参考

以下为常用样式组合示例，可根据实际需求调整：

按钮样式变体：

动态悬停效果：

通过 置鼠标被进入回调 和 置鼠标被移出回调 可轻松实现悬停变色：

按钮1.置鼠标被进入回调((源对象, 事件对象) => {
    按钮1.背景颜色 = "#096dd9"   ' 悬停时变深
})
按钮1.置鼠标被移出回调((源对象, 事件对象) => {
    按钮1.背景颜色 = "#1890ff"   ' 恢复原色
})

自定义阴影与过渡：

使用 追加内联样式 添加 CSS 效果：

按钮1.追加内联样式("box-shadow: 0 2px 8px rgba(24,144,255,0.4); transition: all 0.3s;")
按钮1.置鼠标被进入回调((源对象) => {
    源对象.追加内联样式("transform: scale(1.02); box-shadow: 0 4px 16px rgba(24,144,255,0.6);")
})
按钮1.置鼠标被移出回调((源对象) => {
    源对象.追加内联样式("transform: scale(1); box-shadow: 0 2px 8px rgba(24,144,255,0.4);")
})

基础示例

一个最简单的按钮，点击弹出提示：

变量 按钮1 = 创建 按钮()
按钮1.左边 = 100
按钮1.顶边 = 100
按钮1.宽度 = 120
按钮1.高度 = 40
按钮1.文本 = "点击我"
按钮1.背景颜色 = "#1890ff"
按钮1.文本颜色 = "#ffffff"
按钮1.边框圆角 = "4px"

按钮1.置被单击回调((源对象, 事件对象) => {
    弹出提示("按钮被点击了！")
})

添加组件(按钮1)

综合示例：登录表单按钮（带加载状态与键盘回车）

一个完整的登录按钮，包含表单校验、加载状态、请求接口、键盘回车支持，并附带动画悬停效果。

' ========== 创建用户名编辑框 ==========
变量 编辑框_用户名 = 创建 编辑框()
编辑框_用户名.左边 = 20
编辑框_用户名.顶边 = 60
编辑框_用户名.宽度 = 200
编辑框_用户名.高度 = 36
编辑框_用户名.提示文本 = "请输入用户名"
添加组件(编辑框_用户名)

' ========== 创建密码编辑框 ==========
变量 编辑框_密码 = 创建 编辑框()
编辑框_密码.左边 = 20
编辑框_密码.顶边 = 110
编辑框_密码.宽度 = 200
编辑框_密码.高度 = 36
编辑框_密码.提示文本 = "请输入密码"
编辑框_密码.类型 = "password"
添加组件(编辑框_密码)

' ========== 创建登录按钮（带高级样式） ==========
变量 登录按钮 = 创建 按钮()
登录按钮.左边 = 20
登录按钮.顶边 = 160
登录按钮.宽度 = 200
登录按钮.高度 = 44
登录按钮.文本 = "登录"
登录按钮.背景颜色 = "#52c41a"
登录按钮.文本颜色 = "#ffffff"
登录按钮.边框圆角 = "6px"
登录按钮.字体大小 = "16px"
登录按钮.字体粗细 = "bold"
登录按钮.光标样式 = "pointer"
' 添加阴影和过渡动画
登录按钮.追加内联样式("box-shadow: 0 2px 8px rgba(82,196,26,0.4); transition: all 0.3s;")

' 悬停效果
登录按钮.置鼠标被进入回调((源对象) => {
    源对象.背景颜色 = "#389e0d"
    源对象.追加内联样式("transform: scale(1.02); box-shadow: 0 4px 16px rgba(82,196,26,0.6);")
})
登录按钮.置鼠标被移出回调((源对象) => {
    源对象.背景颜色 = "#52c41a"
    源对象.追加内联样式("transform: scale(1); box-shadow: 0 2px 8px rgba(82,196,26,0.4);")
})

' 单击事件
登录按钮.置被单击回调((源对象, 事件对象) => {
    ' 获取输入内容
    变量 用户名 = 编辑框_用户名.内容
    变量 密码 = 编辑框_密码.内容

    ' 前端校验
    如果(删首尾空(用户名) == "" 或 删首尾空(密码) == "")
        弹出提示("请输入用户名和密码")
        编辑框_用户名.获取焦点()
        返回
    结束 如果

    ' 进入加载状态
    登录按钮.禁用 = 真
    登录按钮.文本 = "登录中..."
    登录按钮.追加内联样式("opacity: 0.7;")

    ' 模拟请求（实际项目中替换为 请求接口）
    变量 待提交数据 = "username=" + URL编码(用户名) + "&password=" + URL编码(密码)
    延时执行(() => {
        ' 模拟响应
        变量 模拟成功 = 取随机整数(0, 1) == 1
        如果(模拟成功)
            保存配置("token", "mock_token_" + 取现行时间戳())
            弹出提示("登录成功！")
            切换页面("首页")
        否则
            弹出提示("登录失败：用户名或密码错误")
        结束 如果

        ' 恢复按钮状态
        登录按钮.禁用 = 假
        登录按钮.文本 = "登录"
        登录按钮.追加内联样式("opacity: 1;")
    }, 1500)
})

' 键盘回车触发登录（在密码框上按回车键）
编辑框_密码.置键盘被按下回调((源对象, 事件对象) => {
    如果(事件对象.keyCode == 13)  ' 回车键
        登录按钮.执行单击()
    结束 如果
})

添加组件(登录按钮)

属性详解（除继承外无专属属性）

按钮组件本身没有专属属性，所有样式和行为均通过继承自 视图 的属性实现。以下是常用属性的特别说明：

函数详解

按钮组件除继承自视图的方法外，额外提供了 执行单击() 用于模拟点击。

执行单击()

• 功能： 以编程方式触发按钮的单击事件，效果等同于用户点击。会调用所有已绑定的单击回调。
• 返回值： 无。
• 示例：

  按钮1.执行单击()
  

其他常用方法（继承自视图）：

• 置被单击回调(回调函数)：绑定单击事件，回调参数为 (源对象, 事件对象)。
• 置被双击回调(回调函数)：绑定双击事件。
• 置鼠标被进入回调(回调函数)：鼠标进入按钮时触发。
• 置鼠标被移出回调(回调函数)：鼠标移出按钮时触发。
• 置键盘被按下回调(回调函数)：键盘按键在按钮获得焦点时触发，可用于快捷键。

事件说明

按钮组件的所有事件均继承自 视图，无专属事件。常用事件如下：

💡 事件回调中的 事件源 包含详细信息（如鼠标坐标、按键码等），可通过 取属性值 获取。

⚠️ 注意事项

1. 禁用状态：禁用 = 真 时，按钮不会触发任何交互事件（单击、双击、鼠标事件均被阻止），但键盘事件可能仍会触发（取决于浏览器），建议在回调中额外判断。
2. 加载状态：在执行耗时操作时，建议将按钮设为禁用并修改文本（如“加载中...”），防止用户重复点击。
3. 事件回调中的 源对象：源对象 就是按钮自身，可以直接修改其属性（如 源对象.文本 = "新文本"），无需通过外部变量。
4. 执行单击() 的副作用：该方法会触发所有 置被单击回调，但不会触发双击或鼠标事件。
5. 样式优先级：通过 追加内联样式 添加的 CSS 会覆盖属性设置的样式，注意优先级。
6. 圆角与形状：设置 边框圆角 = "50%" 并要求按钮为正方形（宽度 = 高度）可实现圆形按钮。
7. 键盘快捷键：可以通过 置键盘被按下回调 实现快捷键，例如在登录表单中按回车提交。
8. 与 按钮 组件的区别：轻语言中 按钮 组件是标准交互组件，而 超链接 用于页面跳转，两者不要混淆。

相关文档

• 文档框架基础类_视图 —— 视图类提供的所有通用属性和方法
• 文档文本类组件_标签 —— 配合显示辅助文本
• 文档文本类组件_编辑框 —— 配合输入框使用
• 文档轻语言网站：轻语言语法速查 —— 拉姆达表达式、条件判断等
• 文档综合演示：登录表单 —— 完整应用示例