FlexLayout 基础示例

功能说明

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

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

硬件连接

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

示例内容

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

编译

重要提示：在编译前，请先确认您使用的开发板型号。SDK 目前支持以下开发板：

arcs_evb - ARCS EVB 评估板
arcs_mini - ARCS Mini 开发板

根据您的开发板型号，选择对应的编译命令：

在示例目录下执行编译:

# 使用 arcs_evb 开发板
./build.sh -C -DBOARD=arcs_evb

# 或使用 arcs_mini 开发板
./build.sh -C -DBOARD=arcs_mini

Note

如果在 SDK 根目录执行，需要指定示例路径:

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

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

Note

确保已安装对应的工具链。

烧录

编译完成后，使用 SDK tools 目录下的 cskburn 工具烧录固件:

./tools/burn/cskburn -s /dev/ttyUSB0 -b 3000000 0x0 build/arcs.bin -C arcs

Note

烧录参数说明：

-s /dev/ttyUSB0：串口设备路径，需要根据实际情况修改 - Linux 系统：通常是 /dev/ttyUSB0 或 /dev/ttyACM0 - 可通过 ls /dev/tty* 命令查看可用串口设备 - 不同开发板或 USB 转串口芯片可能使用不同的设备名
-b 3000000：烧录波特率（3Mbps）
0x0：烧录起始地址
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（固定定位）等