AWTK-MVVM 如何让多个View复用一个Model记录+关于app_conf的踩坑

news2025/4/19 7:53:59

前言

有这么一个业务，主界面点击应用窗口进入声纳显示界面，声纳显示界面再通过按钮进入菜单界面，菜单界面有很多关于该声纳显示界面的设置项，比如量程，增益，时间显示，亮度，对比度等等，大概十几个设置。

有些数值类的设置还有子预览菜单，在子预览菜单里面通过滑条去设置数值，回到菜单后，设置会显示子预览菜单设置的数值。

声纳显示界面需要显示一些菜单的设置，比如量程，增益等等。

也就是大概这么一个页面关系，其中后面三个页面之间还有数据依赖的关系。

image-20250412120317482

由于菜单的设置项非常多，用传统的基于控件树的方法写起来代码量很大，而且美工时常改动菜单UI，容易影响界面代码，我当时自然而然的选择了AWTK特有的MVVM框架来完成菜单设置的显示逻辑。

一开始由于赶项目时间，我就直接在界面上使用了mvvm的app_conf功能，app_conf在AWTK-MVVM还有专门的model，使得不用写代码就能完成配置文件与多个界面间的数据联动与设置保存，十分贴心。

虽然这种方法能够快速实现功能，但是后期维护性极差，因为业务的配置key都写死在xml中，跟xml耦合。

比如这样的一个设置项：

<window v-model="m_home" name="filter_color">
  <view name="v_setting_color" x="175" y="0" w="387" h="183">
    <label name="title" x="9" y="10" w="58" h="28" text="Color"/>
    <view name="view" x="34" y="58" w="359" h="112" children_layout="default(c=3,r=3)">
      <radio_button name="radio_button" v-data:value="{A.color==1}" text="color1"/>
      <radio_button name="radio_button" v-data:value="{A.color==2}" text="color2"/>
      <radio_button name="radio_button" v-data:value="{A.color==3}" text="color3"/>
      <radio_button name="radio_button" v-data:value="{A.color==4}" text="color4"/>
      <radio_button name="radio_button" v-data:value="{A.color==5}" text="color5"/>
      <radio_button name="radio_button" v-data:value="{A.color==6}" text="color6"/>
      <radio_button name="radio_button" v-data:value="{A.color==7}" text="color7"/>
      <radio_button name="radio_button" v-data:value="{A.color==8}" text="color8"/>
    </view>
  </view>
</window>

实际业务是三种不同的声纳模式的设置菜单A, B, C, 三个设置菜单每个界面都有十几个行十几个设置项，加起来就是三十几个设置项，而且这些设置项的UI大都重复。

每个声纳的大部分属性还是各自独立的，也就是不同菜单的同一个设置，上面的color，A,B,C菜单都在用，A用A.color, B就是B.color，同样的key，父路径不同，这就导致没法用AWTK的component机制将这些设置项UI抽象出来复用,变成这样：

<window v-model="m_home" name="filter_color">
  <?include filename="comp_setting_color.xml" ?>
</window>

