【Flutter】Getx设计模式及Provider、Repository、Controller、View等

本文基于Getx 4,x 本本

1、引入

再次接触到Flutter项目,社区俨然很完善和活跃。pubs.dev 寻找状态管理的时候看到很熟悉的Getx时间,俨然发现Getx的版本已到是4.x版本,看到Getx的功能已经非常强大了,庞大的API俨然成为一种开发框架,关于API不是本文介绍的目的。我们就去繁从简,看看从框架层次,作者想传递给我们什么开发思想呢。

2、官方示例

2.1示例结构

Get示例图

2.2 目录结构

目录结构

2.3 总结

移动端 或者前端很少去直接操作远程数据, 故不存在类似Spring 中的DAO, 此处示例中抽象出的Provider 我们可以理解为服务提供者即此处的网络请求Service,亦或者DBService的上层服务提供者。

provider

2.3.1 Repository

关于上述的Provider 层, 从2.1中我们看到了,还有一层Repository,那我们就开始唠唠这个Repository设计模式。 JJ关于此处Repository 模式大概有以下几点。

  • 简化业务层(Controller)的数据处理逻辑DTO

可能有人会说了,Provider层已经将Json转换成Model 了,那这里怎么提效呢。Model 能可能并不完全是前端展现的Entity,比如Model 中含有JsonString

  • 提高测试性
    便于Mock仓储对象,来模拟数据访问想过
  • 数据隔离的作用
    这个是我YY的,原始数据的immutable。

2.3.2 Controller

关于Controller, 从2.1 中我们看到了GetxController混淆的两个协议,主要是生命周期的监听。此处GetxContorller 不展开讲。

2.3.3 View

getx 有个与之对应的GetView, 可以帮我们注入对应的Controller。此处需要注意的是,如果该View有多个Controller管理,那还是采用Get.put Get.lazyPut, Get.creat来注入实例。

2.3.4 Bindings


class HomeBindings extends Bindings {void dependencies() {}
}

通过Get.LazyPut 来注入实例。依次为Provider. -> Reposity -> Contorller, 需要注意的是如果在首页用到Binding initialBinding, 需要实例话。

3、JJ的示例

看到这里就没必要在看下去了,自己可以造个轮子。这里只是为了记录一下。

3.1 Presentation

3.1.1 View
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xun_dian_ft/global_widgets/tabbar/presentation/controller/tabbar_controller.dart';
import 'package:xun_dian_ft/pages/home/presentation/view/mine_view.dart';
import 'package:xun_dian_ft/pages/home/presentation/view/notice_View.dart';
import 'package:xun_dian_ft/pages/home/presentation/view/process_view.dart';
import 'package:xun_dian_ft/pages/home/presentation/view/wrok_view.dart';/// @brief: 自定义底部导航栏视图
/// @desc: 因iOSer 故定义成和iOS类名
/// @date: 2024-04-05 19:27
/// @author: jeversonjee
class TabbarWidget extends GetView<TabbarController> {final TextStyle normalTextStyle = const TextStyle(color: Colors.grey, fontWeight: FontWeight.w500, fontSize: 12);final TextStyle highlightTextStyle = const TextStyle(color: Colors.red, fontWeight: FontWeight.w700, fontSize: 16);final List<BottomNavigationBarItem> mBarItems = <BottomNavigationBarItem>[BottomNavigationBarItem(label: '工作中心',icon: Image.asset('lib/res/images/tab_work.png',),activeIcon: Image.asset('lib/res/images/tab_work_selected.png',)),BottomNavigationBarItem(label: '巡店进度',icon: Image.asset('lib/res/images/tab_process.png',),activeIcon: Image.asset('lib/res/images/tab_process_selected.png',)),BottomNavigationBarItem(label: '通知公告',icon: Image.asset('lib/res/images/tab_notice.png',),activeIcon: Image.asset('lib/res/images/tab_notice_selected.png',)),BottomNavigationBarItem(label: '我的信息',icon: Image.asset('lib/res/images/tab_mine.png',),activeIcon: Image.asset('lib/res/images/tab_mine_selected.png',))];TabbarWidget({super.key});_renderTabbarItem(BuildContext context, TabbarController ctrl) {return Obx(() => MediaQuery(data: MediaQuery.of(context).copyWith(textScaler: const TextScaler.linear(2.0)),child: BottomNavigationBar(type: BottomNavigationBarType.fixed,showSelectedLabels: true,showUnselectedLabels: true,unselectedItemColor: Colors.grey,selectedItemColor: Colors.blueAccent,selectedLabelStyle: highlightTextStyle,unselectedLabelStyle: normalTextStyle,onTap: ctrl.updateTabIndex,currentIndex: ctrl.tabIndex.value,items: mBarItems,),));}Widget build(BuildContext context) {return SafeArea(child: Scaffold(bottomNavigationBar: _renderTabbarItem(context, controller),body: Obx(() => IndexedStack(index: controller.tabIndex.value,children: [WorkView(), ProcessView(), NoticeView(), MineView()],)),));}
}

3.1.2 Controller

