void lv_layout_simple_grid()
{
// 定义行和列描述符的数组,数组的最后一个元素必须是LV_GRID_TEMPLATE_LAST
static lv_coord_t col_dsc[] = {70, 70, 70, LV_GRID_TEMPLATE_LAST}; // 3行,分别为:70,70,70 像素的宽度
static lv_coord_t row_dsc[] = {50, 50, 50, LV_GRID_TEMPLATE_LAST}; // 3列,分别为:50,50,50 像素的高度
lv_obj_t * cont = lv_obj_create(lv_scr_act()); // 基于屏幕创建一个容器对象
lv_obj_set_size(cont, 300, 220); // 设置对象宽度和高度
lv_obj_center(cont); // 设置对象居屏幕中间显示
lv_obj_set_layout(cont, LV_LAYOUT_GRID); //设置对象使用网格布局
lv_obj_set_style_grid_column_dsc_array(cont, col_dsc, 0); // 设置对象网格布局行列数组
lv_obj_set_style_grid_row_dsc_array(cont, row_dsc, 0); // 设置对象网格布局列描述行数组
lv_obj_t * label = NULL;
lv_obj_t * obj = NULL;
static lv_style_t obj_style;
lv_style_init(&obj_style); // 初始化按钮样式
lv_style_set_radius(&obj_style, 5); // 设置样式圆角弧度
int i = 0;
for(i = 0; i < 9; i++)
{
int col = i % 3;
int row = i / 3;
obj = lv_btn_create(cont);
if (obj != NULL)
{
// 设置对应在网格布局中水平和垂直方向弹簧拉伸
lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1, LV_GRID_ALIGN_STRETCH, row, 1);
lv_obj_add_style(obj, &obj_style, 0); // 给对象添加样式
label = lv_label_create(obj); // 基于对象创建一个标签
if (label != NULL)
{
lv_label_set_text_fmt(label, "c%d, r%d", col, row); // 设置标签文本
lv_obj_center(label); // 标签基于父对象居中显示
}
}
}
}
16 lvgl 网格布局
最新推荐文章于 2024-06-20 08:13:15 发布