LVGL lv_cont 容器(8)

lv_cont

lv_cont作用是用来解决变化的子对象布局问题,比如父对象中的子对象增加或者减少时原先的布局为了美观其他子对象位置可能需要改变,手动调用lv_set_pos比较繁琐。所以lv_cont主要有Layout和Auto fit 2个特性来解决这个问题。
相关API在lv_cont.h

layout 设置类型

/** Container layout options*/
enum {
    LV_LAYOUT_OFF = 0, /**< No layout */
    LV_LAYOUT_CENTER, /**< Center objects */

    /**
     * COLUMN:
     * - Place the object below each other
     * - Keep `pad_top` space on the top
     * - Keep `pad_inner` space between the objects
     */
    LV_LAYOUT_COLUMN_LEFT,      /**< Column left align*/
    LV_LAYOUT_COLUMN_MID,       /**< Column middle align*/
    LV_LAYOUT_COLUMN_RIGHT,     /**< Column right align*/

    /**
     * ROW:
     * - Place the object next to each other
     * - Keep `pad_left` space on the left
     * - Keep `pad_inner` space between the objects
     * - If the object which applies the layout has `base_dir == LV_BIDI_DIR_RTL`
     *   the row will start from the right applying `pad.right` space
     */
    LV_LAYOUT_ROW_TOP,          /**< Row top align*/
    LV_LAYOUT_ROW_MID,          /**< Row middle align*/
    LV_LAYOUT_ROW_BOTTOM,       /**< Row bottom align*/


    /**
     * PRETTY:
     * - Place the object next to each other
     * - If there is no more space start a new row
     * - Respect `pad_left` and `pad_right` when determining the available space in a row
     * - Keep `pad_inner` space between the objects in the same row
     * - Keep `pad_inner` space between the objects in rows
     * - Divide the remaining horizontal space equally
     */
    LV_LAYOUT_PRETTY_TOP,       /**< Row top align*/
    LV_LAYOUT_PRETTY_MID,       /**< Row middle align*/
    LV_LAYOUT_PRETTY_BOTTOM,    /**< Row bottom align*/

    /**
     * GRID
     * - Place the object next to each other
     * - If there is no more space start a new row
     * - Respect `pad_left` and `pad_right` when determining the available space in a row
     * - Keep `pad_inner` space between the objects in the same row
     * - Keep `pad_inner` space between the objects in rows
     * - Unlike `PRETTY`, `GRID` always keep `pad_inner` space horizontally between objects
     *   so it doesn't divide the remaining horizontal space equally
     */
    LV_LAYOUT_GRID,   /**< Align same-sized object into a grid*/

    _LV_LAYOUT_LAST
};
typedef uint8_t lv_layout_t;

fit 设置类型

/**
 * How to resize the container around the children.
 */
enum {
    LV_FIT_NONE,  /**< Do not change the size automatically*/
    LV_FIT_TIGHT, /**< Shrink wrap around the children */
    LV_FIT_PARENT, /**< Align the size to the parent's edge*/
    LV_FIT_MAX,  /**< Align the size to the parent's edge first but if there is an object out of it
                     then get larger */
    _LV_FIT_LAST
};
typedef uint8_t lv_fit_t;

样式设置

/*Part of the container*/
enum {
    LV_CONT_PART_MAIN = LV_OBJ_PART_MAIN,
    _LV_CONT_PART_VIRTUAL_LAST = _LV_OBJ_PART_VIRTUAL_LAST,
    _LV_CONT_PART_REAL_LAST = _LV_OBJ_PART_REAL_LAST,
};

可以看出其实是当作基础对象了

例子

void lv_ex_cont_1(void)
{
    lv_obj_t * cont;

    cont = lv_cont_create(lv_scr_act(), NULL);
    lv_obj_set_auto_realign(cont, true);                    /* cont 对象相对屏幕对象自动对齐*/
    lv_obj_align_origo(cont, NULL, LV_ALIGN_CENTER, 0, 0);  /*cont相对屏幕居中*/
	/*这里设置cont 居中并自动对齐是因为下面cont 4个方向都是自动包裹fit模式
	或者左边和上面设置成LV_FIT_NONE禁止自适应*/
    lv_cont_set_fit(cont, LV_FIT_TIGHT);//4 个方向都设置成 LV_FIT_TIGHT,内部调用lv_cont_set_fit4
    lv_cont_set_layout(cont, LV_LAYOUT_COLUMN_MID);//设置成COLUMN_MID layout方式

	lv_obj_t * label;
	label = lv_label_create(cont, NULL);
	lv_label_set_text(label, "Short text");

	/*Refresh and pause here for a while to see how `fit` works*/
	uint32_t t;
	lv_refr_now(NULL);
	t = lv_tick_get();
	while (lv_tick_elaps(t) < 500);

	label = lv_label_create(cont, NULL);
	lv_label_set_text(label, "It is a long text");

	/*Wait here too*/
	lv_refr_now(NULL);
	t = lv_tick_get();
	while (lv_tick_elaps(t) < 500);

	label = lv_label_create(cont, NULL);
	lv_label_set_text(label, "Here is an even longer text");
}

