# awtk-mvvm-zig-example

**Repository Path**: ufbycd/awtk-mvvm-zig-example

## Basic Information

- **Project Name**: awtk-mvvm-zig-example
- **Description**: AWTK MVVM Zig 语言版本示例
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-11-04
- **Last Updated**: 2026-02-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# awtk-mvvm-zig-example

AWTK MVVM框架的Zig语言版本使用示例，即用Zig代码实现MVVM的Model。

其优点之一，可以利用Zig支持的泛型/反射特性，直接将Model构建出View-Model，而无需使用三方工具来生成View-Model代码。

目前这个第三方工具要求Model的头文件添加特定格式的注释，十分麻烦、不灵活且容易出错。

## 限制

* Zig版本为：0.15
* 平台：x86_64-linux-gnu、riscv64-linux-gnu
* Zig 0.14版本在交叉编译时生成的elf文件的动态库链接信息不正确，需要使用`scripts/fix-elf.sh`脚本进行修复，详情参见`交叉编译`章节

## 准备

1. 获取 awtk 并编译


```
git clone -b allocator https://gitee.com/zlgopen/awtk.git #或 https://github.com/zlgopen/awtk.git
cd awtk; scons; cd -
```

2. 获取 awtk-mvvm 并编译

```
git clone https://gitee.com/zlgopen/awtk-mvvm.git #或 https://github.com/zlgopen/awtk-mvvm.git
cd awtk-mvvm; scons; cd -
```

## 运行

1. 生成UI资源

```
zig build res
```

2. 编译并运行

```
zig build run
```

3. 运行效果

![效果图](screenshot/win_main.png)

## UI声明与View-Model的对应

View-Model为Zig struct，位于src/viewmodels文件夹内；MVVM property对应于struct的field(成员变量)、MVVM command对应于struct的pub method(成员函数)。
以UsersVM示例，XML声明大致为：

```XML
<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>
```

对应的Zig struct大致为：

```Zig
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;
    }
};
```

可见View-Model的实现非常直观而且容易。

## 交叉编译

### AWTK控件编译

交叉编译AWTK控件时需要设置库文件输出目录名为架构名，如交叉编译到`riscv64`架构时编译命令如下：
```bash
scons -j16 LINUX_FB=true BUILD_DIR=riscv64
```

### 交叉编译本工程

本工程已通过测试的交叉平台为匠芯创的D21x芯片，为riscv64架构，构建系统已经内置其支持，编译命令如下：
```bash
zig build -Dd21x
```
等效命令为：
```bash
zig build -Dtarget=riscv64-linux-gnu -Dcpu=generic_rv64+i+m+a+f+d+c
```
其中：

* `riscv64-linux-gnu`表示：`riscv64`架构、`linux`系统、`gnu`ABI
* `generic_rv64+i+m+a+f+d+c`表示：`rv64`指令集、支持`imafdc`扩展

若交叉编译其它平台，依照上述命令对架构和cpu做相应修改即可。

Zig 0.14版本在交叉编译时生成的elf文件的动态库链接信息不正确或不合理，需要使用此脚本`scripts/fix-elf.sh`进行修复。脚本内使用的工具为`patchelf`，其主页为：https://nixos.org/patchelf.html

脚本执行方式如下：
```bash
./scripts/fix-elf.sh zig-out/riscv64-linux-gnu/awtk-mvvm-zig-example
```

> 注意：Zig内置支持`Valgrind`，故其编译出来的`Debug`版的elf似乎是跑在Valgrind之上的，所以Debug版的elf在MPU上的运行效率会看出明显区别。

## 参考

* [awtk-mvvm](https://gitee.com/zlgopen/awtk-mvvm)
* [Zig](https://ziglang.org/zh-CN/)