首页 > 其他分享 >ftk学习记(list篇)

ftk学习记(list篇)

时间:2022-11-23 12:06:50浏览次数:47  
标签:info button list 学习 ftk model icon


    在开始今天的list主题之前,先看一下icon的运行效果。


ftk学习记(list篇)_ico


    今天说的list其实和这个icon差不多。大家只需要把这些icon想像成一条一条的item就可以了。同样,list的demo代码中也会有一个more的button,每次单击一下,就会增加几个item。闲话不多说,先看一下demo代码是怎么样的。



#include "ftk.h"

#include "ftk_list_view.h"
#include "ftk_list_render_default.h"
#include "ftk_list_model_default.h"

#define IDC_TEST_BUTTON 1000
int g_index = 0;
FtkBitmap* left_icon = NULL;
FtkBitmap* right_icon = NULL;

static Ret button_quit_clicked(void* ctx, void* obj)
{
ftk_quit();

return RET_OK;
}

static Ret button_more_clicked(void* ctx, void* obj)
{
int i = 0;
char text[32] = {0};
FtkListItemInfo info = {0};
FtkListModel* model = ctx;

for(i = 0; i < 4; i++)
{
g_index++;
ftk_snprintf(text, sizeof(text), "item%04d", g_index);
info.text = (text);
info.left_icon = left_icon;
info.right_icon = right_icon;
info.type = g_index%4;
ftk_list_model_add(model, &info);
}

return RET_OK;
}

Ret on_item_clicked(void* ctx, void* list)
{
FtkListItemInfo* info = NULL;
FtkListModel* model = ftk_list_view_get_model(list);
int i = ftk_list_view_get_selected(list);

ftk_list_model_get_data(model, i, (void**)&info);
if(info != NULL)
{
info->state = !info->state;
}
ftk_logd("%s: %d/%d\n", __func__,
ftk_list_view_get_selected(list),
ftk_list_model_get_total(model));

return RET_OK;
}

int FTK_MAIN(int argc, char* argv[])
{
int width = 0;
int height = 0;
char text[32] = {0};
FtkWidget* win = NULL;
FtkWidget* button = NULL;
FtkWidget* list = NULL;
FtkListModel* model = NULL;
FtkListRender* render = NULL;
FtkListItemInfo info = {0};
char filename[FTK_MAX_PATH+1] = {0};
ftk_init(argc, argv);

win = ftk_app_window_create();
width = ftk_widget_width(win);
height = ftk_widget_height(win);

list = ftk_list_view_create(win, 10, 5, width - 20, 3 * height/4-5);
ftk_list_view_set_clicked_listener(list, on_item_clicked, NULL);

model = ftk_list_model_default_create(10);
render = ftk_list_render_default_create();
ftk_snprintf(filename, FTK_MAX_PATH, "%s/alarm/%s",TESTDATA_DIR, FTK_STOCK_IMG_SUFFIX);
left_icon = ftk_bitmap_factory_load(ftk_default_bitmap_factory(), filename);
ftk_snprintf(filename, FTK_MAX_PATH, "%s/search/%s", TESTDATA_DIR, FTK_STOCK_IMG_SUFFIX);
right_icon = ftk_bitmap_factory_load(ftk_default_bitmap_factory(), filename);

g_index = 0;
for(g_index = 0; g_index < 4; g_index++)
{
ftk_snprintf(text, sizeof(text), "item%04d", g_index);
info.text = (text);
info.left_icon = left_icon;
info.right_icon = right_icon;
info.type = g_index%4;
ftk_list_model_add(model, &info);
}

ftk_list_view_init(list, model, render, 40);
ftk_list_model_unref(model);

button = ftk_button_create(win, width/4, 3 * height/4 + 5, width/4, 60);
ftk_widget_set_text(button, "more");
ftk_button_set_clicked_listener(button, button_more_clicked, model);

button = ftk_button_create(win, width/2, 3 * height/4 + 5, width/4, 60);
ftk_widget_set_text(button, "quit");
ftk_button_set_clicked_listener(button, button_quit_clicked, win);
ftk_window_set_focus(win, button);

ftk_widget_set_text(win, "list view demo");
ftk_widget_show_all(win, 1);
ftk_widget_set_attr(win, FTK_ATTR_QUIT_WHEN_CLOSE);

ftk_run();

return 0;
}


    细细看来,代码的流程非常眼熟。大家可以把注意力集中到list、model、render和info这几个变量上。其中,尤其需要注意的是list和info。list提供了一个显示空间,而info则用来表示每一个list的item。当然,每一个list item被选中的时候,on_item_clicked函数都会被调用。当然,除此之外系统也创建了两个button,两个callback函数分别是button_quit_clicked和button_more_clicked。具体的细节分析一下代码即可。


    好了,说了这么多,还是等着看下次的运行效果吧。




标签:info,button,list,学习,ftk,model,icon
From: https://blog.51cto.com/feixiaoxing/5880805

相关文章

  • ftk学习记(脚本篇)
      上一篇说到了对话框,今天就看看结果。  对话框不复杂,今天我们就来谈一谈脚本。有过android开发经验的朋友都知道,要想开发app,除了需要编写必要的代码,还需要编写一些......
  • ftk学习记(icon篇)
      在开始今天的文章之前,我们还是先看一下上一节的效果图。  大家可以参照上一节的讲解,是不是存在这样的button,是不是存在这样的wait_box控件,同样是不是可以看到wait......
  • ftk学习记(waitbox篇)
      前面说到了脚本,那么就看看ftk中demo与script搭配的效果是什么样的?  上面的效果图就类似于一个通讯录的输入功能,大家可以和之前的脚本对照起来看,检查一下是不是这......
  • ftk学习记(对话框篇)
      前面谈到了输入法,首先看一看效果。  上面有4个输入框,大家可以分别试试,看看效果如何。  今天,我们要说的是对话框。直接看demo代码好了,#include"ftk.h"static......
  • ftk学习记(输入法篇)
      前面说的是全屏设置,还是请大家看一下效果图。  想看全屏效果的,可以单击一下左边的button。如果恢复到原来的结果呢,单击一下右边的button。  所以这个demo其实......
  • ftk学习记(窗口全屏设置篇)
         好久不写博客了,今天续上。但是,我们还是看一下上一期的运行结果,  上面窗口中有5个button,有机会的朋友可以编译、运行一把。  今天,我们的文章比较简单,也......
  • ftk学习记(消息框篇)
      上一篇说到了输入框。闲话不多说,首先看结果显示,  大家看看效果是不是和我们之前说的一样。今天,我们谈一下消息狂。这种消息框其实应用得特别多,有警告用的,有提问的......
  • ftk学习记(进度条篇)
      首先,在开始今天的文章之前,我们还是给朋友们展示一下前面一段代码的运行效果。效果如下,  有兴趣的朋友可以找到这段代码,看一下运行的效果如何。  今天,我们可以......
  • ftk学习记(button篇)
      前面,我们说到了label,这里可以看一下label运行的效果是怎么样的。  大家可以对照上面的结果图,看看我们之前的描述是否正确。  说完了label,可以看看button是怎......
  • ftk学习记(首篇)
        很早之前就知道ftk了,当时主要是因为买了李先静的书,所以知道了这么一个项目。因为对这种gui的代码很感兴趣,所以在我闲暇的时候也会拿来看一看。从整个工程来看,代码......