组件：弹性布局

弹性布局组件是基于 CSS Flexbox 模型封装的容器型组件，用于灵活排列子组件。它支持设置排列方向、换行模式、主轴/侧轴对齐方式、整体对齐以及子项间距，是实现水平/垂直居中、等距分布、自适应空间等布局需求的常用工具。

典型使用场景：

• 水平导航栏（Logo + 菜单项 + 用户头像）
• 垂直表单布局（标签 + 输入框 + 按钮）
• 卡片列表（水平排列多个卡片，自动换行）
• 居中对齐内容（登录框、加载提示）
• 工具栏（按钮组、搜索框）

📌 继承自视图的成员速查

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

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

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

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

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

常用操作速查

样式美化参考

弹性布局的样式可通过继承的视图属性以及专用布局属性进行调整：

基础容器样式：

• 背景与边框：背景颜色 = "#fafafa"，边框 = "1px solid #e8e8e8"，边框圆角 = "8px"
• 内边距：内边距 = "16px"（让子组件与容器边缘保持距离）
• 尺寸控制：宽度 = "100%"，高度 = "auto"

常用布局模式：

子项等宽/等高：

• 设置子组件的 宽度 = "flex-grow" 或 高度 = "flex-grow" 可让子项自动拉伸填满剩余空间。
• 等宽子项：所有子组件 宽度 = "flex-grow"（需确保布局方向为 "row"）
• 等高子项：所有子组件 高度 = "flex-grow"（需确保布局方向为 "column"）

基础示例

创建一个水平排列的按钮组，居中对齐。

变量 弹性布局1 = 创建 弹性布局()
弹性布局1.左边 = 100
弹性布局1.顶边 = 100
弹性布局1.宽度 = 400
弹性布局1.高度 = 60
弹性布局1.方向 = "row"
弹性布局1.主轴对齐 = "center"
弹性布局1.侧轴对齐 = "center"
弹性布局1.背景颜色 = "#f5f5f5"
弹性布局1.边框圆角 = "8px"
弹性布局1.子项间距 = "12px"

' 添加子组件
变量 按钮1 = 创建 按钮()
按钮1.文本 = "按钮1"
弹性布局1.添加组件(按钮1)

变量 按钮2 = 创建 按钮()
按钮2.文本 = "按钮2"
弹性布局1.添加组件(按钮2)

变量 按钮3 = 创建 按钮()
按钮3.文本 = "按钮3"
弹性布局1.添加组件(按钮3)

添加组件(弹性布局1)

综合示例：商品展示网格

本示例创建一个商品展示卡片网格，使用弹性布局的换行功能，自动排列多个商品卡片。

' ========== 创建标题 ==========
变量 标题 = 创建 标签()
标题.左边 = 50
标题.顶边 = 30
标题.文本 = "🛍️ 商品推荐"
标题.字体大小 = "20px"
标题.字体粗细 = "bold"
添加组件(标题)

' ========== 创建弹性布局（商品网格） ==========
变量 商品网格 = 创建 弹性布局()
商品网格.左边 = 50
商品网格.顶边 = 70
商品网格.宽度 = 700
商品网格.高度 = 400
商品网格.方向 = "row"
商品网格.换行模式 = "wrap"
商品网格.子项间距 = "16px"
商品网格.主轴对齐 = "flex-start"
商品网格.侧轴对齐 = "flex-start"
商品网格.背景颜色 = "#fafafa"
商品网格.边框 = "1px solid #e8e8e8"
商品网格.边框圆角 = "8px"
商品网格.内边距 = "16px"
添加组件(商品网格)

' ========== 创建商品卡片 ==========
函数 创建商品卡片(名称, 价格, 图标)
    变量 卡片 = 创建 弹性布局()
    卡片.方向 = "column"
    卡片.侧轴对齐 = "center"
    卡片.主轴对齐 = "center"
    卡片.宽度 = 150
    卡片.高度 = 180
    卡片.背景颜色 = "#ffffff"
    卡片.边框 = "1px solid #e8e8e8"
    卡片.边框圆角 = "8px"
    卡片.内边距 = "12px"
    
    变量 图标标签 = 创建 标签()
    图标标签.文本 = 图标
    图标标签.字体大小 = "32px"
    卡片.添加组件(图标标签)
    
    变量 名称标签 = 创建 标签()
    名称标签.文本 = 名称
    名称标签.字体大小 = "14px"
    名称标签.字体粗细 = "bold"
    名称标签.内边距 = "8px 0 4px"
    卡片.添加组件(名称标签)
    
    变量 价格标签 = 创建 标签()
    价格标签.文本 = "¥" + 价格
    价格标签.字体大小 = "16px"
    价格标签.文本颜色 = "#ff4d4f"
    卡片.添加组件(价格标签)
    
    返回 卡片
