瓦片视图 (lv_tileview)

概述

瓦片视图是一个容器对象，其元素（称为瓦片）可以以网格形式排列。 用户可以通过滑动在瓦片之间导航。 可以单独禁用瓦片上的任何滑动方向，以防止从一个瓦片移动到另一个瓦片。

如果瓦片视图是屏幕大小，用户界面类似于您可能在智能手表上看到的界面。

部件和样式

瓦片视图由 lv_obj 容器和 lv_obj 瓦片构建。

部件和样式的工作方式与 lv_obj 相同。

用法

添加瓦片

lv_tileview_add_tile(tileview, row_id, col_id, dir) 在第 row_id 行和第 col_id 列创建一个新瓦片。 dir 可以是 LV_DIR_LEFT/RIGHT/TOP/BOTTOM/HOR/VER/ALL 或 OR 值，用于通过滑动启用移动到给定方向的相邻瓦片。

返回值是一个 lv_obj_t *，可以在其上创建选项卡的内容。

更改瓦片

瓦片视图可以使用 lv_obj_set_tile(tileview, tile_obj, LV_ANIM_ON/OFF) 或 lv_obj_set_tile_id(tileview, col_id, row_id, LV_ANIM_ON/OFF) 滚动到某个瓦片。

事件

  • LV_EVENT_VALUE_CHANGED 当通过滚动加载新瓦片时发送。可以使用 lv_tileview_get_tile_act(tabview) 获取当前瓦片。

按键

按键 不由瓦片视图处理。

了解更多关于按键的信息。

示例

Tileview with content

C code  

 GitHub
#include "../../lv_examples.h"
#if LV_USE_TILEVIEW && LV_BUILD_EXAMPLES

/**
 * Create a 2x2 tile view and allow scrolling only in an "L" shape.
 * Demonstrate scroll chaining with a long list that
 * scrolls the tile view when it can't be scrolled further.
 */
void lv_example_tileview_1(void)
{
    lv_obj_t * tv = lv_tileview_create(lv_scr_act());

    /*Tile1: just a label*/
    lv_obj_t * tile1 = lv_tileview_add_tile(tv, 0, 0, LV_DIR_BOTTOM);
    lv_obj_t * label = lv_label_create(tile1);
    lv_label_set_text(label, "Scroll down");
    lv_obj_center(label);


    /*Tile2: a button*/
    lv_obj_t * tile2 = lv_tileview_add_tile(tv, 0, 1, LV_DIR_TOP | LV_DIR_RIGHT);

    lv_obj_t * btn = lv_btn_create(tile2);

    label = lv_label_create(btn);
    lv_label_set_text(label, "Scroll up or right");

    lv_obj_set_size(btn, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_obj_center(btn);

    /*Tile3: a list*/
    lv_obj_t * tile3 = lv_tileview_add_tile(tv, 1, 1, LV_DIR_LEFT);
    lv_obj_t * list = lv_list_create(tile3);
    lv_obj_set_size(list, LV_PCT(100), LV_PCT(100));

    lv_list_add_btn(list, NULL, "One");
    lv_list_add_btn(list, NULL, "Two");
    lv_list_add_btn(list, NULL, "Three");
    lv_list_add_btn(list, NULL, "Four");
    lv_list_add_btn(list, NULL, "Five");
    lv_list_add_btn(list, NULL, "Six");
    lv_list_add_btn(list, NULL, "Seven");
    lv_list_add_btn(list, NULL, "Eight");
    lv_list_add_btn(list, NULL, "Nine");
    lv_list_add_btn(list, NULL, "Ten");

}

#endif

MicroPython code  

 GitHub Simulator
#
# Create a 2x2 tile view and allow scrolling only in an "L" shape.
# Demonstrate scroll chaining with a long list that
# scrolls the tile view when it can't be scrolled further.
#
tv = lv.tileview(lv.scr_act())

# Tile1: just a label
tile1 = tv.add_tile(0, 0, lv.DIR.BOTTOM)
label = lv.label(tile1)
label.set_text("Scroll down")
label.center()

# Tile2: a button
tile2 = tv.add_tile(0, 1, lv.DIR.TOP | lv.DIR.RIGHT)

btn = lv.btn(tile2)

label = lv.label(btn)
label.set_text("Scroll up or right")

btn.set_size(lv.SIZE.CONTENT, lv.SIZE.CONTENT)
btn.center()

# Tile3: a list
tile3 = tv.add_tile(1, 1, lv.DIR.LEFT)
list = lv.list(tile3)
list.set_size(lv.pct(100), lv.pct(100))

list.add_btn(None, "One")
list.add_btn(None, "Two")
list.add_btn(None, "Three")
list.add_btn(None, "Four")
list.add_btn(None, "Five")
list.add_btn(None, "Six")
list.add_btn(None, "Seven")
list.add_btn(None, "Eight")
list.add_btn(None, "Nine")
list.add_btn(None, "Ten")

API

Functions

lv_obj_t *lv_tileview_create(lv_obj_t *parent)

Create a Tileview object

Parameters

parent -- pointer to an object, it will be the parent of the new tileview

Returns

pointer to the created tileview

lv_obj_t *lv_tileview_add_tile(lv_obj_t *tv, uint8_t col_id, uint8_t row_id, lv_dir_t dir)
void lv_obj_set_tile(lv_obj_t *tv, lv_obj_t *tile_obj, lv_anim_enable_t anim_en)
void lv_obj_set_tile_id(lv_obj_t *tv, uint32_t col_id, uint32_t row_id, lv_anim_enable_t anim_en)
lv_obj_t *lv_tileview_get_tile_act(lv_obj_t *obj)

Variables

const lv_obj_class_t lv_tileview_class
const lv_obj_class_t lv_tileview_tile_class
struct lv_tileview_t

Public Members

lv_obj_t obj
lv_obj_t *tile_act
struct lv_tileview_tile_t

Public Members

lv_obj_t obj
lv_dir_t dir