FlexLayout 基础示例

功能说明

演示如何使用 FlexLayout 库进行 Flexbox 布局计算。本示例展示了如何创建布局节点、设置子节点尺寸、执行布局计算和打印布局结果。

FlexLayout 是 Flexible Box 布局算法的 C 语言实现，遵循 CSS Flexbox 标准算法，支持 margin/padding、flex-direction、wrap、align-items、justify-content 等特性。

硬件连接

无需外部连接，FlexLayout 为纯软件布局计算库。

示例内容

创建根节点（root）
创建两个子节点（child1、child2）
设置子节点的宽度和高度为 50
将子节点添加到根节点
执行布局计算（使用未定义的约束尺寸）
打印布局结果
递归释放所有节点内存

编译

重要提示：编译前需要先确认当前示例支持的目标板型，然后将板型标识传给 -DBOARD。请按以下方式选择：

确认示例限制：查看当前示例 README 中的硬件连接和注意事项，确认是否限定板型。
参考示例配置：查看相关示例目录下的 sample.yaml，确认支持的板型。
填写板型标识：SDK 内置板型的标识为 boards/ 下的目录名。例如实际使用的板型目录为 boards/<板型名称>/，则编译参数填写为 -DBOARD=<板型名称>。

在 SDK 根目录执行编译，并将命令中的 <示例路径> 和 <板型名称> 替换为实际值。

Linux 使用 build.sh：

# 通用命令
./build.sh -C -S samples/<示例路径> -DBOARD=<板型名称>

# 示例：使用 arcs_evb 开发板
./build.sh -C -S samples/<示例路径> -DBOARD=arcs_evb

Windows PowerShell 使用 build.ps1：

# 通用命令
.\build.ps1 -C -S samples/<示例路径> -DBOARD=<板型名称>

# 示例：使用 arcs_evb 开发板
.\build.ps1 -C -S samples/<示例路径> -DBOARD=arcs_evb

Note

确保已安装对应平台的工具链和 ListenAI 开发工具包。Windows 环境请先执行 .\env.ps1 或直接使用 .\build.ps1 自动加载环境。

注意事项：-DBOARD 填写的是板型标识，不是芯片系列名称。如果示例有板型专用配置或额外编译参数，以示例 README 中的说明为准。

烧录

编译完成后，使用 SDK tools/burn 目录下的 cskburn 工具烧录固件。请先根据目标板型和当前示例确定芯片系列、串口设备、烧录地址和固件路径。

Linux：

# 通用命令
./tools/burn/cskburn -C <芯片系列> -s <串口设备> -b 3000000 <烧录地址> <固件路径>

# 示例：使用 arcs_evb 开发板
./tools/burn/cskburn -s /dev/ttyUSB0 -b 3000000 0x0 build/arcs.bin -C arcs

Windows PowerShell：

# 通用命令
.\tools\burn\cskburn.exe -C <芯片系列> -s <串口号> -b 3000000 <烧录地址> <固件路径>

# 示例：使用 arcs_evb 开发板
.\tools\burn\cskburn.exe -C arcs -s COM7 -b 3000000 0x0 .\build\arcs.bin

Note

烧录参数说明：

-s /dev/ttyUSB0 / -s COM7：串口设备路径，需要根据实际情况修改 - Linux 系统：通常是 /dev/ttyUSB0 或 /dev/ttyACM0 - 可通过 ls /dev/tty* 命令查看可用串口设备 - Windows 系统：通常是 COM7、COM8 等，可在“设备管理器”的“端口”中查看 - 不同开发板或 USB 转串口芯片可能使用不同的设备名
-b 3000000：烧录波特率（3Mbps）
0x0：烧录起始地址
build/arcs.bin / .\build\arcs.bin：编译生成的固件路径
-C arcs：芯片类型

注意事项：

确保开发板已正确连接到电脑
如果无法识别串口设备，请检查 USB 连接线是否正常，或尝试其他 USB 端口

预期输出

********Arcs SDK 0.1.0 @ v0.0.23.temp.docs-96-gf56c5084660d********
Running on hart-id: 1
II/elog            [1034:42:44.158 1 elog_async] EasyLogger V2.2.99 is initialStart flexlayout sample
{
  result-padding: ize success.
0.0, nan, 0.0, nan
  children: [
    {
      width: 50.0
      height: 50.0
      result-x: nan
      result-padding: 0.0, nan, 0.0, nan
    }
    {
      width: 50.0
      height: 50.0
      result-x: nan
      result-padding: 0.0, nan, 0.0, nan
    }
  ]
}

说明：

输出开头包含系统启动信息和日志系统初始化信息
Start flexlayout sample 为示例开始提示
Flex_print() 会打印节点的布局信息，包括样式、结果和子节点信息（具体格式取决于 FlexPrintOptions 参数）

核心 API

API	说明
`Flex_newNode()`	创建新的布局节点
`Flex_setWidth()`	设置节点宽度
`Flex_setHeight()`	设置节点高度
`Flex_addChild()`	向节点添加子节点
`Flex_layout()`	执行布局计算
`Flex_print()`	打印节点布局信息
`Flex_freeNodeRecursive()`	递归释放节点及其所有子节点

关键代码

/* 创建根节点 */
FlexNodeRef root = Flex_newNode();

/* 创建子节点并设置尺寸 */
FlexNodeRef child1 = Flex_newNode();
Flex_setWidth(child1, 50);
Flex_setHeight(child1, 50);
Flex_addChild(root, child1);

FlexNodeRef child2 = Flex_newNode();
Flex_setWidth(child2, 50);
Flex_setHeight(child2, 50);
Flex_addChild(root, child2);

/* 执行布局计算 */
/* FlexUndefined 表示未定义的约束尺寸，scale 为缩放因子 */
Flex_layout(root, FlexUndefined, FlexUndefined, 1);

/* 打印布局结果 */
Flex_print(root, FlexPrintDefault);

/* 释放所有节点 */
Flex_freeNodeRecursive(root);

布局参数说明

Flex_layout 参数

constrainedWidth: 约束宽度，使用 FlexUndefined 表示未定义
constrainedHeight: 约束高度，使用 FlexUndefined 表示未定义
scale: 缩放因子，通常为 1.0

Flex_print 选项

FlexPrintDefault: 默认打印选项
FlexPrintStyle: 打印样式信息
FlexPrintResult: 打印布局结果
FlexPrintChildren: 打印子节点信息
FlexPrintHideUnspecified: 隐藏未指定的属性

注意事项

内存管理: 使用 Flex_freeNodeRecursive() 可以递归释放节点及其所有子节点；如果只需要释放单个节点，使用 Flex_freeNode()
节点所有权: 子节点会被父节点管理，释放父节点时会自动处理子节点（使用 Flex_freeNodeRecursive() 时）
布局计算: Flex_layout() 必须在添加完所有子节点后调用，才能正确计算布局
约束尺寸: 使用 FlexUndefined 表示未定义的约束，布局算法会根据内容自动计算
节点属性: 可以通过 Flex_set* 系列函数设置节点的各种属性（方向、对齐方式、边距等）
扩展特性: FlexLayout 支持扩展属性，如 spacing（元素间距）、line-spacing（行间距）、fixed（固定定位）等