结束 函数

' 添加商品卡片
商品网格.添加组件(创建商品卡片("无线耳机", 299, "🎧"))
商品网格.添加组件(创建商品卡片("运动手表", 599, "⌚"))
商品网格.添加组件(创建商品卡片("蓝牙音箱", 199, "🔊"))
商品网格.添加组件(创建商品卡片("手机支架", 49, "📱"))
商品网格.添加组件(创建商品卡片("充电宝", 129, "🔋"))
商品网格.添加组件(创建商品卡片("智能手环", 399, "💪"))

属性详解

方向

• 类型： 文本型
• 说明： 设置或获取子组件的排列方向。可选值：
  • "row"（默认）：水平从左到右
  • "row-reverse"：水平从右到左
  • "column"：垂直从上到下
  • "column-reverse"：垂直从下到上

换行模式

• 类型： 文本型
• 说明： 设置或获取子组件超出容器宽度/高度时是否换行。可选值：
  • "nowrap"（默认）：不换行，子组件可能会溢出
  • "wrap"：换行
  • "wrap-reverse"：换行且顺序反转

主轴对齐

• 类型： 文本型
• 说明： 设置或获取子组件在主轴方向上的对齐方式。可选值：
  • "flex-start"：起始端对齐
  • "flex-end"：末端对齐
  • "center"：居中对齐
  • "space-between"：两端对齐，项目间等距
  • "space-around"：项目两侧间隔相等
  • "space-evenly"：项目均匀分布，两端与边缘距离相等

侧轴对齐

• 类型： 文本型
• 说明： 设置或获取子组件在侧轴方向上的对齐方式。可选值：
  • "stretch"（默认）：拉伸填充
  • "flex-start"：起始端对齐
  • "flex-end"：末端对齐
  • "center"：居中对齐
  • "baseline"：基线对齐

整体对齐

• 类型： 文本型
• 说明： 设置或获取多根轴线（多行/多列）在侧轴方向上的对齐方式。可选值同 主轴对齐，默认为 "stretch"。

子项间距

• 类型： 文本型
• 说明： 设置或获取子组件之间的间距，支持像素值（如 "16px"）。该间距同时作用于行和列，是 gap 属性的封装。

函数详解

添加组件(组件)

• 功能： 向布局中添加一个子组件，子组件会按照布局规则自动排列。
• 参数： 组件，继承自 视图 的组件实例。
• 返回值： 无。
• 示例： 弹性布局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")

事件说明

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

⚠️ 注意事项

1. 方向与主轴：方向 决定了主轴方向，主轴对齐 和 侧轴对齐 基于主轴/侧轴生效，注意区分。
2. 子项间距 与 外边距 的区别：子项间距 作用于所有子项之间，统一且易用；而子项自身的 外边距 可单独控制，两者可叠加。
3. 换行与溢出：当 换行模式 = "wrap" 且子项总宽度超出容器宽度时，会自动换行；若 换行模式 = "nowrap"，子项会溢出或挤压。
4. 子项宽度/高度：子组件的 宽度 和 高度 可设为 "flex-grow" 以填充剩余空间，或 "flex-shrink" 在空间不足时收缩。
5. 嵌套布局：弹性布局可任意嵌套，实现复杂布局结构（如水平导航栏中嵌套垂直菜单）。
6. 与 绝对布局 的区别：弹性布局 自动管理子项位置，适合响应式布局；绝对布局 需要手动设置每个子项的位置（左边、顶边），适合精确控制场景。
7. 性能：弹性布局是纯 CSS 布局，性能优秀，适合大多数场景。

相关文档

• 文档框架基础类_视图 —— 视图类提供的所有通用属性和方法
• 文档布局类组件_绝对布局 —— 精确定位布局
• 文档轻语言网站：轻语言语法速查 —— 拉姆达表达式、循环语句等
• 文档综合演示：商品展示网格 —— 实际应用示例