import 'package:get/get.dart';
import 'package:xun_dian_ft/global_widgets/tabbar/data/module_permission_provider.dart';
import 'package:xun_dian_ft/global_widgets/tabbar/data/module_permission_reposity.dart';class TabbarController extends GetxController {TabbarController({required this.reposity});final IModulePermisionReposity reposity;var tabIndex = 0.obs;void updateTabIndex(int currentIdx) {tabIndex.value = currentIdx;List<Module> values = Module.values;reposity.getAccessPermissionBy(values[currentIdx]);}void onInit() {}void dispose() {super.dispose();}
}

3.2 Data

3.2.1 Provider
import 'package:get/get.dart';
import 'package:xun_dian_ft/core/network/base_provider.dart';enum Module {work(description: '工作中心', checkName: 'Android工作中心'),process(description: '巡店进度', checkName: 'Android巡店进度'),notice(description: '通知公告', checkName: 'Android通知公告'),mine(description: '我的信息', checkName: 'Android我的信息');const Module({required this.description, required this.checkName});final String description;final String checkName;
}/// @desc: 关于Provider即为上层数据操作层面,个人认为和Service相似.可以理解为imuatbleSorceData
/// @date:2024-04-06
/// @author: jeversonjee
abstract class IModulePermissionProvider {Future<bool> accessToThisModule(Module module);
}class ModulePermissionProvider extends BaseProvider implements IModulePermissionProvider {Future<bool> accessToThisModule(Module module) async {/// TODO: 实现相应的网络查询接口return Future(() => true);}
}

3.2.2 Reposity

import 'package:xun_dian_ft/global_widgets/tabbar/data/module_permission_provider.dart';abstract class IModulePermisionReposity {Future<bool> getAccessPermissionBy(Module module);
}class ModulePersionReposity implements IModulePermisionReposity {ModulePersionReposity({required this.provider});final IModulePermissionProvider provider;Future<bool> getAccessPermissionBy(Module module) {return provider.accessToThisModule(module);}
}
```### 3.2.3 Bindings
````dart
import 'package:get/get.dart';
import 'package:xun_dian_ft/global_widgets/tabbar/data/module_permission_provider.dart';
import 'package:xun_dian_ft/global_widgets/tabbar/data/module_permission_reposity.dart';
import 'package:xun_dian_ft/global_widgets/tabbar/presentation/controller/tabbar_controller.dart';class ModulePermissionBinding implements Bindings {void dependencies() {Get.lazyPut<IModulePermissionProvider>(() => ModulePermissionProvider());Get.lazyPut<IModulePermisionReposity>(() => ModulePersionReposity(provider: Get.find<IModulePermissionProvider>()));Get.lazyPut<TabbarController>(() => TabbarController(reposity: Get.find()));}
}
```

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c# wpf LiveCharts 简单试验

1.概要 1.1 说明 1.2 环境准备 NuGet 添加插件安装 2.代码 <Window x:Class"WpfApp3.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"…

基于单片机电子密码锁系统设计

**单片机设计介绍&#xff0c;基于单片机电子密码锁系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机电子密码锁系统设计概要主要包括以下几个方面&#xff1a; 一、系统概述 基于单片机电子密码锁系统是一个…

c++11的重要特性2

可变参数模板在3中。 目录 ​编辑 1、统一的列表初始化&#xff1a; std::initializer_list&#xff1a; std::initializer_list是什么类型&#xff1a; std::initializer_list使用场景&#xff1a; 让模拟实现的vector也支持{}初始化和赋值 2、声明 auto decltype nul…

深入浅出 -- 系统架构之分布式多形态的存储型集群

一、多形态的存储型集群 在上阶段&#xff0c;我们简单聊了下集群的基本知识&#xff0c;以及快速过了一下逻辑处理型集群的内容&#xff0c;下面重点来看看存储型集群&#xff0c;毕竟这块才是重头戏&#xff0c;集群的形态在其中有着多种多样的变化。 逻辑处理型的应用&…

SQL注入---POST注入

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 一. POST提交概述 在Webshell文章中介绍过post提交和get提交的区别&#xff0c;这里不再赘述 post提交和get提交的区别&#xff1a; get方式提交URL中的参数信息&#xff0c;post方式则是将信…

post请求爬虫入门程序

<!--爬虫仅支持1.8版本的jdk--> <!-- 爬虫需要的依赖--> <dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpclient</artifactId><version>4.5.2</version> </dependency><!-- 爬虫需…

知识融合与消歧:完善知识图谱的关键步骤

知识融合与消歧&#xff1a;完善知识图谱的关键步骤 一、引言&#xff1a;知识融合与消歧的重要性 在今天的数据驱动时代&#xff0c;知识图谱已成为组织和理解海量信息的关键技术。它们使得复杂的数据关系可视化&#xff0c;为人工智能提供了丰富的知识基础。然而&#xff0c…

静态路由协议实验综合实验

需求&#xff1a; 1、除R5的换回地址已固定外&#xff0c;整个其他所有的网段基于192.168.1.0/24进行合理的IP地址划分。 2、R1-R4每台路由器存在两个环回接口&#xff0c;用于模拟连接PC的网段&#xff1b;地址也在192.168.1.0/24这个网络范围内。 3、R1-R4上不能直接编写到…

打造你的专属云开发环境:支持任意 IDE,任意云服务 | 开源日报 No.215

loft-sh/devpod Stars: 6.9k License: MPL-2.0 devpod 是一个开源的、仅限客户端的、不受限制的工具&#xff0c;可以与任何集成开发环境&#xff08;IDE&#xff09;一起使用&#xff0c;并允许您在任何云端、Kubernetes 或本地 Docker 上进行开发。 使用 devcontainer.json…

python文件打包找不到文件路径

引用&#xff1a;【将Python代码打包成exe可执行文件】 https://www.bilibili.com/video/BV1P24y1o7FY/?p4&share_sourcecopy_web&vd_sourced5811f31a0635dfc69a182c7bf1adb8b 在代码中&#xff0c;我们想读取文件a&#xff0c;一般使用如下方法。 import osdir os…

【Ubuntu20.04.6】VMWare Station 17安装Ubuntu20.04.6虚拟机系统

步骤1&#xff1a;下载Ubuntu20.04.6镜像ISO文件 Ubuntu20.04.6镜像ISO文件下载&#xff1a; https://mirrors.ustc.edu.cn/ubuntu-releases/20.04/ 步骤2&#xff1a;下载安装VMWare Station 17 下载和安装教程&#xff1a; https://blog.csdn.net/u012621175/article/deta…

【Docker】搭建开源免费的书签管理系统 - OneNav

【Docker】搭建开源免费的书签管理系统 - OneNav 前言 本教程基于绿联的NAS设备DX4600 Pro的docker功能进行搭建。 简介 OneNav是一个基于PHP的轻量级网址导航系统&#xff0c;旨在帮助用户整理和访问他们的常用网站。 OneNav的主要特点如下&#xff1a; 美观易用&#x…

分享一个基于Multi-SLAM+3DGS的新一代三维内容生产技术

基于智能空间计算&#xff0c;新一代超逼真三维内容生成技术。 可自动化生成超逼真的大场景三维模型&#xff0c;并在各类终端和空间计算设备中&#xff0c;实现前所未有的沉浸式体验。 更可接入专业三维软件和应用平台&#xff0c;进行深度的模型开发与场景落地。 支持超大复杂…

“进击的巨人”:服务器硬件基础知识解析

引言&#xff1a; 服务器是网络环境中负责处理数据、运行应用程序和服务多用户的高性能计算机系统。了解服务器的硬件构成有助于更好地管理和优化IT资源。 服务器和普通PC的差异&#xff1a; 服务器具有比个人电脑更高的处理能力、稳定性和可靠性&#xff0c;它们通常运行在没…

SystemC入门之测试平台编写完整示例:带同步输出的多路选择器

内容&#xff1a;SystemC入门书中的简单测试平台编写示例。 模块文件编写 带锁存输出的4选1多路器模型。输出在信号clock的正跳变沿时刻被锁存。 sync_mux41.h文件 #include <systemc.h>SC_MODULE(sync_mux41) {sc_in<bool> clock, reset;sc_in<sc_uint<…

opencv+python(通道的分离与合并)笔记

分割图像通道&#xff1a; 通过函数mvsplit(img)&#xff1b;mv返回的通道&#xff1b; RGB有3个通道&#xff1b;灰度图只有一个通道&#xff1b; b,g,r cv2.split(img)cv2.imshow("b",b)#通道bcv2.imshow("g",g)#通道gcv2.imshow("r",r)#通道…

c++:局部变量位置和全局变量位置的vector区别

区别&#xff1a;局部变量位置每次都会重置为空&#xff0c;全局不会。但int a[]不管在什么位置都不会重置&#xff08;不进行memset时&#xff09; 代码&#xff1a; 1.局部&#xff1a; #include<bits/stdc.h> using namespace std;int main() {for(int i 0; i <…

微信小程序的页面交互2

一、自定义属性 &#xff08;1&#xff09;定义&#xff1a; 微信小程序中的自定义属性实际上是由data-前缀加上一个自定义属性名组成。 &#xff08;2&#xff09;如何获取自定义属性的值&#xff1f; 用到target或currentTarget对象的dataset属性可以获取数据 &#xff…

c# wpf LiveCharts 简单试验2

1.概要 1.1 说明 1.2 要点 1.2.1 添加命名控件 xmlns:lvc"clr-namespace:LiveCharts.Wpf;assemblyLiveCharts.Wpf" 1.2.2 图片控件 <lvc:CartesianChart Name"chart" LegendLocation"Right"/> 1.3 代码文件引用 using LiveCharts…

LeetCode刷题之31.下一个排列

文章目录 1. 题目2.分析3.解答3.1 先排序&#xff0c;后交换3.2 先交换&#xff0c;后排序 1. 题目 整数数组的一个 排列 就是将其所有成员以序列或线性顺序排列。 例如&#xff0c;arr [1,2,3] &#xff0c;以下这些都可以视作 arr 的排列&#xff1a;[1,2,3]、[1,3,2]、[3…