组件：绝对布局

绝对布局组件是一个容器型组件，允许子组件通过 左边、顶边（或 右边、底边）属性进行精确的像素级定位。它适合需要自由控制每个子组件位置的场景，如仪表盘、表单布局、卡片设计等。注意： 子组件需要设置 定位 = "absolute" 或 定位 = "relative" 才能相对于父容器进行定位。

典型使用场景：

仪表盘布局（图表、指标卡自由摆放）
表单布局（标签与输入框精确对齐）
卡片设计（多个元素叠加或精确排列）
弹窗/对话框内部布局
游戏界面或自定义绘图区域

📌 继承自视图的成员速查

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

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

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

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

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

常用操作速查

操作	属性/方法	示例
设置容器尺寸	`宽度` / `高度`	`绝对布局1.宽度 = 600`，`绝对布局1.高度 = 400`
设置容器背景	`背景颜色`	`绝对布局1.背景颜色 = "#fafafa"`
添加子组件	`添加组件(组件)`	`绝对布局1.添加组件(按钮1)`
子组件定位（相对于容器）	`左边` / `顶边`（子组件上设置）	`按钮1.左边 = 20`，`按钮1.顶边 = 20`
子组件定位（相对于容器右下）	`右边` / `底边`（子组件上设置）	`按钮1.右边 = 20`，`按钮1.底边 = 20`
获取子组件数量	`取子组件数()`	`变量数量 = 绝对布局1.取子组件数()`
获取指定子组件	`取子组件(索引)`	`变量组件 = 绝对布局1.取子组件(0)`
转为弹性布局	`转为弹性布局(方向)`	`绝对布局1.转为弹性布局("row")`

样式美化参考

绝对布局的样式可通过继承的视图属性进行调整：

容器样式：

背景与边框：背景颜色 = "#ffffff"，边框 = "1px solid #e8e8e8"，边框圆角 = "8px"
阴影效果：追加内联样式("box-shadow: 0 2px 12px rgba(0,0,0,0.08);")
尺寸控制：宽度 = 600，高度 = 400（或 宽度 = "100%"，高度 = "100%"）

子组件定位：

子组件需设置 定位 = "absolute"（相对于父容器定位）或 定位 = "relative"（相对于自身正常位置偏移）
使用 左边 和 顶边 定位左上角：按钮1.左边 = 20，按钮1.顶边 = 20
使用 右边 和 底边 定位右下角：按钮1.右边 = 20，按钮1.底边 = 20
混合定位：左边 = 20，底边 = 20（左下角）

基础示例

创建一个简单的绝对布局，包含一个标题标签和一个按钮，精确控制它们的位置。

' 1. 创建绝对布局
变量 绝对布局1 = 创建 绝对布局()
绝对布局1.左边 = 50
绝对布局1.顶边 = 50
绝对布局1.宽度 = 400
绝对布局1.高度 = 300
绝对布局1.背景颜色 = "#f5f5f5"
绝对布局1.边框 = "1px solid #e8e8e8"
绝对布局1.边框圆角 = "8px"

' 2. 添加子组件（需设置定位方式）
变量 标题 = 创建 标签()
标题.定位 = "absolute"
标题.左边 = 20
标题.顶边 = 20
标题.文本 = "📌 绝对布局示例"
标题.字体大小 = "18px"
标题.字体粗细 = "bold"
绝对布局1.添加组件(标题)

变量 按钮1 = 创建 按钮()
按钮1.定位 = "absolute"
按钮1.右边 = 20
按钮1.底边 = 20
按钮1.文本 = "确定"
按钮1.宽度 = 80
按钮1.高度 = 36
按钮1.背景颜色 = "#1890ff"
按钮1.文本颜色 = "#ffffff"
按钮1.边框圆角 = "4px"
绝对布局1.添加组件(按钮1)

' 3. 添加到父容器
添加组件(绝对布局1)

综合示例：登录表单卡片

本示例使用绝对布局制作一个登录表单卡片，精确控制标题、输入框、按钮的位置，适合固定尺寸的弹窗或卡片场景。

' ========== 创建卡片容器 ==========
变量 登录卡片 = 创建 绝对布局()
登录卡片.左边 = 100
登录卡片.顶边 = 50
登录卡片.宽度 = 360
登录卡片.高度 = 280
登录卡片.背景颜色 = "#ffffff"
登录卡片.边框 = "1px solid #e8e8e8"
登录卡片.边框圆角 = "12px"
登录卡片.追加内联样式("box-shadow: 0 4px 20px rgba(0,0,0,0.1);")
添加组件(登录卡片)

' 标题
变量 标题 = 创建 标签()
标题.定位 = "absolute"
标题.左边 = 30
标题.顶边 = 24
标题.文本 = "🔐 用户登录"
标题.字体大小 = "20px"
标题.字体粗细 = "bold"
标题.文本颜色 = "#333"
登录卡片.添加组件(标题)

' 用户名输入框
变量 用户标签 = 创建 标签()
用户标签.定位 = "absolute"
用户标签.左边 = 30
用户标签.顶边 = 76
用户标签.文本 = "用户名"
用户标签.字体大小 = "14px"
用户标签.文本颜色 = "#666"
登录卡片.添加组件(用户标签)

变量 用户名输入 = 创建 单行输入框()
用户名输入.定位 = "absolute"
用户名输入.左边 = 30
用户名输入.顶边 = 100
用户名输入.宽度 = 300
用户名输入.高度 = 36
用户名输入.提示文本 = "请输入用户名"
用户名输入.边框 = "1px solid #d9d9d9"
用户名输入.边框圆角 = "4px"
用户名输入.内边距 = "8px 12px"
登录卡片.添加组件(用户名输入)

