一种相对简洁的RTGUI添加控件方法

发布于 2012-12-18 23:56:19 浏览：13883 订阅该版

实现如下效果，
1） 绘制4个按键，分别为上、下、左、右，并排列成特殊的形状
2）在按键up上实现点击按键后，按键字符发生变化的效果，这需要通过自己实现按键的事件处理函数实现。
3）为这四个按键都设置onbutton函数，即点击按键后修改某处label的效果
4）为了精简代码，设计了一个简单的数据结构来循环创建/添加/绘制/设置 控件，可以看成是一种简洁的解析器引擎。

使用simulator测试，效果如下：
[attachment=-3]
[attachment=-2]
[attachment=-1]
[attach]0[/attach]
源码如下。
```

#include <rtthread.h>

#include <rtgui/rtgui.h>
#include <rtgui/rtgui_app.h>
#include <rtgui/widgets/window.h>
#include <rtgui/widgets/label.h>
#include <rtgui/widgets/button.h>
#include <rtgui/driver.h>

struct rtgui_label *label;

rt_bool_t btn_up_event_handle(struct rtgui_object *obj, struct rtgui_event *event)
{
    static int status;

switch (event->type)
    {
    case RTGUI_EVENT_MOUSE_BUTTON:
        if (((struct rtgui_event_mouse *) event)->button & RTGUI_MOUSE_BUTTON_UP)
        {
            status = !status;
            RTGUI_BUTTON(obj)->parent.text = (status == 0) ? "A" : "B";
        }

break;
    }
    return rtgui_button_event_handler(obj, event);
}

void btn_up_handle(struct rtgui_object *obj, struct rtgui_event *event)
{
    rtgui_label_set_text(label, "button up pressed!");
}

void btn_down_handle(struct rtgui_object *obj, struct rtgui_event *event)
{
    rtgui_label_set_text(label, "button down pressed!");
}

void btn_left_handle(struct rtgui_object *obj, struct rtgui_event *event)
{
    rtgui_label_set_text(label, "button left pressed!");
}

void btn_rgiht_handle(struct rtgui_object *obj, struct rtgui_event *event)
{
    rtgui_label_set_text(label, "button right pressed!");
}

#define SCREEN_WIDTH 320//800
#define SCREEN_HIGHT 480

#define BTN_SIZE  60
#define BTN_PAD_BASE_X  ((SCREEN_WIDTH -(BTN_SIZE)*3) / 2 + BTN_SIZE)
#define BTN_PAD_BASE_Y  ((SCREEN_HIGHT -(BTN_SIZE)*3) / 2)

#define BTN   1
#define LABEL 2
struct widget_draw
{
    int type;
    char *name;
    struct rtgui_rect rect;
    void *event_handle;
    //void * event_handle (struct rtgui_object * obj,struct rtgui_event * event);
    void *para;
};
static const struct widget_draw todrawtable[] =
{
    {BTN, "Up", {BTN_PAD_BASE_X, BTN_PAD_BASE_Y, BTN_PAD_BASE_X + BTN_SIZE, BTN_PAD_BASE_Y + BTN_SIZE}, btn_up_event_handle, btn_up_handle},
    {BTN, "Down", {BTN_PAD_BASE_X, BTN_PAD_BASE_Y + BTN_SIZE * 2, BTN_PAD_BASE_X + BTN_SIZE, BTN_PAD_BASE_Y + BTN_SIZE * 3}, RT_NULL, btn_down_handle},
    {BTN, "Left", {BTN_PAD_BASE_X - BTN_SIZE, BTN_PAD_BASE_Y + BTN_SIZE, BTN_PAD_BASE_X, BTN_PAD_BASE_Y + BTN_SIZE * 2}, RT_NULL, btn_left_handle},
    {BTN, "Right", {BTN_PAD_BASE_X + BTN_SIZE, BTN_PAD_BASE_Y + BTN_SIZE, BTN_PAD_BASE_X + BTN_SIZE * 2, BTN_PAD_BASE_Y + BTN_SIZE * 2}, RT_NULL, btn_rgiht_handle},

{LABEL, "label", {0, 0, 200, 30}, RT_NULL, "hello, world"},
};

#define RESRC_PATH  "/SD/programs/tetris/resource"
static void win_thread_entry(void *parameter)
{
    struct rtgui_app *app;
    struct rtgui_win *win;
    struct rtgui_rect rect ;
    struct rtgui_widget *widget;
    int i;

app = rtgui_app_create(rt_thread_self(), "MyApp");
    RT_ASSERT(app != RT_NULL);

/* create a full screen window */
    rtgui_get_screen_rect(&rect);
    rtgui_set_mainwin_rect(&rect);

win = rtgui_mainwin_create(RT_NULL, "MainWin",
                               RTGUI_WIN_STYLE_NO_BORDER | RTGUI_WIN_STYLE_NO_TITLE);
    if (win == RT_NULL)
    {
        rtgui_app_destroy(app);
        return;
    }

for (i = 0; i < sizeof(todrawtable) / sizeof(todrawtable[0]); i++)
    {
        switch (todrawtable*.type)
        {
        case BTN:
        {
            struct rtgui_button *btn;
            btn = rtgui_button_create(todrawtable*.name);
            if (btn == RT_NULL)
                goto _err;
            if (todrawtable*.para != RT_NULL)
                rtgui_button_set_onbutton(btn, todrawtable*.para);

widget = RTGUI_WIDGET(btn);
            break;
        }
        case LABEL:
        {
            widget = RTGUI_WIDGET(rtgui_label_create(todrawtable*.para));
            if (widget == RT_NULL)
                goto _err;
            label = RTGUI_LABEL(widget);
            break;
        }
        }
        /* 添加控件的窗口容器 */
        rtgui_container_add_child(RTGUI_CONTAINER(win), widget);

/* 控件布局 */
        rtgui_widget_set_rect(widget, &todrawtable*.rect);
        if (todrawtable*.event_handle != RT_NULL)
            rtgui_object_set_event_handler(RTGUI_OBJECT(widget), todrawtable*.event_handle);
    }

/* 显示主窗口 */
    rtgui_win_show(win, RT_FALSE);

/* 循环 */
    rtgui_app_run(app);

_err:
    rtgui_win_destroy(win);
    rtgui_app_destroy(app);
    rt_kprintf("MyApp Quit.
");
}

int gui3()
{
    rt_thread_t tid;

tid = rt_thread_create("win", win_thread_entry, RT_NULL,
                           2048, 20, 20);
    if (tid != RT_NULL)
    {
        rt_thread_startup(tid);
    }

return 0;
}
#include <finsh.h>
FINSH_FUNCTION_EXPORT(gui3, gui run)
```
![1.png](https://oss-club.rt-thread.org/uploads/3230_2fa0f1df0bd7f404ed5885189f9a68f8.png)

![2.png](https://oss-club.rt-thread.org/uploads/3230_51a2a7befdb3cc3977290c2e9b74cb08.png)

![3.png](https://oss-club.rt-thread.org/uploads/3230_b68bee4aa2ef56ed2d9e5e9ed83c56a1.png)

![5.png](https://oss-club.rt-thread.org/uploads/3230_e5ebca2414676eabcf67a497927a8e1c.png)

![未命名.jpg](https://oss-club.rt-thread.org/uploads/5213_6999359f3be2c37a3f30b068e3e3d3cc.jpg)

![ui_test.png](https://oss-club.rt-thread.org/uploads/53_bb25d412c79ff810368ad11520205218.png)

![impl_ui.png](https://oss-club.rt-thread.org/uploads/53_9e640fde908bab5112e15359aa26ea6f.png)

53 个回答

prife 2012-12-19

这家伙很懒，什么也没写！

如果小农编写的GUI Builder可以生成

```

struct widget_draw
{
    int type;
    char *name;
    struct rtgui_rect rect;
    void *event_handle;
    //void * event_handle (struct rtgui_object * obj,struct rtgui_event * event);
    void *para;
};
static const struct widget_draw todrawtable[] =
{
    {BTN, "Up", {BTN_PAD_BASE_X, BTN_PAD_BASE_Y, BTN_PAD_BASE_X + BTN_SIZE, BTN_PAD_BASE_Y + BTN_SIZE}, btn_up_event_handle, btn_up_handle},
    {BTN, "Down", {BTN_PAD_BASE_X, BTN_PAD_BASE_Y + BTN_SIZE * 2, BTN_PAD_BASE_X + BTN_SIZE, BTN_PAD_BASE_Y + BTN_SIZE * 3}, RT_NULL, btn_down_handle},
    {BTN, "Left", {BTN_PAD_BASE_X - BTN_SIZE, BTN_PAD_BASE_Y + BTN_SIZE, BTN_PAD_BASE_X, BTN_PAD_BASE_Y + BTN_SIZE * 2}, RT_NULL, btn_left_handle},
    {BTN, "Right", {BTN_PAD_BASE_X + BTN_SIZE, BTN_PAD_BASE_Y + BTN_SIZE, BTN_PAD_BASE_X + BTN_SIZE * 2, BTN_PAD_BASE_Y + BTN_SIZE * 2}, RT_NULL, btn_rgiht_handle},

{LABEL, "label", {0, 0, 200, 30}, RT_NULL, "hello, world"},
};

```

那么使用一楼中for循环里的代码，就可以直接根据这个数组生成合适的UI，也就是说RTGUI builder只需要简单的生成一个数组即可。
采用这种方式也将简化GUI builder的实现。

现在很多GUI builder都是直接生成源码，代码冗长并且难以修改，坐标充斥在整个代码中，上面的实现可以将代码和数据分离，可以很方便的调整位置。。

元芳，你怎么看？