(话说AWTK的这个组件机制真的鸡肋，就是单纯的include替换，连个內部slot, 组件通信也没有）

如果用上述的绑死app_conf key的方式来做，后面一旦加了什么影响UI的新功能或者菜单风格更改，又要一个个菜单的去照着美工原型图去改，十分痛苦。

而且app_conf模型自身的命令绑定十分有限，稍微复杂一点的需求(比如点击按钮发送MQTT)就做不了，还是要结合自定义model的命令绑定或者传统的基于控件名索引的widget_on, 自己写函数

等到项目周期开始放缓，我决心把之前写死了配置key的几个菜单页面给重构了，改成用自定义model的自定义的属性来做数据绑定，在代码层面实现具体的选择菜单A,B,C的逻辑。

重构跟本文的逻辑不大，就不展开了，我在这边引出这些，是因为之前直接用app_conf有一个优点，就是不用关心页面之间数据联动的问题，awtk-mvvm内部代码自己会处理好，如果用自定义model, 就要写代码理清窗口导航的数据流通关系了，确保窗口退出时返回正确的设置数据给上一个页面。

实践

回到这个界面关系中，由于显示界面，设置菜单，子菜单都指向同一个对象的数据，考虑到三个页面后期可能的变动，我索性让三个页面都使用同一个model了。

我的目标是，弄清楚三个页面使用同一个model之后窗口的传参如何处理，才能实现子菜单设置时能够返回保存的数据。

抽象的例子如下，所有界面绑定一个叫m_home的model。

image-20250412170404083

sonar_page有bottom_lock,noise_limiter,pic_advance三个界面，每个界面都是在独立的子菜单中设置，设置完的结果会在sonar_page上显示。

<window v-model="m_home" name="sonar_page">
  <button name="button" x="272" y="320" w="100" h="36" v-on:click="{mreturn}" text="Back"/>
  <label name="value" x="272" y="49" w="160" h="28" v-data:text="{value_int}"/>
  <label name="key" x="272" y="104" w="160" h="28" v-data:text="{noise_limiter}" text="setting_item"/>
  <label name="key" x="272" y="178" w="160" h="28" v-data:text="{pic_advance}" text="setting_item"/>
  <button name="button1" x="101" y="49" w="100" h="36" text="Button"  v-on:click="{home_navigate, Args=string?page_name=bottom_lock}"/>
  <button name="button1" x="101" y="104" w="100" h="36" text="Button" v-on:click="{home_navigate, Args=string?page_name=noise_limiter}"/>
  <button name="button1" x="101" y="170" w="100" h="36" text="Button" v-on:click="{home_navigate, Args=string?page_name=pic_advance}"/>
</window>

一开始我犯了个错误，感觉一个页面重复建相同的Model，旧Model还要拷贝数据到新Model, 开销比较大，就把Model的创建和销毁搞成了引用计数的模式：

m_home_t *last_page_model = NULL;
m_home_t *g_home_ref = NULL;
static int g_home_ref_count = 0;

m_home_t* m_home_create(navigator_request_t* req)
{
    m_home_t *home = NULL;
    if(!g_home_ref){
        home = TKMEM_ZALLOC(m_home_t);
        str_init(&home->pic_advance, 32);
    }
    else{
        home = g_home_ref;
    }
    g_home_ref = home;
    g_home_ref_count++;
    home->req = req;

    printf("m_home=%#x created, value: %d ref_count: %d\r\n", home, home->value_int, g_home_ref_count);
    return home;
}

ret_t m_home_on_return(navigator_request_t* req, const value_t* result)
{
    m_home_t *home = g_home_ref;
    printf("set last model %p\r\n", home);
    emitter_dispatch_simple_event(EMITTER(home), EVT_PROPS_CHANGED);
    return RET_OK;
}


ret_t m_home_mreturn(m_home_t *home)
{
    value_t v;
    navigator_request_on_result(home->req, &v);
    navigator_back();
    return RET_OK;
}


ret_t m_home_destroy(m_home_t* home)
{
    g_home_ref_count--;
    if(g_home_ref_count == 0){
        str_reset(&home->pic_advance);
        TKMEM_FREE(home);
        g_home_ref = NULL;
    }
    printf("m_home=%#x destroyed\r\n", home);
    return RET_OK;  
}

但是后面发现子菜单上设置的值返回后无法在sonar_page上显示，查了半天，才发现m_home_on_return设置的其实是只跟当前界面有关的view_model，一旦返回这个页面就销毁了，根本影响不到上一个页面的view model。

image-20250412172638543

只好老实了，乖乖用默认的一个view一个model的传统构建方法，导航到新页面时把旧model作为参数, 传给新model，新model拷贝旧model的参数，退出页面时，旧model从新model加载数据。

实际业务是进页面从app_conf load数据，退页面save 数据到app_conf，然后旧model再从app_conf save数据的，这个例子里面省略了，直接copy对象来表示。

#include "m_home.h"
#include "awtk.h"
#include "mvvm/mvvm.h"
#include "mvvm/base/utils.h"

m_home_t *last_page_model = NULL;
m_home_t *g_current_home_ref = NULL;

void m_home_data_copy(m_home_t *ahome, m_home_t *bhome)
{
    ahome->value_int = bhome->value_int;
    str_set(&ahome->pic_advance, bhome->pic_advance.str);
    ahome->noise_limiter = bhome->noise_limiter;
}

m_home_t* m_home_create(navigator_request_t* req)
{
    m_home_t *home = NULL;
    home = TKMEM_ZALLOC(m_home_t);
    str_init(&home->pic_advance, 32);
    m_home_t *last_model = tk_object_get_prop_pointer(TK_OBJECT(req), "last_model");
    if(last_model != NULL){
        m_home_data_copy(home, last_model);
    }
    g_current_home_ref = home;
    home->req = req;

    printf("m_home=%p created, value: %d last_model: %p\r\n", home, home->value_int, last_model);
    return home;
}

ret_t m_home_destroy(m_home_t* home)
{
    str_reset(&home->pic_advance);
    TKMEM_FREE(home);
    g_current_home_ref = NULL;
    printf("m_home=%#x destroyed\r\n", home);
    return RET_OK;  
}

ret_t m_home_on_return(navigator_request_t* req, const value_t* result)
{
    m_home_t *home = g_current_home_ref;
    m_home_t *last_model = tk_object_get_prop_pointer(TK_OBJECT(req), "last_model");
    printf("set last model %p\r\n", last_model);
    if(last_model != NULL){
        m_home_data_copy(last_model, home);
        emitter_dispatch_simple_event(EMITTER(last_model), EVT_PROPS_CHANGED);
    }
    return RET_OK;
}


ret_t m_home_mreturn(m_home_t *home)
{
    value_t v;
    g_current_home_ref = home;
    navigator_request_on_result(home->req, &v);
    navigator_back();
    return RET_OK;
}




ret_t m_home_to_navigate(m_home_t *home, const char *args)
{   
    tk_object_t *obj = object_default_create();
    tk_command_arguments_to_object(args, obj);
    const char *page_name = tk_object_get_prop_str(obj, "page_name");

    navigator_request_t* req = navigator_request_create(page_name, m_home_on_return);
    tk_object_set_prop_pointer(TK_OBJECT(req), "last_model", home);
    navigator_to_ex(req);
    tk_object_unref(TK_OBJECT(req));
    return RET_OK;
}

ret_t m_home_set_prop_int(m_home_t *home, const char *args)
{
    tk_object_t *obj = object_default_create();
    tk_command_arguments_to_object(args, obj);
    const char *key = tk_object_get_prop_str(obj, "key");
    int32_t value = tk_object_get_prop_int(obj, "value", 0);
    if(tk_str_eq(key, "noise_limiter")){
        home->noise_limiter = value;
    }
    else{
        home->value_int = value;
    }
    printf("m_home_set_prop_int: %s = %d\r\n", key, value);
    TK_OBJECT_UNREF(obj);
    return RET_OBJECT_CHANGED;
}

ret_t m_home_set_prop_str(m_home_t *home, const char *args)
{
    tk_object_t *obj = object_default_create();
    tk_command_arguments_to_object(args, obj);
    const char *key = tk_object_get_prop_str(obj, "key");
    const char *value = tk_object_get_prop_str(obj, "value");
    if(tk_str_eq(key, "pic_advance")){
        str_set(&home->pic_advance, value);
        printf("pic_advance set %s\r\n", home->pic_advance.str);
    }
    printf("m_home_set_prop_str: %s = %s\r\n", key, value);
    TK_OBJECT_UNREF(obj);
    return RET_OBJECT_CHANGED;
}

逻辑展示如下：

image-20250412174251820

懒得展开了，放上代码：

https://gitee.com/tracker647/awtk-practice/tree/master/awtk_mvvm_shared_model_return_test

效果：

image-20250412182014755

image-20250412182027504

附录：关于sub_view_model

虽然app_conf有一个sub_view_model的功能可以缓解不同object有一样的配置key的问题，但是实际业务里配置既有私有配置也有共通配置，共通配置还是混杂在私有配置里面的，配置文件的结构是这样：

shared_conf:{
	range_mode:1
	range_val:10
};
A:{
  color:1
}
B:{
 color:2
}
C:{
 color:3
}

设置项的位置表现上，是这种情况:

私有属性
共有属性
私有属性
共有属性

如果使用sub_view_model，就要另外给相关的配置包上带sub_view_model属性的view标签。

上面的例子就要包两次sub_view_model标签，对于之前业务那种设置项多的情况就是会建立很多个冗余的只用于限定设置作用域的model, 程序上十分不优雅且有不稳定的风险，我找了一圈AWTK库，没有找到在sub_view_model的标签作用域里引用父级model来索引到公共属性的方法，只好放弃。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2336216.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

kotlin音乐之自定义唱片组件（简单版本）

kotlin音乐之自定义唱片组件（简单版本）

代码地址 import android.animation.ObjectAnimator import android.animation.ValueAnimator import android.content.Context import android.os.Binder import android.util.AttributeSet import android.view.animation.LinearInterpolator import androidx.appcompat.widg…
阅读更多...
Redis 版本变更的变化

Redis 版本变更的变化

Redis 版本变更的变化 以下是 Redis 主要版本的清单及其核心功能变化的梳理&#xff0c;按时间顺序整理关键版本演进 8版本没有整理&#xff1a; Redis 1.0 (2009) 初始版本&#xff1a;发布首个稳定版本&#xff0c;支持基本键值存储。 核心特性&#xff1a; 支持字符串&…
阅读更多...
文本纠错WPS插件：提升文档质量的利器

文本纠错WPS插件：提升文档质量的利器

文本纠错WPS插件&#xff1a;提升文档质量的利器 引言 在数字化办公日益普及的今天&#xff0c;文档的质量直接影响到我们的工作效率和形象。一个错别字或标点错误&#xff0c;可能就会让我们的专业形象大打折扣。今天&#xff0c;我要向大家介绍一款强大的WPS插件——文本纠…
阅读更多...
多光谱相机与高光谱相机的区别

多光谱相机与高光谱相机的区别

多光谱相机与高光谱相机均属于光谱成像设备&#xff0c;但两者在‌光谱分辨率、波段数量、数据维度及应用场景‌上存在显著差异。以下是详细的对比分析&#xff1a; ‌一、核心差异对比 二、工作原理差异‌ ‌多光谱相机‌ ‌波段选择‌&#xff1a;根据目标物特性‌预设特定…
阅读更多...
MVCC详细介绍及面试题

MVCC详细介绍及面试题

目录 1.什么是mvcc&#xff1f; 2.问题引入 3. MVCC实现原理&#xff1f; 3.1 隐藏字段 3.2 undo log 日志 3.2.1 undo log版本链 3.3 readview 3.3.1 当前读 ​编辑 3.3.2 快照读 3.3.3 ReadView中4个核心字段 3.3.4 版本数据链访问的规则&#xff08;了解&#x…
阅读更多...
电商企业如何实现流程精细化？日事清「标准化+可视化+自动化」全流程管理实战解析​

电商企业如何实现流程精细化？日事清「标准化+可视化+自动化」全流程管理实战解析​

电商企业在业务快速发展中&#xff0c;往往会遇到如下问题&#xff1a; 1、店铺多款产品需要上新维护&#xff0c;但工作重点往往不清晰&#xff0c;员工经常忘记&#xff0c;没做也不当回事&#xff1b; 2、员工做事经常错漏细节&#xff0c;犯低级错误&#xff1b; 3、人员…
阅读更多...
威锋VL822-Q7T10GHUB芯片适用于扩展坞显示器

威锋VL822-Q7T10GHUB芯片适用于扩展坞显示器

一、概述 VL822-Q7T是VIA Lab&#xff08;威盛电子旗下专注于USB相关技术研发的子公司&#xff09;精心打造的一款高性能USB 3.1 Gen2集线器控制器芯片。在当今数字化时代&#xff0c;USB接口作为设备连接与数据传输的核心通道&#xff0c;其性能与稳定性至关重要。VL822-Q7T凭…
阅读更多...
交换机与路由器的默契配合：它们的联系与区别

交换机与路由器的默契配合：它们的联系与区别

交换机与路由器的默契配合&#xff1a;它们的联系与区别 一. 交换机与路由器的基本功能1.1 交换机的功能1.2 路由器的功能 二. 交换机和路由器的区别三. 交换机和路由器的联系3.1 数据转发的协作3.2 网络分段与分隔3.3 协同工作提供互联网接入 四. 交换机和路由器的联合应用场景…
阅读更多...
Redis 分布式锁+秒杀异步优化

Redis 分布式锁+秒杀异步优化

文章目录 问题思路setnx实现锁误删问题和解决方案Redis Lua脚本问题引出解决方案 setnx实现的问题Redission快速入门redission可重入锁原理 秒杀优化(异步优化)异步秒杀思路秒杀资格判断Redis消息队列 问题 比如我们两个机器都部署了我们项目&#xff0c;这里nginx使用轮询的方…
阅读更多...
Git_获取GitLab的token方法（访问令牌）

Git_获取GitLab的token方法（访问令牌）

一、操作步骤 GitLab-获取token&#xff08;访问令牌&#xff09;主要步骤&#xff1a;以及相关截图 登录 GitLab 打开 GitLab 网站并登录你的账号。 进入用户设置 点击右上角头像 → Edit profile → 左侧菜单选择 Access Tokens。 创建 Token Token name: 输入名称&#…
阅读更多...
【生活相关-日语-日本-东京-留学生-搬家后或新入驻-水道局申请饮用水（1）-办理手续】

【生活相关-日语-日本-东京-留学生-搬家后或新入驻-水道局申请饮用水（1）-办理手续】

【生活相关-日语-日本-东京-搬家后-水道局申请饮用水-办理手续】 1、前言2、情况说明&#xff08;1&#xff09;他人代办&#xff08;2&#xff09;打电话&#xff08;3&#xff09;网络申请&#xff08;4&#xff09;你将会面临什么&#xff0c;主要步骤&#xff08;5&#xf…
阅读更多...
【C语言】--- 预处理详解

【C语言】--- 预处理详解

预处理详解 1. 预定义符号2. define定义常量2. define 定义宏4. 带有副作用的宏参数5.宏替换的规则6. 宏和函数的对比7. # 和 \##7.1#运算符 7.2 \##运算符8. 命名约定9.#undef10.命令行定义11.条件编译12. 头文件的包含12.1 头文件被包含的方式12.1.1 头文件的本地包含12.1.2 …
阅读更多...
【Axure视频教程】标准金额格式转换

【Axure视频教程】标准金额格式转换

今天教大家在Axure制作标准金额格式转换的原型模板&#xff0c;具体效果可以参考下方视频&#xff0c;该教程从0开始制作&#xff0c;手把手教学&#xff0c;无论是新手小白还是有一定基础的同学&#xff0c;都可以学习的哦。 【视频教程——试看版】 【Axure教程】标准金额格…
阅读更多...
每日算法(双指针算法)（Day 1)

