📄 004. Widgets position - 📒 笔记文档

位置(position)

1. 绝对坐标定位 (Absolute Positioning)

lv_obj_set_pos(obj, x, y)
- 用法：同时设置 X 和 Y 坐标。
- 示例：lv_obj_set_pos(obj1, 100, 100);
- 特点：最常用，简洁明了。坐标原点通常是父容器的内容区域左上角（扣除 padding 后）。
lv_obj_set_x(obj, x) / lv_obj_set_y(obj, y)
- 用法：单独设置 X 或 Y 坐标。
- 示例：
```
lv_obj_set_x(obj1, 100);
lv_obj_set_y(obj1, 100);
```
- 特点：适用于只需要改变一个方向位置的场景，或者动态调整单个轴的位置。

注意：绝对坐标受父容器的 padding（内边距）影响。如果父容器设置了 padding，(0,0) 点实际上是 padding 之后的起始点。

2. 相对对齐定位 (Alignment)

这种方式基于父容器或另一个参考对象的特定锚点（如中心、左上角、右下角等）进行定位，更适合响应式布局或居中显示。

lv_obj_set_align(obj, align)
- 用法：将对象对齐到其父容器的指定位置。
- 示例：
```
lv_obj_set_align(obj1, LV_ALIGN_CENTER); // 居中
lv_obj_set_align(obj1, LV_ALIGN_TOP_MID); // 顶部中间
```
- 特点：自动计算位置，即使父容器大小改变，对象仍保持相对位置不变。
lv_obj_align(obj, parent, align, x_ofs, y_ofs)
- 用法：将对象对齐到指定 parent 的某个位置，并允许添加偏移量 (x_ofs, y_ofs)。
- 示例：
```
// 对齐到 base_widget 的中心，并向右偏移 10px，向下偏移 20px
lv_obj_align(obj1, LV_ALIGN_CENTER, 10, 20);
```
- 参数说明：
  - align: 对齐方式枚举（如 LV_ALIGN_CENTER, LV_ALIGN_OUT_RIGHT_MID 等）。
  - x_ofs, y_ofs: 在对齐基础上的额外像素偏移。
lv_obj_align_to(obj, base, align, x_ofs, y_ofs)
- 用法：将对象对齐到任意另一个对象 base 的特定位置。
- 示例：
```
// 将 obj2 放在 obj1 的右侧中间，间隔 10px
lv_obj_align_to(obj2, obj1, LV_ALIGN_OUT_RIGHT_MID, 10, 0);
```
- 特点：非常强大，用于构建复杂的相对布局（如按钮旁边的提示框）。

父布局自动定位

1. Flex 布局

 // 1. 设置父容器为 Flex 布局，方向为垂直排列
lv_obj_set_flex_flow(base_widget, LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(base_widget, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);

//会自动排序
lv_obj_t * obj1 = lv_obj_create(base_widget);
lv_obj_set_size(obj1, 100, 100);
lv_obj_t * obj2 = lv_obj_create(base_widget);
lv_obj_set_size(obj1, 100, 100);

2. Grid 布局 (网格)

// 定义列宽：两列，每列 50px
static lv_coord_t col_dsc[] = {50, 50, LV_GRID_TEMPLATE_LAST};
// 定义行高：两行，每行 50px
static lv_coord_t row_dsc[] = {50, 50, LV_GRID_TEMPLATE_LAST};

// 1. 设置父容器的网格描述(重要设置)
lv_obj_set_grid_dsc_array(base_widget, col_dsc, row_dsc);

// 占据第0列，第0行，跨度1列，跨度1行
lv_obj_set_grid_cell(obj1, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 0, 1);
    
// 占据第1列，第0行，跨度1列，跨度1行
lv_obj_set_grid_cell(obj2, LV_GRID_ALIGN_START, 1, 1, LV_GRID_ALIGN_START, 0, 1);

3. 简单的自动间距 (Pad)

lv_obj_set_flex_flow(base_widget, LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(base_widget, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
//设置子对象之间的间距
lv_obj_set_style_pad_row(base_widget, 40, 0);

//会自动排序 并且间距为40
lv_obj_t * obj1 = lv_obj_create(base_widget);
lv_obj_set_size(obj1, 100, 100);
lv_obj_t * obj2 = lv_obj_create(base_widget);
lv_obj_set_size(obj1, 100, 100);