组件：骨架屏

骨架屏组件用于在内容加载完成前展示占位图形，模拟页面或列表的布局结构，让用户感知到内容正在加载，从而提升用户体验。它支持头像、标题、多行段落等占位元素，并可启用动画效果。适用于数据加载、列表渲染、详情页展示等场景。

典型使用场景：

列表数据加载（商品列表、文章列表）
详情页内容加载（商品详情、文章详情）
卡片加载（用户信息卡、数据统计卡）
页面初始渲染（首页、个人中心）

📌 继承自视图的成员速查

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

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

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

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

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

常用操作速查

操作	属性/方法	示例
设置段落行数	`行数`	`骨架屏1.行数 = 4`
显示/隐藏头像占位	`头像`	`骨架屏1.头像 = 真`
设置头像形状	`头像形状`	`骨架屏1.头像形状 = "square"`
显示/隐藏标题占位	`标题`	`骨架屏1.标题 = 真`
设置标题宽度	`标题宽度`	`骨架屏1.标题宽度 = "50%"`
设置最后一行段落宽度	`段落宽度`	`骨架屏1.段落宽度 = "40%"`
启用/禁用加载动画	`动画`	`骨架屏1.动画 = 真`
控制显示/隐藏	`加载中`	`骨架屏1.加载中 = 假`

样式美化参考

骨架屏的外观主要通过继承的视图属性进行调整：

整体容器：通过 宽度、高度、背景颜色、边框（如 "1px solid #e8e8e8"）、边框圆角（建议 "8px"）等属性美化。
占位块颜色：默认占位块为浅灰色（#f0f0f0），可通过 CSS 类自定义。建议使用浅色背景以模拟真实内容。
内边距：通过 内边距（如 "16px"）控制占位内容与边界的距离。
动画：动画 = 真 时，占位块会呈现渐变的流动效果（闪烁），模拟加载中的动态感。

CSS 美化示例（在项目 CSS 文件中定义）：

.my-skeleton {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 16px;
}
.my-skeleton .skeleton-block {
    background-color: #e8e8e8;
    border-radius: 4px;
}

在代码中应用样式类：骨架屏1.添加样式类("my-skeleton")

基础示例

创建一个包含头像、标题和 3 行段落的骨架屏，并启用动画。

变量 骨架屏1 = 创建 骨架屏()
骨架屏1.左边 = 50
骨架屏1.顶边 = 50
骨架屏1.宽度 = 400
骨架屏1.高度 = 200
骨架屏1.背景颜色 = "#ffffff"
骨架屏1.边框 = "1px solid #e8e8e8"
骨架屏1.边框圆角 = "8px"
骨架屏1.内边距 = "16px"
骨架屏1.头像 = 真
骨架屏1.头像形状 = "circle"
骨架屏1.标题 = 真
骨架屏1.标题宽度 = "40%"
骨架屏1.行数 = 3
骨架屏1.段落宽度 = "60%"
骨架屏1.动画 = 真

添加组件(骨架屏1)

综合示例：模拟数据加载

本示例模拟一个用户列表的加载过程，先显示骨架屏，2 秒后加载真实数据并替换。

' ========== 创建容器 ==========
变量 容器 = 创建 绝对布局()
容器.左边 = 30
容器.顶边 = 30
容器.宽度 = 400
容器.高度 = 300
容器.边框 = "1px solid #e8e8e8"
容器.边框圆角 = "12px"
容器.背景颜色 = "#ffffff"
容器.内边距 = "16px"
添加组件(容器)

' 标题
变量 标题标签 = 创建 标签()
标题标签.文本 = "👥 用户列表"
标题标签.字体大小 = "18px"
标题标签.字体粗细 = "bold"
标题标签.内边距 = "0 0 12px 0"
容器.添加组件(标题标签)

' ========== 骨架屏 ==========
变量 骨架 = 创建 骨架屏()
骨架.左边 = 0
骨架.顶边 = 44
骨架.宽度 = 368
骨架.高度 = 220
骨架.背景颜色 = "transparent"
骨架.头像 = 真
骨架.头像形状 = "circle"
骨架.标题 = 真
骨架.标题宽度 = "30%"
骨架.行数 = 4
骨架.段落宽度 = "80%"
骨架.动画 = 真
骨架.加载中 = 真
容器.添加组件(骨架)

' ========== 真实内容（初始隐藏） ==========
变量 内容容器 = 创建 弹性布局()
内容容器.方向 = "column"
内容容器.左边 = 0
内容容器.顶边 = 44
内容容器.宽度 = 368
内容容器.间距 = 8
内容容器.可视 = "hidden"  ' 初始隐藏
容器.添加组件(内容容器)

' 模拟数据
变量 用户数据 = [
    {name: "张三", email: "zhangsan@example.com"},
    {name: "李四", email: "lisi@example.com"},
    {name: "王五", email: "wangwu@example.com"}
]

变量循环(i = 0, 取数组成员数(用户数据), 1)
    变量 用户 = 用户数据[i]
    变量 行 = 创建 弹性布局()
    行.方向 = "row"
    行.侧轴对齐 = "center"
    行.内边距 = "8px"
    行.边框底边 = "1px solid #f0f0f0"
    
    变量 头像占位 = 创建 弹性布局()
    头像占位.方向 = "row"
    头像占位.侧轴对齐 = "center"
    头像占位.主轴对齐 = "center"
    头像占位.宽度 = 32
    头像占位.高度 = 32
    头像占位.边框圆角 = "16px"
    头像占位.背景颜色 = "#1890ff"
    头像占位.文本颜色 = "#ffffff"
    头像占位.字体大小 = "14px"
    头像占位.文本 = 用户.name[0]  ' 取首字母
    行.添加组件(头像占位)
    
    变量 信息 = 创建 弹性布局()
    信息.方向 = "column"
    信息.内边距 = "0 0 0 12px"
    
    变量 姓名 = 创建 标签()
    姓名.文本 = 用户.name
    姓名.字体大小 = "14px"
    姓名.字体粗细 = "bold"
    信息.添加组件(姓名)
    
    变量 邮箱 = 创建 标签()
    邮箱.文本 = 用户.email
    邮箱.字体大小 = "12px"
    邮箱.文本颜色 = "#999"
    信息.添加组件(邮箱)
    
    行.添加组件(信息)
    内容容器.添加组件(行)
结束循环

' ========== 模拟加载 ==========
延时执行(() => {
    ' 隐藏骨架，显示真实内容
    骨架.加载中 = 假
    内容容器.可视 = "visible"
    弹出提示("数据加载完成")
}, 2000)