' 密码输入框
变量 密码标签 = 创建 标签()
密码标签.定位 = "absolute"
密码标签.左边 = 30
密码标签.顶边 = 152
密码标签.文本 = "密码"
密码标签.字体大小 = "14px"
密码标签.文本颜色 = "#666"
登录卡片.添加组件(密码标签)

变量 密码输入 = 创建 密码输入框()
密码输入.定位 = "absolute"
密码输入.左边 = 30
密码输入.顶边 = 176
密码输入.宽度 = 300
密码输入.高度 = 36
密码输入.占位提示 = "请输入密码"
密码输入.边框 = "1px solid #d9d9d9"
密码输入.边框圆角 = "4px"
密码输入.内边距 = "8px 12px"
登录卡片.添加组件(密码输入)

' 登录按钮
变量 登录按钮 = 创建 按钮()
登录按钮.定位 = "absolute"
登录按钮.左边 = 30
登录按钮.底边 = 24
登录按钮.宽度 = 300
登录按钮.高度 = 40
登录按钮.文本 = "登 录"
登录按钮.背景颜色 = "#1890ff"
登录按钮.文本颜色 = "#ffffff"
登录按钮.边框圆角 = "6px"
登录按钮.字体大小 = "16px"
登录卡片.添加组件(登录按钮)

' 登录按钮事件
登录按钮.置被单击回调((源对象, 事件对象) => {
    变量 用户名 = 删首尾空(用户名输入.内容)
    变量 密码 = 密码输入.取值()
    如果(用户名 == "" 或 密码 == "")
        弹出提示("请输入用户名和密码")
        返回
    结束 如果
    弹出提示("登录成功！欢迎 " + 用户名)
})

函数详解

添加组件(组件)

功能： 向布局中添加一个子组件。子组件需设置 定位 = "absolute" 或 定位 = "relative"，并通过 左边、顶边、右边、底边 属性定位。
参数： 组件，继承自 视图 的组件实例。
返回值： 无。
示例： 绝对布局1.添加组件(按钮1)

取子组件数()

功能： 获取当前布局中的子组件数量。
返回值： 数值型。
示例： 变量数量 = 绝对布局1.取子组件数()

取子组件(索引)

功能： 获取指定索引位置的子组件对象。
参数： 索引（数值型），从 0 开始。
返回值： 视图组件对象，若索引无效则返回 空。
示例： 变量第一个组件 = 绝对布局1.取子组件(0)

取子元素By类名(类名)

功能： 根据 CSS 类名获取所有匹配的子元素（原生 DOM 元素，非视图组件）。
参数： 类名（文本型）。
返回值： DOM 元素数组。
示例： 变量列表 = 绝对布局1.取子元素By类名("item")

取子元素By标签(标签名)

功能： 根据 HTML 标签名获取所有匹配的子元素。
参数： 标签名（文本型）。
返回值： DOM 元素数组。
示例： 变量按钮列表 = 绝对布局1.取子元素By标签("button")

有子节点()

功能： 判断当前布局是否有子节点（包含文本节点等）。
返回值： 逻辑型。
示例： 如果(绝对布局1.有子节点()) 调试输出("有子节点")

取末端子节点()

功能： 获取最后一个子节点（可能包含文本节点）。
返回值： 原生 DOM 节点。
示例： 变量最后节点 = 绝对布局1.取末端子节点()

取末端子元素()

功能： 获取最后一个子元素（仅元素节点）。
返回值： 原生 DOM 元素。
示例： 变量最后元素 = 绝对布局1.取末端子元素()

查询子节点(选择器)

功能： 根据 CSS 选择器查询第一个匹配的子节点。
参数： 选择器（文本型）。
返回值： 原生 DOM 节点。
示例： 变量节点 = 绝对布局1.查询子节点(".active")

查询子节点全部(选择器)

功能： 根据 CSS 选择器查询所有匹配的子节点。
参数： 选择器（文本型）。
返回值： DOM 节点数组。
示例： 变量列表 = 绝对布局1.查询子节点全部(".item")

转为弹性布局(方向)

功能： 将当前绝对布局转换为弹性布局，子组件将按照弹性布局规则重新排列，原有的 左边、顶边 等定位属性将失效。
参数： 方向（文本型），可选值 "row"（水平排列）或 "column"（垂直排列）。
返回值： 无。
示例： 绝对布局1.转为弹性布局("row")

事件说明

绝对布局本身不定义特有事件，但继承自 视图 的所有事件均可使用（如 置被单击回调）。

⚠️ 注意事项

子组件定位方式：子组件必须设置 定位 = "absolute" 或 定位 = "relative"，否则 左边、顶边 等属性不会相对于父容器生效。
容器尺寸：绝对布局本身需要有明确的 宽度 和 高度，否则子组件的百分比定位可能无法正确计算。
响应式限制：绝对布局适合固定尺寸场景，在响应式布局中可能表现不佳。如需自适应，考虑使用 弹性布局。
与弹性布局的转换：转为弹性布局 会改变容器的布局模式，子组件的 左边、顶边 等属性将不再生效，需重新调整子组件属性。
定位冲突：同时设置 左边 和 右边 时，左边 优先（取决于 direction）；同时设置 顶边 和 底边 时，顶边 优先。
层级控制：子组件的叠放顺序由 显示层级（z-index）控制，数值越大越在上层。
内边距的影响：容器的 内边距 会影响子组件的定位基准点，子组件的 左边 是相对于容器内容区域（即 内边距 内侧）计算的。
性能：绝对布局使用 position: absolute，不会影响其他元素的布局，性能良好，适合大量子组件的场景。

轻语言网站开发SDK文档