Skip to content

AWTK有了新的UI描述语言! #982

@ufbycd

Description

@ufbycd

AWTK使用XML来描述UI,这是行业上的一个传统选择并一般配合图形化的界面工具通过拖放控件的方式生成XML文件。但如果是通过手写UI描述来生成UI的话,XML挺麻烦的。

于是我尝试直接用Zig语言来描述UI,发现是可行的。实现方式很简单:使用Zig结构体(命名结构体或匿名结构体都可以)支持默认字段数值特性,一个字段表示控件的一个属性;再利用反射特性在编译时展开此结构体,即可完成控制的构建。UI描述举例如下:

const exit_button_ui = .{
    .widget = "button",
    .self_layout = "default(x=300,y=m,w=150,h=64)",
    .child = .{ .widget = "label", .self_layout = "default(x=0,y=0,w=100%,h=100%)", .text = "Close" },
    .callback = struct {
        pub fn onClick(_: *zevent.Event) zawtk.Ret {
            return c.tk_quit();
        }
        pub fn onDestroy(event: *zevent.Event) zawtk.Ret {
            const target = zevent.getTargetWidget(event);
            std.log.info("Destroy widget: {s}", .{c.widget_get_type(target)});
            return c.RET_OK;
        }
    },
};

这里描述了一个button控件,其包含一个label子控件,并绑定了click和destory事件。可以看出这比XML更简易、支持更多特性,且框架实现起来也很简单,核心代码只有几十行。

这里只是抛砖引玉,详情可参考我的项目:https://gitee.com/ufbycd/awtk-zig

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions