组件：悬浮按钮

悬浮按钮组件是一个固定在屏幕四角的浮动按钮，用于提供快捷操作入口。它不随页面滚动而移动，始终保持在视口的指定位置。支持自定义图标、大小、形状、背景色、位置偏移等属性，并支持单击事件回调。适用于返回顶部、添加内容、打开菜单、帮助中心等需要快速访问的场景。

典型使用场景：

返回顶部（页面长滚动时快速回到顶部）
新增/发布（快速创建新内容）
客服/帮助（打开在线客服或帮助中心）
购物车入口（查看购物车）
分享/收藏（快捷分享或收藏当前页面）

📌 继承自视图的成员速查

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

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

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

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

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

常用操作速查

操作	属性/方法	示例
设置按钮图标	`图标`	`悬浮按钮1.图标 = "+"`
设置按钮大小（宽高）	`大小`	`悬浮按钮1.大小 = 56`
设置形状（圆形/方形）	`形状`	`悬浮按钮1.形状 = "circle"`
设置背景颜色	`背景颜色`	`悬浮按钮1.背景颜色 = "#1890ff"`
设置固定位置（四角）	`位置`	`悬浮按钮1.位置 = "rightBottom"`
设置水平偏移	`偏移X`	`悬浮按钮1.偏移X = 32`
设置垂直偏移	`偏移Y`	`悬浮按钮1.偏移Y = 32`
显示按钮	`显示(父容器)`	`悬浮按钮1.显示()`
隐藏按钮	`隐藏()`	`悬浮按钮1.隐藏()`
设置单击回调	`置被单击回调(回调函数)`	`悬浮按钮1.置被单击回调((源对象) => { ... })`

样式美化参考

悬浮按钮的外观可通过以下属性进行精细控制：

形状与大小：形状 支持 "circle"（圆形）和 "square"（方形）；大小 控制按钮的宽高（像素），建议不小于 40px 以保证可点击性。
背景与图标：背景颜色 设置按钮底色，图标 支持文本字符（如 "+"）、emoji（如 "📝"）或 HTML 字符串（如 <svg>...</svg>）。
位置与偏移：位置 支持 "rightBottom"（右下）、"leftBottom"（左下）、"rightTop"（右上）、"leftTop"（左上）；偏移X 和 偏移Y 可微调按钮距离屏幕边缘的距离（像素）。
悬停/阴影效果：可通过继承的 置鼠标被进入回调 和 置鼠标被移出回调 动态改变背景色或缩放，增强交互反馈。
层级：悬浮按钮默认固定定位，显示层级（z-index）默认为较高值，确保浮于其他内容之上。

基础示例

创建一个右下角的圆形悬浮按钮，显示“+”图标，点击弹出提示。

变量 悬浮按钮1 = 创建 悬浮按钮()
悬浮按钮1.图标 = "+"
悬浮按钮1.大小 = 48
悬浮按钮1.形状 = "circle"
悬浮按钮1.背景颜色 = "#1890ff"
悬浮按钮1.位置 = "rightBottom"
悬浮按钮1.偏移X = 24
悬浮按钮1.偏移Y = 24
悬浮按钮1.置被单击回调((源对象) => {
    弹出提示("悬浮按钮被点击")
})
悬浮按钮1.显示()

综合示例：快速新建按钮（带悬停效果）

本示例创建一个位于右下角的圆形悬浮按钮，用于快速新建文档。悬停时放大并变色，点击后模拟新建操作。

' ========== 创建悬浮按钮 ==========
变量 新建按钮 = 创建 悬浮按钮()
新建按钮.图标 = "✚"  ' 加号字符
新建按钮.大小 = 56
新建按钮.形状 = "circle"
新建按钮.背景颜色 = "#1890ff"
新建按钮.位置 = "rightBottom"
新建按钮.偏移X = 32
新建按钮.偏移Y = 32
新建按钮.字体大小 = "32px"
新建按钮.文本颜色 = "#ffffff"
新建按钮.显示层级 = 1000
' 阴影效果通过内联样式添加
新建按钮.追加内联样式("box-shadow: 0 4px 12px rgba(24,144,255,0.5); transition: all 0.3s;")
添加组件(新建按钮)