效果
在这里插入图片描述

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
void lv_example_scroll_2_dir(void) { #if 1 lv_obj_t* cont = lv_obj_create(lv_scr_act()); lv_obj_set_size(cont, 400, 300); lv_obj_add_flag(cont, LV_OBJ_FLAG_SCROLL_ONE); /*Allow max 1 page swipe*/ lv_obj_set_scroll_snap_x(cont, LV_SCROLL_SNAP_CENTER); /*Snap a page to the center*/ lv_obj_set_scrollbar_mode(cont, LV_SCROLLBAR_MODE_OFF); lv_obj_add_event_cb(cont, scroll_end_event, LV_EVENT_SCROLL_BEGIN/*LV_EVENT_ALL*//*LV_EVENT_SCROLL*//*LV_EVENT_SCROLL_END*/, NULL); lv_obj_add_event_cb(cont, scroll_end_event, LV_EVENT_SCROLL_END, NULL); lv_obj_center(cont); /*A grid for the left center and right pages*/ lv_coord_t col_dsc[] = { LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_TEMPLATE_LAST }; lv_coord_t row_dsc[] = { LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST }; lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc); /*Create 5 pages*/ for (int i = 0; i < 10; i++) { lv_obj_t* obj = lv_obj_create(cont); lv_obj_set_size(obj, lv_pct(33), lv_pct(100)); lv_obj_t* label = lv_label_create(obj); lv_label_set_text_fmt(label, "Page %d", i); lv_obj_set_style_border_width(obj, 0, 0); } /*Page 2, 3 hidden, page 4, 0, 1 are placed to the grid */ //lv_obj_add_flag(lv_obj_get_child(cont, 2), LV_OBJ_FLAG_HIDDEN); //lv_obj_add_flag(lv_obj_get_child(cont, 3), LV_OBJ_FLAG_HIDDEN); //lv_obj_set_grid_cell(lv_obj_get_child(cont, 4), LV_GRID_ALIGN_CENTER, 0, 1, LV_GRID_ALIGN_CENTER, 0, 1); //lv_obj_set_grid_cell(lv_obj_get_child(cont, 0), LV_GRID_ALIGN_CENTER, 1, 1, LV_GRID_ALIGN_CENTER, 0, 1); //lv_obj_set_grid_cell(lv_obj_get_child(cont, 1), LV_GRID_ALIGN_CENTER, 2, 1, LV_GRID_ALIGN_CENTER, 0, 1); lv_obj_set_grid_cell(lv_obj_get_child(cont, 0), LV_GRID_ALIGN_CENTER, 0, 1, LV_GRID_ALIGN_CENTER, 0, 1); lv_obj_set_grid_cell(lv_obj_get_child(cont, 1), LV_GRID_ALIGN_CENTER, 1, 1, LV_GRID_ALIGN_CENTER, 0, 1); lv_obj_set_grid_cell(lv_obj_get_child(cont, 2), LV_GRID_ALIGN_CENTER, 2, 1, LV_GRID_ALIGN_CENTER, 0, 1); lv_obj_set_grid_cell(lv_obj_get_child(cont, 3), LV_GRID_ALIGN_CENTER, 3, 1, LV_GRID_ALIGN_CENTER, 0, 1); lv_obj_set_grid_cell(lv_obj_get_child(cont, 4), LV_GRID_ALIGN_CENTER, 4, 1, LV_GRID_ALIGN_CENTER, 0, 1); /*Be sure page 0 is centered*/ lv_obj_scroll_to_view(lv_obj_get_child(cont, 0), LV_ANIM_OFF); }帮我注释一下这段代码
05-31

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值