每日算法(双指针算法)（Day 1)

双指针算法 1.算法题目&#xff08;移动零&#xff09;2.讲解算法原理3.编写代码 1.算法题目&#xff08;移动零&#xff09; 2.讲解算法原理 数组划分&#xff0c;数组分块&#xff08;快排里面最核心的一步&#xff09;只需把0改为tmp 双指针算法&#xff1a;利用数组下标来…
阅读更多...
微服务多模块构建feign项目过程与一些报错（2025详细版）

微服务多模块构建feign项目过程与一些报错（2025详细版）

目录 1.eureka-server的注意事项 2.eureka-feign的注意事项 3.多模块构建feign项目过程 3.1创建父项目 3.2创建子项目eureka-server 3.3创建子项目eureka-provider 3.4创建子项目eureka-feign 3.5运行 给个点赞谢谢 1.eureka-server的注意事项 eureka-server的yml文件…
阅读更多...
性能测试-tomcat连接数

性能测试-tomcat连接数

Tomcat 处理请求时，是需要 Connector 进行调度和控制的，Connector是Tomcat 处理请求的主干。 Connector 中有一个 accepf队列,当客户端向服务器发送http请求时，如果客户端与操作系统完成三次握手建立了连接，就将该连接放入accept队列，poller从队列中获取到链接后，从链接…
阅读更多...
C# 运行web项目

