Flutter基础(前端教程①③-单例)

现实类比:公司打印机

假设你们公司有一台共享打印机:

  1. 非单例(重复创建)

    • 每个员工都自己买一台打印机放在工位上
    • 结果:浪费钱,占空间,难维护
  2. 单例(唯一实例)

    • 全公司只买一台打印机,放在公共区域
    • 所有人都用这台打印机
    • 结果:省钱,省空间,统一管理

代码中的单例

在 Flutter 中,如果不使用单例,每次调用 new Calculator() 都会创建一个新的计算器:

Dart 复制代码
// 非单例:创建多个计算器实例
final calc1 = new Calculator();
final calc2 = new Calculator();

print(calc1 == calc2); // false,两个不同的实例

而使用 Get.put() 注册的对象默认是单例,无论获取多少次都是同一个实例:

Dart 复制代码
// 单例:只创建一个计算器实例
Get.put(Calculator());

final calc1 = Get.find<Calculator>();
final calc2 = Get.find<Calculator>();

print(calc1 == calc2); // true,同一个实例

为什么需要单例?

  1. 节省资源

    比如网络请求控制器、数据库连接、配置信息等,创建多个实例会浪费内存。

  2. 数据一致性

    所有地方都使用同一个实例,保证数据状态统一。

    (比如用户登录状态、购物车数据)

  3. 避免冲突

    某些类只能有一个实例(如打印机、文件系统),否则会引发冲突。

1. Get.put()

功能 :把一个对象「注册」到 GetX 的全局容器中,让它在整个应用里都能被访问。
类比 :把工具放进「公共工具箱」,其他人随时可以取。
特点:默认创建单例(全局唯一实例)。

Dart 复制代码
// 创建并注册一个控制器(放入工具箱)
Get.put(PostController());

// 在其他地方获取已注册的控制器
final controller = Get.find<PostController>();

2. Get.find()

功能 :从 GetX 的全局容器中「获取」已注册的对象。
类比 :从「公共工具箱」里取出需要的工具。
注意 :必须先 Get.put() 注册,才能 Get.find() 获取。

Dart 复制代码
// 获取已注册的控制器(从工具箱取工具)
final controller = Get.find<PostController>();

// 使用控制器的方法
controller.fetchPosts();

3. Get.snackbar()

功能 :显示一个顶部或底部的消息提示(类似 Toast 或 Snackbar)。
类比 :在屏幕上弹一个「临时通知」。
特点:支持自定义样式、持续时间、点击事件等。

Dart 复制代码
// 显示一个简单的消息提示
Get.snackbar(
  '标题',          // 标题
  '这是消息内容',  // 内容
  duration: Duration(seconds: 3),  // 显示3秒
  snackPosition: SnackPosition.BOTTOM,  // 显示在底部
);

完整示例

Dart 复制代码
// 1. 注册控制器(通常在页面初始化时)
Get.put(PostController());

// 2. 获取控制器并调用方法
final controller = Get.find<PostController>();
controller.fetchPosts();    //PostController是class fetchPosts是方法

// 3. 在合适的时机显示消息提示(如点击按钮后)
Get.snackbar(
  '加载完成',
  '已成功获取 ${controller.posts.length} 条数据',
  snackPosition: SnackPosition.TOP,
);
相关推荐
qb11 分钟前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖13 分钟前
极简三分钟ES6 - 类与继承
前端·javascript
虫无涯14 分钟前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
子兮曰15 分钟前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f16 分钟前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖16 分钟前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰20 分钟前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
NewChapter °24 分钟前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app
练习时长两年半的Java练习生(升级中)27 分钟前
从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)
前端·javascript·vue.js·学习·web
vipbic43 分钟前
关于Vue打包的遇到模板引擎解析的引号问题
前端·webpack