AWTK 表格视图的基本用法

AWTK Table View的基本特点：

• 列表项无需事先创建。
• 数据无需全部加载到内存。
• 轻松支持数千万条数据记录。
• 表格中可以放文本、图片、编辑器、进度条、滑块和下拉框等各种控件。

1. 基本概念

• table_view_t 是表格视图的外壳，它的主要功能是协调 table_client_t 和滚动条。

• table_header_t 是表格的标题，它其实只是一个普通的容器，完全可以用 view 代替，但用 table_header_t 更具可读性。

• table_client_t 是表格的数据区，它是一个 table_row_t 的容器。

• table_row_t 表示表格中的一行，它只是个容器，里面可以文本、图片、编辑器、进度条、滑块和下拉框等各种控件。

table_view_t 的为了解决大量数据的问题，我们把数据分为三类：

• 虚拟区域。代表全部数据，它是虚拟的，无需加入到内存中来。

• 缓存区域。代表实际在内存中创建的部分，为了让滑动效果比较流畅，缓存区域是可视区域的 3 倍。

• 可视区域。代表当前呈现在窗口上的部分。

当拖到滚动条改变可视区域时，如果可视区域超出缓存区域，则调用用户提供的回调函数，更新缓存区域的位置和数据。

2. 用法

2.1 编写 XML

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

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

示例：

 1   <table_view x="10" y="10" w="-20" h="-80">
 2     <table_header x="0"  y="0" w="-12" h="30" name="title" children_layout="default(r=1,c=0,s=5,m=5)">
 3       <label w="20%" text="Name" />
 4       <label w="20%" text="Color"/>
 5       <label w="40%" text="Value" />
 6       <label w="20%" text="Action" />
 7     </table_header>
 8 
 9     <table_client name="table_client" x="0"  y="30" w="-12" h="-30" row_height="40">
10       <table_row children_layout="default(r=1,c=0,s=5,m=5)">
11         <label name="name"  w="20%" h="100%" text="name" />
12         <combo_box name="color" readonly="true" w="20%" h="80%" options="red;green;blue"/>
13         <slider name="value" w="40%" h="80%" />
14         <button name="remove" w="20%" h="80%" text="Remove" />
15       </table_row>
16     </table_client>
17     <scroll_bar_d name="vbar" x="right" y="0" w="12" h="100%" value="0"/>
18   </table_view>

2.1 编写准备数据的回调函数

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

 1 /**
 2  * @method table_client_set_on_load_data
 3  * 设置 加载数据的回调函数。
 4  * @param {widget_t*} widget widget 对象。
 5  * @param {table_client_on_load_data_t} on_load_data 回调函数。
 6  * @param {void*} ctx 回调函数的上下文。 
 7  *
 8  * @return {ret_t} 返回 RET_OK 表示成功，否则表示失败。
 9  */
10 ret_t table_client_set_on_load_data(widget_t* widget, table_client_on_load_data_t on_load_data,
11                                     void* ctx);

示例：

 1 static ret_t on_load_data(void* ctx, uint32_t index, widget_t* row) {
 2   char name[32];
 3   tk_snprintf(name, sizeof(name), "name:%u", index);
 4 
 5   widget_set_text_utf8(widget_lookup(row, "name", TRUE), name);
 6   widget_set_value(widget_lookup(row, "value", TRUE),index%100);
 7   widget_set_value(widget_lookup(row, "color", TRUE), 0);
 8 
 9   return RET_OK;
10 }
11 
12 ...
13   table_client_set_on_load_data(client, on_load_data, client);
14 ...

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

2.2 编写注册事件的回调函数

有时候，我们不是简单的显示数据，还要对数据进行编辑。此时需要设置一个回调函数，这个回调函数在 table_row 创建完成后调用。

 1 /**
 2  * @method table_client_set_on_create_row
 3  * 设置 创建行时的回调函数，在回调函数中可以注册控件的事件。
 4  * @param {widget_t*} widget widget 对象。
 5  * @param {table_client_on_create_row_t} on_create_row 回调函数，在回调函数加载数据。
 6  * @param {void*} ctx 回调函数的上下文。 
 7  *
 8  * @return {ret_t} 返回 RET_OK 表示成功，否则表示失败。
 9  */
10 ret_t table_client_set_on_create_row(widget_t* widget, table_client_on_create_row_t on_create_row,
11                                     void* ctx)

示例：

 1 static table_row_t* table_row_of(widget_t* child) {
 2   widget_t* iter = child;
 3   while(iter != NULL && !tk_str_eq(widget_get_type(iter), WIDGET_TYPE_TABLE_ROW)) {
 4     iter = iter->parent;
 5   }
 6 
 7   return TABLE_ROW(iter);
 8 }
 9 
10 static ret_t on_value_changed(void* ctx, event_t* e) {
11   table_row_t* row = table_row_of(WIDGET(e->target));
12 
13   log_debug("changed: %d value=%d\n", row->index, widget_get_value(WIDGET(e->target)));
14 
15   return RET_OK;
16 }
17 
18 static ret_t on_color_changed(void* ctx, event_t* e) {
19   table_row_t* row = table_row_of(WIDGET(e->target));
20 
21   log_debug("changed: %d value=%s\n", row->index, combo_box_get_text(WIDGET(e->target)));
22 
23   return RET_OK;
24 }
25 
26 static ret_t on_remove_clicked(void* ctx, event_t* e) {
27   table_row_t* row = table_row_of(WIDGET(e->target));
28 
29   log_debug("clicked: %d \n", row->index);
30 
31   return RET_OK;
32 }
33 
34 static ret_t on_create_row(void* ctx, uint32_t index, widget_t* row) {
35   widget_child_on(row, "value", EVT_VALUE_CHANGED, on_value_changed, NULL);
36   widget_child_on(row, "color", EVT_VALUE_CHANGED, on_color_changed, NULL);
37   widget_child_on(row, "remove", EVT_CLICK, on_remove_clicked, NULL);
38 
39   return RET_OK;
40 }
41 
42 ...
43   table_client_set_on_create_row(client, on_create_row, client);

在控件的事件处理函数中，可以通过 table_row_of 获取 row 对象，然后通过 row 对象的 index 属性，获取当前的行号，然后将数据保存到当前的行（如数据库）。