' ========== 悬停效果 ==========
新建按钮.置鼠标被进入回调((源对象) => {
    源对象.背景颜色 = "#096dd9"
    源对象.追加内联样式("transform: scale(1.1); box-shadow: 0 6px 20px rgba(24,144,255,0.6);")
})

新建按钮.置鼠标被移出回调((源对象) => {
    源对象.背景颜色 = "#1890ff"
    源对象.追加内联样式("transform: scale(1); box-shadow: 0 4px 12px rgba(24,144,255,0.5);")
})

' ========== 单击事件：新建文档 ==========
新建按钮.置被单击回调((源对象) => {
    弹出提示("正在创建新文档...")
    ' 模拟新建操作
    延时执行(() => {
        弹出提示("✅ 新文档已创建")
    }, 1000)
})

' 显示按钮（已默认显示，但建议调用）
新建按钮.显示()

属性详解

图标

类型： 文本型
说明： 设置或获取按钮内显示的图标。支持普通文本字符（如 "+"、"×"）、emoji（如 "📌"、"🔍"）或 HTML 字符串（如 <svg>...</svg>）。默认值为空。

背景颜色

类型： 文本型
说明： 设置或获取按钮的背景颜色，支持 CSS 颜色值（如 "#1890ff"、"red"）。默认 "#1890ff"。

大小

类型： 数值型
说明： 设置或获取按钮的宽度和高度（像素），即按钮为正方形。默认 40。建议不小于 40px 以保证触控区域足够大。

形状

类型： 文本型
说明： 设置或获取按钮的形状，可选值：
- "circle"：圆形（边框圆角为 50%）
- "square"：方形（可配合 边框圆角 属性实现圆角矩形）默认 "circle"。

位置

类型： 文本型
说明： 设置或获取按钮固定在屏幕的哪个角落。可选值：
- "rightBottom"（默认）：右下角
- "leftBottom"：左下角
- "rightTop"：右上角
- "leftTop"：左上角

偏移X

类型： 数值型
说明： 设置或获取按钮距离屏幕左边缘或右边缘的偏移量（像素），取决于 位置 是左还是右。默认 24。

偏移Y

类型： 数值型
说明： 设置或获取按钮距离屏幕顶部或底部的偏移量（像素），取决于 位置 是上还是下。默认 24。

函数详解

显示(父容器)

功能： 将悬浮按钮添加到页面并显示。如果未指定父容器，默认添加到 body。
参数： 父容器（可选），可以是视图组件或原生 DOM 元素。若省略，则添加到页面根元素。
返回值： 无。
示例： 悬浮按钮1.显示() 或 悬浮按钮1.显示(面板1)

隐藏()

功能： 隐藏悬浮按钮（从 DOM 中移除或设置 可视 = "hidden"）。
返回值： 无。
示例： 悬浮按钮1.隐藏()

事件说明

悬浮按钮本身未定义特有事件，但继承自 视图 的所有事件均可使用，特别是 置被单击回调 是最常用的交互方式。

⚠️ 注意事项

固定定位：悬浮按钮使用 position: fixed，不随页面滚动，始终固定在视口指定位置。
父容器限制：如果调用 显示(父容器) 时传入的父容器不是 body，且父容器不是固定定位或相对定位且包含滚动，按钮可能不会固定在屏幕四角，而是相对于父容器定位。建议默认使用 body 或确保父容器为全屏。
图标内容：图标 属性支持 HTML 字符串，可用于嵌入 SVG 图标，但要注意引号转义。
大小与可点击性：按钮大小建议至少 44px，以满足移动端触控规范。
层级冲突：如果页面中有其他固定定位元素（如弹窗、侧边栏），可能需调整 显示层级 确保悬浮按钮在上层。
多个悬浮按钮：可以创建多个悬浮按钮，但需注意它们可能重叠，建议分别设置不同位置或偏移。
隐藏和显示：调用 隐藏() 后，按钮从 DOM 中移除，再次调用 显示() 可重新添加。
悬停效果：通过 置鼠标被进入/移出回调 可实现悬停动画，但注意按钮消失后事件解绑。

轻语言网站开发SDK文档