楼主 # 2025-07-26 09:57:29 分享评论
64MB内存级别的嵌入式Linux UI开发也有类似WPF的MVVM框架了
基于Zig语言对AWTK的MVVM框架在泛型/反射特性之上进行了封装，实现了类似WPF那样方便使用的MVVM框架。因为由Zig编写，故支持64MB内存级别的嵌入式Linux UI开发。AWTK的MVVM框架使用C语言编写，但因为C语言的特性太少，直接使用这个框架的话会非常不方便，比如：要在头文件添加特定格式的注释、属性不支持多层等。使用Zig封装之后，使用的便利性基本就跟WPF的MVVM差不多了。
比如，UI声明大致如下：
<window v-model="UsersVM" >
<label v-data:text="{name}" />
<label v-data:text="{cfg.age}" />
<label v-data:text="{tr(cfg.gender.str)}" />
<button tr_text="大一岁" v-on:click="{addAge}" />
<button tr_text="小一岁" v-on:click="{subAge}" />
<button tr_text="添加" v-on:click="{append}" />
</window>对应的模型代码大致如下：实现起来是比较直观而且容易的
pub const UsersVM = struct {
name: awtk.String = undefined,
cfg: struct {
age: u8,
gender: user_model.Gender,
} = .{
.age = 0,
.gender = .Male,
},
const Self = @This();
pub fn addAge(self: *Self) !awtk.Notify {
self.cfg.age += 1;
return .PropertyChanged;
}
pub fn canAddAge(self: Self) bool {
return self.cfg.age < 5;
}
pub fn subAge(self: *Self) !awtk.Notify {
self.cfg.age -= 1;
return .PropertyChanged;
}
pub fn canSubAge(self: Self) bool {
return self.cfg.age > 0;
}
pub fn append(self: *Self) !awtk.Notify {
// 逻辑代码实现
return .ItemsChanged;
}
pub fn canAppend(self: Self) bool {
return self.name.len() > 0;
}
};项目地址在这里：https://gitee.com/ufbycd/awtk-mvvm-zig-example
目前嵌入式Linux已经在D21x平台的D213ECV-DEMO-V4开发板上验证。 另外，Zig的交叉编译也非常方便，上述项目已经内置D21x平台编译支持，编译命令为：
zig build -Dd21x该命令等效于：
zig build -Dtarget=riscv64-linux-gnu -Dcpu=generic_rv64+i+m+a+f+d+c可前往项目地址了解更多详情。
离线
楼主 #1 2025-07-29 11:03:24 分享评论
Re: 64MB内存级别的嵌入式Linux UI开发也有类似WPF的MVVM框架了
上述示例工程的界面效果如下：
其中“性别平衡”的显示比较体现MVVM作为声明式框架的优势，其控件的UI描述是这样的：
<label w="30%" v-data:text="{isGenderBalance ? tr('是') : tr('否')}" />其模型代码是这样的：
// 虚拟property: isGenderBalance
pub fn getIsGenderBalance(self: Self, _: []const u8, v: *awtk.Value) c.ret_t {
var male_count: u32 = 0;
var female_count: u32 = 0;
for (self.users.models.items) |item| {
if (item.gender == .Male) {
male_count += 1;
} else {
female_count += 1;
}
}
_ = c.value_set_bool(v, male_count == female_count);
return c.RET_OK;
}代码就这么多，再没其它的了。这是个虚拟属性，当列表内容增加、减少或列表元素的性别发生变化，其值都会更新。
如果在命令式UI上实现此功能，想必需要添加比较多的事件响应函数，而且整个逻辑代码分散在多个地方，繁琐且容易出BUG.
离线
#4 2025-07-29 19:40:54 分享评论
- xfdr0805
- 会员
- 注册时间： 2020-07-23
- 已发帖子： 336
- 积分： 374
Re: 64MB内存级别的嵌入式Linux UI开发也有类似WPF的MVVM框架了
这个有意思。我在用WPF的MVVM 用起来很方便。
不过这个zig语言 头一次听说，不了解
离线
#5 2025-07-30 07:34:50 分享评论
- abeachsoul73
- 会员
- 注册时间： 2025-07-30
- 已发帖子： 1
- 积分： 1
Re: 64MB内存级别的嵌入式Linux UI开发也有类似WPF的MVVM框架了
Is this complete?
离线
楼主 #6 2025-07-30 10:47:29 分享评论
楼主 #7 2025-07-30 11:03:50 分享评论
#9 2025-08-02 00:33:55 分享评论
- jlau
- 会员
- 注册时间： 2018-06-11
- 已发帖子： 211
- 积分： 203.5
Re: 64MB内存级别的嵌入式Linux UI开发也有类似WPF的MVVM框架了
@海石生风
那部分zig代码是手写的还是工具生成的？
离线
楼主 #10 2025-08-02 09:03:47 分享评论
Re: 64MB内存级别的嵌入式Linux UI开发也有类似WPF的MVVM框架了
@海石生风
那部分zig代码是手写的还是工具生成的？
哪部分代码？model和view-model都是模型，都是业务代码，当然是手写的。
Zig这边的模型都是Zig结构体，而非AWTK的tk_object_t对象；这里的“封装”是将view-model结构体转换为tk_object_t对象，封装手段是泛型反射；可以理解为Zig的view-model在编译时转换成了tk_object_t对象。
在MVVM框架下，model是纯数据模型、view-mode封装了model并添加UI所需的属性和命令用于跟view交互。
而awtk-mvvm其实没有model而只有view-model，而view-model的实现方式是使用代码生成工具将C的结构体转换为tk_object_t对象。
最近编辑记录 海石生风 (2025-08-02 09:19:58)
离线