AWTK自定义控件篇

AWTK 自定义控件篇

一，前序

  之前上一篇文章中简单介绍了 AWTK 本身自带的控件（AWTK系统控件篇），但是实际上我们在写一些复杂的 UI 时候， AWTK 本身的控件其实是不够用的，尤其一些特殊的 UI 。这个时候我们该怎样办呢？
  现在就引入我们本章节中的自定义控件篇，我们自定义一些控件，给我们专属的程序使用，但是这些自定义的控件最终还是会接入到 AWTK 的体系中，遵循 AWTK 的消息循环机制，来保证 AWTK 整个逻辑不会乱套了，所以我们的自定义控件，简单的来说就是重载 AWTK 控件的各种虚函数。

二，了解控件结构

  在写自定义控件前，先了解一下 AWTK 控件的各种虚表函数指针：

/* awtk/src/base/widget.h 文件 */
struct _widget_vtable_t {
   
 /* 省略了一些成员变量，为了聚焦需要重载的虚表函数 */
  widget_create_t create;
  widget_get_prop_t get_prop;
  widget_set_prop_t set_prop;
  widget_invalidate_t invalidate;
  widget_find_target_t find_target;
  widget_get_prop_default_value_t get_prop_default_value;

  widget_on_copy_t on_copy;
  widget_on_keyup_t on_keyup;
  widget_on_keydown_t on_keydown;
  widget_on_wheel_t on_wheel;
  widget_on_paint_background_t on_paint_background;
  widget_on_paint_self_t on_paint_self;
  widget_on_paint_children_t on_paint_children;
  widget_on_paint_border_t on_paint_border;
  widget_on_paint_begin_t on_paint_begin;
  widget_on_paint_end_t on_paint_end;
  widget_on_pointer_down_t on_pointer_down;
  widget_on_pointer_move_t on_pointer_move;
  widget_on_pointer_up_t on_pointer_up;
  widget_on_context_menu_t on_context_menu;
  widget_on_layout_children_t on_layout_children;
  widget_on_add_child_t on_add_child;
  widget_on_remove_child_t on_remove_child;
  widget_on_attach_parent_t on_attach_parent;
  widget_on_detach_parent_t on_detach_parent;
  widget_on_event_t on_event;
  widget_on_event_before_children_t on_event_before_children;
  widget_on_destroy_t on_destroy;
};

  上面的代码中，我们可以看到一个 widget 中有很多的函数指针，这些函数指针是用来给我们载重对应的触发事件用的，这就是 AWTK 的控件多态性的表现，但是这么多的函数指针，我们是不是要把所有的函数都重载呢？但是不需要，具体重载哪一些函数，就需要看我们实际的用法来决定，下面给出每个重载函数表的定义：

函数指针	用途
create	控件创建函数指针，一般都会重载，尤其是该控件有自己特有的成员变量的时候。
get_prop	控件获取对应的成员变量的函数指针，一般是获取 UI 中的 XML 定义的特有的成员变量。
set_prop	控件设置对应的成员变量的函数指针，一般是设置 UI 中的 XML 定义的其他特有的成员变量。
invalidate	调用 widget_invalidate 函数（刷新控件）结束后，会触发该函数指针，一般不需要重载。
find_target	在查找焦点是否落在该控件的函数
get_prop_default_value	用来补充 get_prop 的函数指针，一般只重载 set_prop 就足够了。
on_copy	调用 widget_clone 函数（克隆控件）后，会触发该函数指针
on_keyup	当鼠标焦点在该控件中，同时触发鼠标弹起事件后触发该函数指针。
on_keydown	当鼠标焦点在该控件中，同时触发鼠标按下事件后触发该函数指针。
on_wheel	当鼠标焦点在该控件中，同时触发鼠标滚轮事件后触发该函数指针。
on_paint_background	当绘制控件的背景的时候触发该函数指针
on_paint_self	当绘制控件的背景的时候触发该函数指针，同时会取代默认绘制函数，改用该函数指针来绘制。
on_paint_children	当绘制控件的子集对象的时候触发该函数指针，同时会取代默认的函数，改用该函数指针来绘制。
on_paint_border	当绘制控件的边框的时候触发该函数指针，同时会取代默认的函数，改用该函数指针来绘制。
on_paint_begin	当绘制控件之前的时候，触发该函数指针。
on_paint_end	当绘制控件完成后的时候，触发该函数指针。
on_pointer_down	当鼠标（或者触摸屏）点下在该控件中，触发该函数指针。
on_pointer_move	当鼠标（或者触摸屏）在该控件中移动，触发该函数指针。
on_pointer_up	当鼠标（或者触摸屏）弹起在该控件中，触发该函数指针。
on_context_menu	弹出上下文菜单后，触发该函数指针。
on_layout_children	重新布局子控件的时候，触发该函数指针。
on_add_child	添加子控件的时候，触发该函数指针。
on_remove_child	移除子控件的时候，触发该函数指针。
on_attach_parent	当前控件添加到父控件的时候，触发该函数指针。
on_detach_parent	当前控件被父控件移除的时候，触发该函数指针。
on_event	接受各种事件的回调函数，一般都会重载这个函数来接受控件触发的事件。
on_event_before_children	当鼠标按下后，回调查找其子对象前触发该函数指针。
on_destroy	当控件释放后，触发该函数指针，一般是为了释放特有的成员变量的时候才会重载该函数。

备注：

1. on_keyup 和 on_keydown 是属于窗口管理器直接把按键发给自己才会触发的函数指针，一般我们不用到这么细，所以可以不用理。而 on_pointer_XXXXX 函数指针是鼠标或者触摸事件直接触发的。
2. 一般自定义控件都是为了画特有的 UI 为主，所以一般都会重载 on_paint_XXXX 的函数指针为主。
3. 如果控件有特有的成员变量，同时希望通过 xml 上面定义后，直接传给控件的话，就可以通过重载 set_prop 和 get_prop 函数来实现。

三，自定义控件代码

  这里打算抛砖引玉的做法，写一个简单的自定义控件，大概把上面的讲到的东西融入起来，让大家更加容易明白一点，这次只是简单写一个三角形的按钮控件，由于 AWTK 本身是不提供三角形的按钮，所以这个时候就需要用到自定义控件了，下面是创建自定义控件的步骤：

1. 创建 triangle_button.h 文件，并写入下面的代码：

/* triangle_button.h */
#ifndef TK_TRANGLE_BUTTON_H
#define TK_TRANGLE_BUTTON_H

#include "base/widget.h"

BEGIN_C_DECLS

typedef struct _triangle_button_t {
   
  widget_t widget;
  /* 标记三角形向左还是向右 */
  bool_t is_left;
  /* 标记按钮是否按下 */
  bool_t pressed;
} triangle_button_t;

/**
 * @method triangle_button_create
 * 创建triangle_button对象
 * @annotation ["constructor", "scriptable"]
 * @param {widget_t*} parent 父控件
 * @param {xy_t} x x坐标
 * @param {xy_t} y y坐标
 * @param {wh_t} w 宽度
 * @param {wh_t} h 高度
 *
 * @return {widget_t*}