其他分享
首页 > 其他分享> > AWTK 表格视图的基本用法

AWTK 表格视图的基本用法

作者:互联网

AWTK 表格视图的基本用法

AWTK Table View的基本特点:

1. 基本概念

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

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

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 属性,获取当前的行号,然后将数据保存到当前的行(如数据库)。

标签:widget,函数,表格,视图,client,AWTK,table,回调,row
来源: https://www.cnblogs.com/dreamboy2000/p/15411962.html