Home

Awesome

awtk-widget-table-view

AWTK 的 ListView 是一个非常强大的控件，在列表项目中可以放比如文本、图片、编辑器、进度条、滑块和下拉框等各种控件。

但是 ListView 最大的问题是，每个列表项都必须事先创建好，这就导致 ListView 显示大量数据时，存在下列问题：

所以 ListView 在 PC 可以用于显示少于 10K 的数据，而在嵌入式平台上，只能用于显示少于 500 条记录的数据。

TableView 控件就是为了解决 ListView 控件的不足，具有如下特点：

目前使用 32 位数据表示虚拟高度，最大记录数限制为 5000 万条记录。

准备

  1. 获取 awtk 并编译
git clone https://github.com/zlgopen/awtk.git
cd awtk; scons; cd -

运行

  1. 生成示例代码的资源
python scripts/update_res.py all

也可以使用 Designer 打开项目，之后点击 “打包” 按钮进行生成； 如果资源发生修改，则需要重新生成资源。

如果 PIL 没有安装，执行上述脚本可能会出现如下错误：

Traceback (most recent call last):
...
ModuleNotFoundError: No module named 'PIL'

请用 pip 安装：

pip install Pillow
  1. 编译
scons

完整编译选项请参考编译选项

  1. 运行
./bin/demo

./bin/csv_view

如何使用 table_view

使用 xml 创建 table_view

table_view 由 table_header（可选）、table_client 和 scroll_bar 组成。

在 table_client 中，只需要写一个 table_row，这个 table_row 只是作为模版，由 table_client 根据需要创建。

示例：

<table_view x="10" y="10" w="-20" h="-80">
  <table_header x="0"  y="0" w="-12" h="30" name="title" children_layout="default(r=1,c=0,s=5,m=5)">
    <label w="20%" text="Name" />
    <label w="20%" text="Color"/>
    <label w="40%" text="Value" />
    <label w="20%" text="Action" />
  </table_header>

  <table_client name="table_client" x="0"  y="30" w="-12" h="-30" row_height="40">
    <table_row children_layout="default(r=1,c=0,s=5,m=5)">
      <label name="name"  w="20%" h="100%" text="name" />
      <combo_box name="color" readonly="true" w="20%" h="80%" options="red;green;blue"/>
      <slider name="value" w="40%" h="80%" />
      <button name="remove" w="20%" h="80%" text="Remove" />
    </table_row>
  </table_client>
  <scroll_bar_d name="vbar" x="right" y="0" w="12" h="100%" value="0"/>
</table_view>

编写准备数据的回调函数

table_client 不需要预先创建全部的 table_row，而是在需要时调用回调函数，去填充指定行的数据。以当前的行号和 table_row 对象为参数，实现者在回调函数中，加载当前行的数据，然后设置到 row 的子控件中。

/**
 * @method table_client_set_on_load_data
 * 设置 加载数据的回调函数。
 * @param {widget_t*} widget widget 对象。
 * @param {table_client_on_load_data_t} on_load_data 回调函数。
 * @param {void*} ctx 回调函数的上下文。 
 *
 * @return {ret_t} 返回 RET_OK 表示成功，否则表示失败。
 */
ret_t table_client_set_on_load_data(widget_t* widget, table_client_on_load_data_t on_load_data,
                                    void* ctx);
/* 示例 */
static ret_t on_load_data(void* ctx, uint32_t index, widget_t* row) {
  char name[32];
  tk_snprintf(name, sizeof(name), "name:%u", index);

  widget_set_text_utf8(widget_lookup(row, "name", TRUE), name);
  widget_set_value(widget_lookup(row, "value", TRUE),index%100);
  widget_set_value(widget_lookup(row, "color", TRUE), 0);

  return RET_OK;
}

...
  table_client_set_on_load_data(client, on_load_data, client);
...

在本回调函数中，还可以调整控件的大小，设置控件的 style。

table_client 控件的属性名及作用如下表所示：

属性名作用
row_height行高
rows最大行数
yoffset偏移量
yslidable是否允许y方向滑动
yspeed_scaley方向偏移速度比例

table_client 控件其他特殊函数如下所示，以下两个函数所注册的回调函数执行时机分别是 table_row 创建完成后，与 table_row 创建前，用户可以在创建前后对数据进行预处理或者编辑操作：

typedef ret_t (*table_client_on_create_row_t)(void* ctx, uint32_t row_index, widget_t* row);
/**
 * @method table_client_set_on_create_row
 * 设置 创建行时的回调函数，在回调函数中可以注册控件的事件。
 * @param {widget_t*} widget widget对象。
 * @param {table_client_on_create_row_t} on_create_row 回调函数。
 * @param {void*} ctx 回调函数的上下文。 
 *
 * @return {ret_t} 返回RET_OK表示成功，否则表示失败。
 */
ret_t table_client_set_on_create_row(widget_t* widget, table_client_on_create_row_t on_create_row,
                                     void* ctx);

typedef ret_t (*table_client_on_prepare_row_t)(void* ctx, widget_t* client, uint32_t prepare_cnt);
/**
 * @method table_client_set_on_prepare_row
 * 设置 预处理行（创建行）的回调函数，在回调函数中可以创建行控件。
 * @param {widget_t*} widget widget对象。
 * @param {table_client_on_prepare_row_t} on_prepare_row 回调函数。
 * @param {void*} ctx 回调函数的上下文。 
 *
 * @return {ret_t} 返回RET_OK表示成功，否则表示失败。
 */
ret_t table_client_set_on_prepare_row(widget_t* widget,
                                      table_client_on_prepare_row_t on_prepare_row, void* ctx);

table_row 控件的属性名及作用如下表所示：

属性名作用
index行的编号

可以通过 tabel_row 的 index 属性来定位当前位置，以便进行保存等操作。

文档