C# 运行web项目

1、web项目直接点击顶部运行
阅读更多...
全网通emotn ui桌面免费吗？如何开机自启动

全网通emotn ui桌面免费吗？如何开机自启动

在智能设备的使用中&#xff0c;一款优秀的桌面系统能带来截然不同的体验。全网通Emotn UI桌面便是其中的佼佼者&#xff0c;它以完全免费的特性与卓越性能&#xff0c;成为众多用户的心头好。 其简洁美观的界面设计如同为设备换上"清新外衣"&#xff0c;常用功能一…
阅读更多...
【AI模型学习】MAE——CV界的无监督预训练

【AI模型学习】MAE——CV界的无监督预训练

文章目录 一、诞生背景1.1 自监督学习的趋势2.2 ViT 的出现 二、模型2.1 模型架构2.1.1 数据shape变化2.1.2 模型架构流程图2.1.3 PyTorch 代码示例&#xff08;核心部分&#xff09; 2.2 位置信息2.3 非对称的编码器-解码器结构2.4图片重构 三、实验3.1 主实验3.2 消融实验3.3…
阅读更多...
远方游子的归家记：模仿美食网页的制作与实现

远方游子的归家记：模仿美食网页的制作与实现

前言 2023年的夏天&#xff0c;闲得无聊学了一个礼拜前端知识点。并根据所学知识点模仿制作了一篇网络上公开发布的关于家乡美食的文章。今天才想到有这个不错的案例可以分享出来&#xff0c;以供大家学习参考。 知识点简介 运用的知识点比较简单&#xff0c;常规的div盒子&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023