Committed by
GitHub
Merge pull request #644 from idootop/doc_zh_cn
Adding Chinese documentation.
Showing
8 changed files
with
2526 additions
and
4 deletions
1 |  | 1 |  |
2 | 2 | ||
3 | -*Idiomas: Español (este archivo), [Inglés](README.md), [Portugués de Brasil](README.pt-br.md), [Polaco](README.pl.md).* | 3 | +*Idiomas: Español (este archivo), [Lengua china](README.zh-cn.md), [Inglés](README.md), [Portugués de Brasil](README.pt-br.md), [Polaco](README.pl.md).* |
4 | 4 | ||
5 | [](https://pub.dev/packages/get) | 5 | [](https://pub.dev/packages/get) |
6 |  | 6 |  |
1 |  | 1 |  |
2 | 2 | ||
3 | -_Languages: English (this file), [Brazilian Portuguese](README.pt-br.md), [Spanish](README-es.md),[Polish](README.pl.md)._ | 3 | +_Languages: English (this file), [Chinese](README.zh-cn.md), [Brazilian Portuguese](README.pt-br.md), [Spanish](README-es.md),[Polish](README.pl.md)._ |
4 | 4 | ||
5 | [](https://pub.dev/packages/get) | 5 | [](https://pub.dev/packages/get) |
6 |  | 6 |  |
1 |  | 1 |  |
2 | 2 | ||
3 | -*Languages: [English](README.md), [Brazilian Portuguese](README.pt-br.md), [Spanish](README-es.md), Polish (Jesteś tu).* | 3 | +*Languages: [English](README.md), [Język chiński](README.zh-cn.md), [Brazilian Portuguese](README.pt-br.md), [Spanish](README-es.md), Polish (Jesteś tu).* |
4 | 4 | ||
5 | [](https://pub.dev/packages/get) | 5 | [](https://pub.dev/packages/get) |
6 |  | 6 |  |
1 |  | 1 |  |
2 | 2 | ||
3 | -*Idiomas: [Inglês](README.md), Português Brasileiro (este arquivo), [Espanhol](README-es.md), [Polaco](README.pl.md).* | 3 | +*Idiomas: [Inglês](README.md), [Língua chinesa](README.zh-cn.md), Português Brasileiro (este arquivo), [Espanhol](README-es.md), [Polaco](README.pl.md).* |
4 | 4 | ||
5 | [](https://pub.dev/packages/get) | 5 | [](https://pub.dev/packages/get) |
6 |  | 6 |  |
README.zh-cn.md
0 → 100644
1 | + | ||
2 | + | ||
3 | +_语言: 中文, [英文](README.md), [巴西葡萄牙语](README.pt-br.md), [西班牙语](README-es.md), [波兰语](README.pl.md)_ | ||
4 | + | ||
5 | +[](https://pub.dev/packages/get) | ||
6 | + | ||
7 | +[](https://pub.dev/packages/effective_dart) | ||
8 | +[](https://discord.com/invite/9Hpt99N) | ||
9 | +[](https://communityinviter.com/apps/getxworkspace/getx) | ||
10 | +[](https://t.me/joinchat/PhdbJRmsZNpAqSLJL6bH7g) | ||
11 | +<a href="https://github.com/Solido/awesome-flutter"> | ||
12 | +<img alt="Awesome Flutter" src="https://img.shields.io/badge/Awesome-Flutter-blue.svg?longCache=true&style=flat-square" /> | ||
13 | +</a> | ||
14 | +<a href="https://www.buymeacoffee.com/jonataslaw" target="_blank"><img src="https://i.imgur.com/aV6DDA7.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important; box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" > </a> | ||
15 | + | ||
16 | + | ||
17 | + | ||
18 | +- [关于 Get](#关于Get) | ||
19 | +- [安装](#安装) | ||
20 | +- [GetX 的计数器示例](#GetX的计数器示例) | ||
21 | +- [三大功能](#三大功能) | ||
22 | + - [状态管理](#状态管理) | ||
23 | + - [响应式状态管理器](#响应式状态管理器) | ||
24 | + - [关于状态管理的更多细节](#关于状态管理的更多细节) | ||
25 | + - [路由管理](#路由管理) | ||
26 | + - [关于路由管理的更多细节](#关于路由管理的更多细节) | ||
27 | + - [依赖管理](#依赖管理) | ||
28 | + - [关于依赖管理的更多细节](#关于依赖管理的更多细节) | ||
29 | +- [实用工具](#实用工具) | ||
30 | + - [国际化](#国际化) | ||
31 | + - [翻译](#翻译) | ||
32 | + - [使用翻译](#使用翻译) | ||
33 | + - [语言](#语言) | ||
34 | + - [改变语言](#改变语言) | ||
35 | + - [系统语言](#系统语言) | ||
36 | + - [改变主题](#改变主题) | ||
37 | + - [其他高级API](#其他高级API) | ||
38 | + - [可选的全局设置和手动配置](#可选的全局设置和手动配置) | ||
39 | + - [局部状态组件](#局部状态组件) | ||
40 | + - [ValueBuilder](#valuebuilder) | ||
41 | + - [ObxValue](#obxvalue) | ||
42 | + - [有用的提示](#有用的提示) | ||
43 | + - [GetView](#getview) | ||
44 | + - [GetWidget](#getwidget) | ||
45 | + - [GetxService](#getxservice) | ||
46 | +- [从2.0开始的兼容性变化](#从2.0开始的兼容性变化) | ||
47 | +- [为什么选择Getx?](#为什么选择Getx?) | ||
48 | +- [社区](#社区) | ||
49 | + - [社区频道](#社区频道) | ||
50 | + - [如何做贡献](#如何做贡献) | ||
51 | + - [文章和视频](#文章和视频) | ||
52 | + | ||
53 | +# 关于Get | ||
54 | + | ||
55 | +- GetX 是 Flutter 上的一个轻量且强大的解决方案:高性能的状态管理、智能的依赖注入和便捷的路由管理。 | ||
56 | + | ||
57 | +- GetX 有3个基本原则: | ||
58 | + | ||
59 | + - **性能:** GetX 专注于性能和最小资源消耗。GetX 打包后的apk占用大小和运行时的内存占用与其他状态管理插件不相上下。如果你感兴趣,这里有一个[性能测试](https://github.com/jonataslaw/benchmarks)。 | ||
60 | + - **效率:** GetX 的语法非常简捷,并保持了极高的性能,能极大缩短你的开发时长。 | ||
61 | + - **结构:** GetX 可以将界面、逻辑、依赖和路由完全解耦,用起来更清爽,逻辑更清晰,代码更容易维护。 | ||
62 | + | ||
63 | +- GetX 并不臃肿,却很轻量。如果你只使用状态管理,只有状态管理模块会被编译,其他没用到的东西都不会被编译到你的代码中。它拥有众多的功能,但这些功能都在独立的容器中,只有在使用后才会启动。 | ||
64 | + | ||
65 | +- Getx有一个庞大的生态系统,能够在Android、iOS、Web、Mac、Linux、Windows和你的服务器上用同样的代码运行。 | ||
66 | +**通过[Get Server](https://github.com/jonataslaw/get_server)** 可以在你的后端完全重用你在前端写的代码。 | ||
67 | + | ||
68 | +**此外,通过[Get CLI](https://github.com/jonataslaw/get_cli)**,无论是在服务器上还是在前端,整个开发过程都可以完全自动化。 | ||
69 | + | ||
70 | +**此外,为了进一步提高您的生产效率,我们还为您准备了 | ||
71 | +[VSCode扩展](https://marketplace.visualstudio.com/items?itemName=get-snippets.get-snippets)和[Android Studio/Intellij扩展](https://plugins.jetbrains.com/plugin/14975-getx-snippets)**。 | ||
72 | + | ||
73 | +# 安装 | ||
74 | + | ||
75 | +将 Get 添加到你的 pubspec.yaml 文件中。 | ||
76 | + | ||
77 | +```yaml | ||
78 | +dependencies: | ||
79 | + get: | ||
80 | +``` | ||
81 | + | ||
82 | +在需要用到的文件中导入,它将被使用。 | ||
83 | + | ||
84 | +```dart | ||
85 | +import 'package:get/get.dart'; | ||
86 | +``` | ||
87 | + | ||
88 | +# GetX的计数器示例 | ||
89 | + | ||
90 | +Flutter默认创建的 "计数器 "项目有100多行(含注释),为了展示Get的强大功能,我将使用 GetX 重写一个"计数器 Plus版",实现: | ||
91 | +- 每次点击都能改变状态 | ||
92 | +- 在不同页面之间切换 | ||
93 | +- 在不同页面之间共享状态 | ||
94 | +- 将业务逻辑与界面分离 | ||
95 | + | ||
96 | +而完成这一切只需 **26 行代码(含注释)** | ||
97 | + | ||
98 | +- 步骤1. | ||
99 | +在你的MaterialApp前添加 "Get",将其变成GetMaterialApp。 | ||
100 | + | ||
101 | +```dart | ||
102 | +void main() => runApp(GetMaterialApp(home: Home())); | ||
103 | +``` | ||
104 | + | ||
105 | +- 注意:这并不能修改Flutter的MaterialApp,GetMaterialApp并不是修改后的MaterialApp,它只是一个预先配置的Widget,它的子组件是默认的MaterialApp。你可以手动配置,但绝对没有必要。GetMaterialApp会创建路由,注入它们,注入翻译,注入你需要的一切路由导航。如果你只用Get来进行状态管理或依赖管理,就没有必要使用GetMaterialApp。GetMaterialApp对于路由、snackbar、国际化、bottomSheet、对话框以及与路由相关的高级apis和没有上下文(context)的情况下是必要的。 | ||
106 | +- 注2: 只有当你要使用路由管理(`Get.to()`, `Get.back()`等)时才需要这一步。如果你不打算使用它,那么就不需要做第1步。 | ||
107 | + | ||
108 | +- 第二步: | ||
109 | + 创建你的业务逻辑类,并将所有的变量,方法和控制器放在里面。 | ||
110 | + 你可以使用一个简单的".obs "使任何变量成为可观察的。 | ||
111 | + | ||
112 | +```dart | ||
113 | +class Controller extends GetxController{ | ||
114 | + var count = 0.obs; | ||
115 | + increment() => count++; | ||
116 | +} | ||
117 | +``` | ||
118 | + | ||
119 | +- 第三步: | ||
120 | + 创建你的界面,使用StatelessWidget节省一些内存,使用Get你可能不再需要使用StatefulWidget。 | ||
121 | + | ||
122 | +```dart | ||
123 | +class Home extends StatelessWidget { | ||
124 | + | ||
125 | + // 使用Get.put()实例化你的类,使其对当下的所有子路由可用。 | ||
126 | + final Controller c = Get.put(Controller()); | ||
127 | + | ||
128 | + @override | ||
129 | + Widget build(context) => Scaffold( | ||
130 | + // 使用Obx(()=>每当改变计数时,就更新Text()。 | ||
131 | + appBar: AppBar(title: Obx(() => Text("Clicks: ${c.count}"))), | ||
132 | + | ||
133 | + // 用一个简单的Get.to()即可代替Navigator.push那8行,无需上下文! | ||
134 | + body: Center(child: RaisedButton( | ||
135 | + child: Text("Go to Other"), onPressed: () => Get.to(Other()))), | ||
136 | + floatingActionButton: | ||
137 | + FloatingActionButton(child: Icon(Icons.add), onPressed: c.increment)); | ||
138 | +} | ||
139 | + | ||
140 | +class Other extends StatelessWidget { | ||
141 | + // 你可以让Get找到一个正在被其他页面使用的Controller,并将它返回给你。 | ||
142 | + final Controller c = Get.find(); | ||
143 | + | ||
144 | + @override | ||
145 | + Widget build(context){ | ||
146 | + // 访问更新后的计数变量 | ||
147 | + return Scaffold(body: Center(child: Text("${c.count}"))); | ||
148 | + } | ||
149 | +} | ||
150 | +``` | ||
151 | + | ||
152 | +结果: | ||
153 | + | ||
154 | + | ||
155 | + | ||
156 | +这是一个简单的项目,但它已经让人明白Get的强大。随着项目的发展,这种差异将变得更加显著。 | ||
157 | + | ||
158 | +Get的设计是为了与团队合作,但它也可以让个人开发者的工作变得更简单。 | ||
159 | + | ||
160 | +加快开发速率,在不损失性能的情况下按时交付一切。Get并不适合每一个人,但如果你认同这句话,Get就是为你准备的! | ||
161 | + | ||
162 | +# 三大功能 | ||
163 | + | ||
164 | +## 状态管理 | ||
165 | + | ||
166 | +目前,Flutter有几种状态管理器。但是,它们中的大多数都涉及到使用ChangeNotifier来更新widget,这对于中大型应用的性能来说是一个很糟糕的方法。你可以在Flutter的官方文档中查看到,[ChangeNotifier应该使用1个或最多2个监听器](https://api.flutter.dev/flutter/foundation/ChangeNotifier-class.html),这使得它们实际上无法用于任何中等或大型应用。 | ||
167 | + | ||
168 | +Get 并不是比任何其他状态管理器更好或更差,而是说你应该分析这些要点以及下面的要点来选择只用Get,还是与其他状态管理器结合使用。 | ||
169 | + | ||
170 | +Get不是其他状态管理器的敌人,因为Get是一个微框架,而不仅仅是一个状态管理器,既可以单独使用,也可以与其他状态管理器结合使用。 | ||
171 | + | ||
172 | +Get有两个不同的状态管理器:简单的状态管理器(GetBuilder)和响应式状态管理器(GetX)。 | ||
173 | + | ||
174 | +### 响应式状态管理器 | ||
175 | + | ||
176 | +响应式编程可能会让很多人感到陌生,因为觉得它很复杂,但是GetX将响应式编程变得非常简单。 | ||
177 | + | ||
178 | +- 你不需要创建StreamControllers. | ||
179 | +- 你不需要为每个变量创建一个StreamBuilder。 | ||
180 | +- 你不需要为每个状态创建一个类。 | ||
181 | +- 你不需要为一个初始值创建一个get。 | ||
182 | + | ||
183 | +使用 Get 的响应式编程就像使用 setState 一样简单。 | ||
184 | + | ||
185 | +让我们想象一下,你有一个名称变量,并且希望每次你改变它时,所有使用它的小组件都会自动刷新。 | ||
186 | + | ||
187 | +这就是你的计数变量。 | ||
188 | + | ||
189 | +```dart | ||
190 | +var name = 'Jonatas Borges'; | ||
191 | +``` | ||
192 | + | ||
193 | +要想让它变得可观察,你只需要在它的末尾加上".obs"。 | ||
194 | + | ||
195 | +```dart | ||
196 | +var name = 'Jonatas Borges'.obs; | ||
197 | +``` | ||
198 | + | ||
199 | +而在UI中,当你想显示该值并在值变化时更新页面,只需这样做。 | ||
200 | + | ||
201 | +```dart | ||
202 | +Obx(() => Text("${controller.name}")); | ||
203 | +``` | ||
204 | + | ||
205 | +这就是全部,就这么简单。 | ||
206 | + | ||
207 | +### 关于状态管理的更多细节 | ||
208 | + | ||
209 | +**关于状态管理更深入的解释请查看[这里](./documentation/zh_CN/state_management.md)。在那里你将看到更多的例子,以及简单的阶段管理器和响应式状态管理器之间的区别**。 | ||
210 | + | ||
211 | +你会对GetX的能力有一个很好的了解。 | ||
212 | + | ||
213 | +## 路由管理 | ||
214 | + | ||
215 | +如果你想免上下文(context)使用路由/snackbars/dialogs/bottomsheets,GetX对你来说也是极好的,来吧展示: | ||
216 | + | ||
217 | +在你的MaterialApp前加上 "Get",把它变成GetMaterialApp。 | ||
218 | + | ||
219 | +```dart | ||
220 | +GetMaterialApp( // Before: MaterialApp( | ||
221 | + home: MyHome(), | ||
222 | +) | ||
223 | +``` | ||
224 | + | ||
225 | +导航到新页面 | ||
226 | + | ||
227 | +```dart | ||
228 | + | ||
229 | +Get.to(NextScreen()); | ||
230 | +``` | ||
231 | + | ||
232 | +用别名导航到新页面。查看更多关于命名路由的详细信息[这里](./documentation/zh_CN/route_management.md#navigation-with-named-routes) | ||
233 | + | ||
234 | +```dart | ||
235 | + | ||
236 | +Get.toNamed('/details'); | ||
237 | +``` | ||
238 | + | ||
239 | +要关闭snackbars, dialogs, bottomsheets或任何你通常会用Navigator.pop(context)关闭的东西。 | ||
240 | + | ||
241 | +```dart | ||
242 | +Get.back(); | ||
243 | +``` | ||
244 | + | ||
245 | +进入下一个页面,但没有返回上一个页面的选项(用于闪屏页,登录页面等)。 | ||
246 | + | ||
247 | +```dart | ||
248 | +Get.off(NextScreen()); | ||
249 | +``` | ||
250 | + | ||
251 | +进入下一个页面并取消之前的所有路由(在购物车、投票和测试中很有用)。 | ||
252 | + | ||
253 | +```dart | ||
254 | +Get.offAll(NextScreen()); | ||
255 | +``` | ||
256 | + | ||
257 | +注意到你不需要使用context来做这些事情吗?这就是使用Get路由管理的最大优势之一。有了它,你可以在你的控制器类中执行所有这些方法,而不用担心context在哪里。 | ||
258 | + | ||
259 | +### 关于路由管理的更多细节 | ||
260 | + | ||
261 | +**关于别名路由,和对路由的低级控制,请看[这里](./documentation/zh_CN/route_management.md)**。 | ||
262 | + | ||
263 | +## 依赖管理 | ||
264 | + | ||
265 | +Get有一个简单而强大的依赖管理器,它允许你只用1行代码就能检索到与你的Bloc或Controller相同的类,无需Provider context,无需inheritedWidget。 | ||
266 | + | ||
267 | +```dart | ||
268 | +Controller controller = Get.put(Controller()); // 而不是 Controller controller = Controller(); | ||
269 | +``` | ||
270 | + | ||
271 | +- 注意:如果你使用的是Get的状态管理器,请多注意绑定api,这将使你的界面更容易连接到你的控制器。 | ||
272 | + | ||
273 | +你是在Get实例中实例化它,而不是在你使用的类中实例化你的类,这将使它在整个App中可用。 | ||
274 | +所以你可以正常使用你的控制器(或类Bloc)。 | ||
275 | + | ||
276 | +**提示:** Get依赖管理与包的其他部分是解耦的,所以如果你的应用已经使用了一个状态管理器(任何一个,都没关系),你不需要全部重写,你可以使用这个依赖注入。 | ||
277 | + | ||
278 | +```dart | ||
279 | +controller.fetchApi(); | ||
280 | +``` | ||
281 | + | ||
282 | +想象一下,你已经浏览了无数条路由,现在你需要拿到一个被遗留在控制器中的数据,那你需要一个状态管理器与Provider或Get_it一起使用来拿到它,对吗?用Get则不然,Get会自动为你的控制器找到你想要的数据,而你甚至不需要任何额外的依赖关系。 | ||
283 | + | ||
284 | +```dart | ||
285 | +Controller controller = Get.find(); | ||
286 | +//是的,它看起来像魔术,Get会找到你的控制器,并将其提供给你。你可以实例化100万个控制器,Get总会给你正确的控制器。 | ||
287 | +``` | ||
288 | + | ||
289 | +然后你就可以恢复你在后面获得的控制器数据。 | ||
290 | + | ||
291 | +```dart | ||
292 | +Text(controller.textFromApi); | ||
293 | +``` | ||
294 | + | ||
295 | +### 关于依赖管理的更多细节 | ||
296 | + | ||
297 | +**关于依赖管理的更深入解释请看[此处](./documentation/zh_CN/dependency_management.md)**。 | ||
298 | + | ||
299 | +# 实用工具 | ||
300 | + | ||
301 | +## 国际化 | ||
302 | + | ||
303 | +### 翻译 | ||
304 | + | ||
305 | +翻译被保存为一个简单的键值字典映射。 | ||
306 | +要添加自定义翻译,请创建一个类并扩展`翻译`。 | ||
307 | + | ||
308 | +```dart | ||
309 | +import 'package:get/get.dart'; | ||
310 | + | ||
311 | +class Messages extends Translations { | ||
312 | + @override | ||
313 | + Map<String, Map<String, String>> get keys => { | ||
314 | + 'zh_CN': { | ||
315 | + 'hello': '你好 世界', | ||
316 | + }, | ||
317 | + 'de_DE': { | ||
318 | + 'hello': 'Hallo Welt', | ||
319 | + } | ||
320 | + }; | ||
321 | +} | ||
322 | +``` | ||
323 | + | ||
324 | +#### 使用翻译 | ||
325 | + | ||
326 | +只要将`.tr`追加到指定的键上,就会使用`Get.locale`和`Get.fallbackLocale`的当前值进行翻译。 | ||
327 | + | ||
328 | +```dart | ||
329 | +Text('title'.tr); | ||
330 | +``` | ||
331 | + | ||
332 | +### 语言 | ||
333 | + | ||
334 | +传递参数给`GetMaterialApp`来定义语言和翻译。 | ||
335 | + | ||
336 | +```dart | ||
337 | +return GetMaterialApp( | ||
338 | + translations: Messages(), // 你的翻译 | ||
339 | + locale: Locale('zh', 'CN'), // 将会按照此处指定的语言翻译 | ||
340 | + fallbackLocale: Locale('en', 'US'), // 添加一个回调语言选项,以备上面指定的语言翻译不存在 | ||
341 | +); | ||
342 | +``` | ||
343 | + | ||
344 | +#### 改变语言 | ||
345 | + | ||
346 | +调用`Get.updateLocale(locale)`来更新语言环境。然后翻译会自动使用新的locale。 | ||
347 | + | ||
348 | +```dart | ||
349 | +var locale = Locale('en', 'US'); | ||
350 | +Get.updateLocale(locale); | ||
351 | +``` | ||
352 | + | ||
353 | +#### 系统语言 | ||
354 | + | ||
355 | +要读取系统语言,可以使用`window.locale`。 | ||
356 | + | ||
357 | +```dart | ||
358 | +import 'dart:ui' as ui; | ||
359 | + | ||
360 | +return GetMaterialApp( | ||
361 | + locale: ui.window.locale, | ||
362 | +); | ||
363 | +``` | ||
364 | + | ||
365 | +## 改变主题 | ||
366 | + | ||
367 | +请不要使用比`GetMaterialApp`更高级别的widget来更新主题,这可能会造成键重复。很多人习惯于创建一个 "ThemeProvider "的widget来改变应用主题,这在**GetX™**中是绝对没有必要的。 | ||
368 | + | ||
369 | +你可以创建你的自定义主题,并简单地将其添加到`Get.changeTheme`中,而无需任何模板。 | ||
370 | + | ||
371 | +```dart | ||
372 | +Get.changeTheme(ThemeData.light()); | ||
373 | +``` | ||
374 | + | ||
375 | +如果你想在 "onTap "中创建类似于改变主题的按钮,你可以结合两个**GetX™** API来实现。 | ||
376 | + | ||
377 | +- 检查是否使用了深色的 "Theme "的API,以及 "Theme "更改API。 | ||
378 | +- 而`Theme` Change API,你可以把下面的代码放在`onPressed`里。 | ||
379 | + | ||
380 | +```dart | ||
381 | +Get.changeTheme(Get.isDarkMode? ThemeData.light(): ThemeData.dark()); | ||
382 | +``` | ||
383 | + | ||
384 | +当`.darkmode`被激活时,它将切换到light主题,当light主题被激活时,它将切换到dark主题。 | ||
385 | + | ||
386 | +## 其他高级API | ||
387 | + | ||
388 | +```dart | ||
389 | +// 给出当前页面的args。 | ||
390 | +Get.arguments | ||
391 | + | ||
392 | +// 给出上一条路由的参数 | ||
393 | +Get.previousArguments | ||
394 | + | ||
395 | +//给出以前的路由名称 | ||
396 | +Get.previousRoute | ||
397 | + | ||
398 | +// 给出要访问的原始路由,例如,rawRoute.isFirst() | ||
399 | +Get.rawRoute | ||
400 | + | ||
401 | +// 允许从GetObserver访问Rounting API。 | ||
402 | +Get.routing | ||
403 | + | ||
404 | +// 检查 snackbar 是否打开 | ||
405 | +Get.isSnackbarOpen | ||
406 | + | ||
407 | +// 检查 dialog 是否打开 | ||
408 | +Get.isDialogOpen | ||
409 | + | ||
410 | +// 检查 bottomsheet 是否打开 | ||
411 | +Get.isBottomSheetOpen | ||
412 | + | ||
413 | +// 删除一个路由。 | ||
414 | +Get.removeRoute() | ||
415 | + | ||
416 | +//反复返回,直到表达式返回真。 | ||
417 | +Get.until() | ||
418 | + | ||
419 | +// 转到下一条路由,并删除所有之前的路由,直到表达式返回true。 | ||
420 | +Get.offUntil() | ||
421 | + | ||
422 | +// 转到下一个命名的路由,并删除所有之前的路由,直到表达式返回true。 | ||
423 | +Get.offNamedUntil() | ||
424 | + | ||
425 | +//检查应用程序在哪个平台上运行。 | ||
426 | +GetPlatform.isAndroid | ||
427 | +GetPlatform.isIOS | ||
428 | +GetPlatform.isMacOS | ||
429 | +GetPlatform.isWindows | ||
430 | +GetPlatform.isLinux | ||
431 | +GetPlatform.isFuchsia | ||
432 | + | ||
433 | +//检查设备类型 | ||
434 | +GetPlatform.isMobile | ||
435 | +GetPlatform.isDesktop | ||
436 | +//所有平台都是独立支持web的! | ||
437 | +//你可以知道你是否在浏览器内运行。 | ||
438 | +//在Windows、iOS、OSX、Android等系统上。 | ||
439 | +GetPlatform.isWeb | ||
440 | + | ||
441 | + | ||
442 | +// 相当于.MediaQuery.of(context).size.height, | ||
443 | +//但不可改变。 | ||
444 | +Get.height | ||
445 | +Get.width | ||
446 | + | ||
447 | +// 提供当前上下文。 | ||
448 | +Get.context | ||
449 | + | ||
450 | +// 在你的代码中的任何地方,在前台提供 snackbar/dialog/bottomsheet 的上下文。 | ||
451 | +Get.contextOverlay | ||
452 | + | ||
453 | +// 注意:以下方法是对上下文的扩展。 | ||
454 | +// 因为在你的UI的任何地方都可以访问上下文,你可以在UI代码的任何地方使用它。 | ||
455 | + | ||
456 | +// 如果你需要一个可改变的高度/宽度(如桌面或浏览器窗口可以缩放),你将需要使用上下文。 | ||
457 | +context.width | ||
458 | +context.height | ||
459 | + | ||
460 | +// 让您可以定义一半的页面、三分之一的页面等。 | ||
461 | +// 对响应式应用很有用。 | ||
462 | +// 参数: dividedBy (double) 可选 - 默认值:1 | ||
463 | +// 参数: reducedBy (double) 可选 - 默认值:0。 | ||
464 | +context.heightTransformer() | ||
465 | +context.widthTransformer() | ||
466 | + | ||
467 | +/// 类似于 MediaQuery.of(context).size。 | ||
468 | +context.mediaQuerySize() | ||
469 | + | ||
470 | +/// 类似于 MediaQuery.of(context).padding。 | ||
471 | +context.mediaQueryPadding() | ||
472 | + | ||
473 | +/// 类似于 MediaQuery.of(context).viewPadding。 | ||
474 | +context.mediaQueryViewPadding() | ||
475 | + | ||
476 | +/// 类似于 MediaQuery.of(context).viewInsets。 | ||
477 | +context.mediaQueryViewInsets() | ||
478 | + | ||
479 | +/// 类似于 MediaQuery.of(context).orientation; | ||
480 | +context.orientation() | ||
481 | + | ||
482 | +///检查设备是否处于横向模式 | ||
483 | +context.isLandscape() | ||
484 | + | ||
485 | +///检查设备是否处于纵向模式。 | ||
486 | +context.isPortrait() | ||
487 | + | ||
488 | +///类似于MediaQuery.of(context).devicePixelRatio。 | ||
489 | +context.devicePixelRatio() | ||
490 | + | ||
491 | +///类似于MediaQuery.of(context).textScaleFactor。 | ||
492 | +context.textScaleFactor() | ||
493 | + | ||
494 | +///查询设备最短边。 | ||
495 | +context.mediaQueryShortestSide() | ||
496 | + | ||
497 | +///如果宽度大于800,则为真。 | ||
498 | +context.showNavbar() | ||
499 | + | ||
500 | +///如果最短边小于600p,则为真。 | ||
501 | +context.isPhone() | ||
502 | + | ||
503 | +///如果最短边大于600p,则为真。 | ||
504 | +context.isSmallTablet() | ||
505 | + | ||
506 | +///如果最短边大于720p,则为真。 | ||
507 | +context.isLargeTablet() | ||
508 | + | ||
509 | +///如果当前设备是平板电脑,则为真 | ||
510 | +context.isTablet() | ||
511 | + | ||
512 | +///根据页面大小返回一个值<T>。 | ||
513 | +///可以给值为: | ||
514 | +///watch:如果最短边小于300 | ||
515 | +///mobile:如果最短边小于600 | ||
516 | +///tablet:如果最短边(shortestSide)小于1200 | ||
517 | +///desktop:如果宽度大于1200 | ||
518 | +context.responsiveValue<T>() | ||
519 | +``` | ||
520 | + | ||
521 | +### 可选的全局设置和手动配置 | ||
522 | + | ||
523 | +GetMaterialApp为你配置了一切,但如果你想手动配置Get。 | ||
524 | + | ||
525 | +```dart | ||
526 | +MaterialApp( | ||
527 | + navigatorKey: Get.key, | ||
528 | + navigatorObservers: [GetObserver()], | ||
529 | +); | ||
530 | +``` | ||
531 | + | ||
532 | +你也可以在`GetObserver`中使用自己的中间件,这不会影响任何事情。 | ||
533 | + | ||
534 | +```dart | ||
535 | +MaterialApp( | ||
536 | + navigatorKey: Get.key, | ||
537 | + navigatorObservers: [ | ||
538 | + GetObserver(MiddleWare.observer) // Here | ||
539 | + ], | ||
540 | +); | ||
541 | +``` | ||
542 | + | ||
543 | +你可以为 "Get "创建_全局设置。只需在推送任何路由之前将`Get.config`添加到你的代码中。 | ||
544 | +或者直接在你的`GetMaterialApp`中做。 | ||
545 | + | ||
546 | +```dart | ||
547 | +GetMaterialApp( | ||
548 | + enableLog: true, | ||
549 | + defaultTransition: Transition.fade, | ||
550 | + opaqueRoute: Get.isOpaqueRouteDefault, | ||
551 | + popGesture: Get.isPopGestureEnable, | ||
552 | + transitionDuration: Get.defaultDurationTransition, | ||
553 | + defaultGlobalState: Get.defaultGlobalState, | ||
554 | +); | ||
555 | + | ||
556 | +Get.config( | ||
557 | + enableLog = true, | ||
558 | + defaultPopGesture = true, | ||
559 | + defaultTransition = Transitions.cupertino | ||
560 | +) | ||
561 | +``` | ||
562 | + | ||
563 | +你可以选择重定向所有来自`Get`的日志信息。 | ||
564 | +如果你想使用你自己喜欢的日志包,并想查看那里的日志。 | ||
565 | + | ||
566 | +```dart | ||
567 | +GetMaterialApp( | ||
568 | + enableLog: true, | ||
569 | + logWriterCallback: localLogWriter, | ||
570 | +); | ||
571 | + | ||
572 | +void localLogWriter(String text, {bool isError = false}) { | ||
573 | + // 在这里把信息传递给你最喜欢的日志包。 | ||
574 | + // 请注意,即使enableLog: false,日志信息也会在这个回调中被推送。 | ||
575 | + // 如果你想的话,可以通过GetConfig.isLogEnable来检查这个标志。 | ||
576 | +} | ||
577 | + | ||
578 | +``` | ||
579 | + | ||
580 | +### 局部状态组件 | ||
581 | + | ||
582 | +这些Widgets允许您管理一个单一的值,并保持状态的短暂性和本地性。 | ||
583 | +我们有Reactive和Simple两种风格。 | ||
584 | +例如,你可以用它们来切换`TextField`中的obscureText,也许可以创建一个自定义的可扩展面板(Expandable Panel),或者在"Scaffold "的主体中改变内容的同时修改`BottomNavigationBar`中的当前索引。 | ||
585 | + | ||
586 | + | ||
587 | +#### ValueBuilder | ||
588 | + | ||
589 | +`StatefulWidget`的简化,它与`.setState`回调一起工作,并接受更新的值。 | ||
590 | + | ||
591 | +```dart | ||
592 | +ValueBuilder<bool>( | ||
593 | + initialValue: false, | ||
594 | + builder: (value, updateFn) => Switch( | ||
595 | + value: value, | ||
596 | + onChanged: updateFn, // 你可以用( newValue )=> updateFn( newValue )。 | ||
597 | + ), | ||
598 | + // 如果你需要调用 builder 方法之外的东西。 | ||
599 | + onUpdate: (value) => print("Value updated: $value"), | ||
600 | + onDispose: () => print("Widget unmounted"), | ||
601 | +), | ||
602 | +``` | ||
603 | + | ||
604 | +#### ObxValue | ||
605 | + | ||
606 | +类似于[`ValueBuilder`](#valuebuilder),但这是Reactive版本,你需要传递一个Rx实例(还记得神奇的.obs吗?自动更新......是不是很厉害?) | ||
607 | + | ||
608 | +```dart | ||
609 | +ObxValue((data) => Switch( | ||
610 | + value: data.value, | ||
611 | + onChanged: data, // Rx 有一个 _callable_函数! 你可以使用 (flag) => data.value = flag, | ||
612 | + ), | ||
613 | + false.obs, | ||
614 | +), | ||
615 | +``` | ||
616 | + | ||
617 | +## 有用的提示 | ||
618 | + | ||
619 | +`.obs`ervables (也称为_Rx_ Types)有各种各样的内部方法和操作符。 | ||
620 | + | ||
621 | +> `.obs`的属性**是**实际值,不要搞错了! | ||
622 | +> 我们避免了变量的类型声明,因为Dart的编译器足够聪明,而且代码 | ||
623 | +> 看起来更干净,但: | ||
624 | + | ||
625 | +```dart | ||
626 | +var message = 'Hello world'.obs; | ||
627 | +print( 'Message "$message" has Type ${message.runtimeType}'); | ||
628 | +``` | ||
629 | + | ||
630 | +即使`message` _prints_实际的字符串值,类型也是**RxString**! | ||
631 | +所以,你不能做`message.substring( 0, 4 )`。 | ||
632 | +你必须在_observable_里面访问真正的`value`。 | ||
633 | +最常用的方法是".value", 但是你也可以用... | ||
634 | + | ||
635 | +```dart | ||
636 | +final name = 'GetX'.obs; | ||
637 | +//只有在值与当前值不同的情况下,才会 "更新 "流。 | ||
638 | +name.value = 'Hey'; | ||
639 | + | ||
640 | +// 所有Rx属性都是 "可调用 "的,并返回新的值。 | ||
641 | +//但这种方法不接受 "null",UI将不会重建。 | ||
642 | +name('Hello'); | ||
643 | + | ||
644 | +// 就像一个getter,打印'Hello'。 | ||
645 | +name() ; | ||
646 | + | ||
647 | +///数字。 | ||
648 | + | ||
649 | +final count = 0.obs; | ||
650 | + | ||
651 | +// 您可以使用num基元的所有不可变操作! | ||
652 | +count + 1; | ||
653 | + | ||
654 | +// 注意!只有当 "count "不是final时,这才有效,除了var | ||
655 | +count += 1; | ||
656 | + | ||
657 | +// 你也可以与数值进行比较。 | ||
658 | +count > 2; | ||
659 | + | ||
660 | +/// booleans: | ||
661 | + | ||
662 | +final flag = false.obs; | ||
663 | + | ||
664 | +// 在真/假之间切换数值 | ||
665 | +flag.toggle(); | ||
666 | + | ||
667 | + | ||
668 | +/// 所有类型。 | ||
669 | + | ||
670 | +// 将 "value "设为空。 | ||
671 | +flag.nil(); | ||
672 | + | ||
673 | +// 所有的toString()、toJson()操作都会向下传递到`value`。 | ||
674 | +print( count ); // 在内部调用 "toString() "来GetRxInt | ||
675 | + | ||
676 | +final abc = [0,1,2].obs; | ||
677 | +// 将值转换为json数组,打印RxList。 | ||
678 | +// 所有Rx类型都支持Json! | ||
679 | +print('json: ${jsonEncode(abc)}, type: ${abc.runtimeType}'); | ||
680 | + | ||
681 | +// RxMap, RxList 和 RxSet 是特殊的 Rx 类型,扩展了它们的原生类型。 | ||
682 | +// 但你可以像使用普通列表一样使用列表,尽管它是响应式的。 | ||
683 | +abc.add(12); // 将12添加到列表中,并更新流。 | ||
684 | +abc[3]; // 和Lists一样,读取索引3。 | ||
685 | + | ||
686 | + | ||
687 | +// Rx和值是平等的,但hashCode总是从值中提取。 | ||
688 | +final number = 12.obs; | ||
689 | +print( number == 12 ); // prints > true | ||
690 | + | ||
691 | +///自定义Rx模型。 | ||
692 | + | ||
693 | +// toJson(), toString()都是递延给子代的,所以你可以在它们上实现覆盖,并直接打印()可观察的内容。 | ||
694 | + | ||
695 | +class User { | ||
696 | + String name, last; | ||
697 | + int age; | ||
698 | + User({this.name, this.last, this.age}); | ||
699 | + | ||
700 | + @override | ||
701 | + String toString() => '$name $last, $age years old'; | ||
702 | +} | ||
703 | + | ||
704 | +final user = User(name: 'John', last: 'Doe', age: 33).obs; | ||
705 | + | ||
706 | +// `user`是 "响应式 "的,但里面的属性却不是! | ||
707 | +// 所以,如果我们改变其中的一些变量: | ||
708 | +user.value.name = 'Roi'; | ||
709 | +// 小部件不会重建! | ||
710 | +// 对于自定义类,我们需要手动 "通知 "改变。 | ||
711 | +user.refresh(); | ||
712 | + | ||
713 | +// 或者我们可以使用`update()`方法! | ||
714 | +user.update((value){ | ||
715 | + value.name='Roi'; | ||
716 | +}); | ||
717 | + | ||
718 | +print( user ); | ||
719 | +``` | ||
720 | + | ||
721 | +#### GetView | ||
722 | + | ||
723 | +我很喜欢这个Widget,很简单,很有用。 | ||
724 | + | ||
725 | +它是一个对已注册的`Controller`有一个名为`controller`的getter的`const Stateless`的Widget,仅此而已。 | ||
726 | + | ||
727 | +```dart | ||
728 | + class AwesomeController extends GetxController { | ||
729 | + final String title = 'My Awesome View'; | ||
730 | + } | ||
731 | + | ||
732 | + // 一定要记住传递你用来注册控制器的`Type`! | ||
733 | + class AwesomeView extends GetView<AwesomeController> { | ||
734 | + @override | ||
735 | + Widget build(BuildContext context) { | ||
736 | + return Container( | ||
737 | + padding: EdgeInsets.all(20), | ||
738 | + child: Text( controller.title ), // 只需调用 "controller.something"。 | ||
739 | + ); | ||
740 | + } | ||
741 | + } | ||
742 | +``` | ||
743 | + | ||
744 | +#### GetWidget | ||
745 | + | ||
746 | +大多数人都不知道这个Widget,或者完全搞不清它的用法。 | ||
747 | +这个用例非常少见且特殊:它 "缓存 "了一个Controller,由于_cache_,不能成为一个 "const Stateless"(因为_cache_,所以不能成为一个`const Stateless`)。 | ||
748 | + | ||
749 | +> 那么,什么时候你需要 "缓存 "一个Controller? | ||
750 | + | ||
751 | +如果你使用了**GetX**的另一个 "不常见 "的特性 `Get.create()` | ||
752 | + | ||
753 | +`Get.create(()=>Controller())` 会在每次调用时生成一个新的`Controller` | ||
754 | +`Get.find<Controller>()` | ||
755 | + | ||
756 | +你可以用它来保存Todo项目的列表,如果小组件被 "重建",它将保持相同的控制器实例。 | ||
757 | + | ||
758 | +#### GetxService | ||
759 | + | ||
760 | +这个类就像一个 "GetxController",它共享相同的生命周期("onInit()"、"onReady()"、"onClose()")。 | ||
761 | +但里面没有 "逻辑"。它只是通知**GetX**的依赖注入系统,这个子类**不能**从内存中删除。 | ||
762 | + | ||
763 | +所以这对保持你的 "服务 "总是可以被`Get.find()`获取到并保持运行是超级有用的。比如 | ||
764 | +`ApiService`,`StorageService`,`CacheService`。 | ||
765 | + | ||
766 | +```dart | ||
767 | +Future<void> main() async { | ||
768 | + await initServices(); /// 等待服务初始化. | ||
769 | + runApp(SomeApp()); | ||
770 | +} | ||
771 | + | ||
772 | +/// 在你运行Flutter应用之前,让你的服务初始化是一个明智之举。 | ||
773 | +////因为你可以控制执行流程(也许你需要加载一些主题配置,apiKey,由用户自定义的语言等,所以在运行ApiService之前加载SettingService。 | ||
774 | +///所以GetMaterialApp()不需要重建,可以直接取值。 | ||
775 | +void initServices() async { | ||
776 | + print('starting services ...'); | ||
777 | + ///这里是你放get_storage、hive、shared_pref初始化的地方。 | ||
778 | + ///或者moor连接,或者其他什么异步的东西。 | ||
779 | + await Get.putAsync(() => DbService().init()); | ||
780 | + await Get.putAsync(SettingsService()).init(); | ||
781 | + print('All services started...'); | ||
782 | +} | ||
783 | + | ||
784 | +class DbService extends GetxService { | ||
785 | + Future<DbService> init() async { | ||
786 | + print('$runtimeType delays 2 sec'); | ||
787 | + await 2.delay(); | ||
788 | + print('$runtimeType ready!'); | ||
789 | + return this; | ||
790 | + } | ||
791 | +} | ||
792 | + | ||
793 | +class SettingsService extends GetxService { | ||
794 | + void init() async { | ||
795 | + print('$runtimeType delays 1 sec'); | ||
796 | + await 1.delay(); | ||
797 | + print('$runtimeType ready!'); | ||
798 | + } | ||
799 | +} | ||
800 | + | ||
801 | +``` | ||
802 | + | ||
803 | +实际删除一个`GetxService`的唯一方法是使用`Get.reset()`,它就像"热重启 "你的应用程序。 | ||
804 | + | ||
805 | +所以如果你需要在你的应用程序的生命周期内对一个类实例进行绝对的持久化,请使用`GetxService`。 | ||
806 | + | ||
807 | +# 从2.0开始的兼容性变化 | ||
808 | + | ||
809 | +1- Rx类型。 | ||
810 | + | ||
811 | +| Before | After | | ||
812 | +| ------- | ---------- | | ||
813 | +| StringX | `RxString` | | ||
814 | +| IntX | `RxInt` | | ||
815 | +| MapX | `RxMap` | | ||
816 | +| ListX | `RxList` | | ||
817 | +| NumX | `RxNum` | | ||
818 | +| DoubleX | `RxDouble` | | ||
819 | + | ||
820 | +现在RxController和GetBuilder已经合并了,你不再需要记住你要用哪个控制器,只要用GetxController就可以了,它可以用于简单的状态管理,也可以用于响应式。 | ||
821 | + | ||
822 | +2- 别名路由 | ||
823 | +之前: | ||
824 | + | ||
825 | +```dart | ||
826 | +GetMaterialApp( | ||
827 | + namedRoutes: { | ||
828 | + '/': GetRoute(page: Home()), | ||
829 | + } | ||
830 | +) | ||
831 | +``` | ||
832 | + | ||
833 | +现在: | ||
834 | + | ||
835 | +```dart | ||
836 | +GetMaterialApp( | ||
837 | + getPages: [ | ||
838 | + GetPage(name: '/', page: () => Home()), | ||
839 | + ] | ||
840 | +) | ||
841 | +``` | ||
842 | + | ||
843 | +为什么要做这样的改变? | ||
844 | +通常情况下,可能需要通过一个参数,或者一个登录令牌来决定显示哪个页面。 | ||
845 | +将页面插入到一个函数中,大大降低了RAM的消耗,因为自从应用程序启动后,路由将不会在内存中分配。 | ||
846 | + | ||
847 | +```dart | ||
848 | + | ||
849 | +GetStorage box = GetStorage(); | ||
850 | + | ||
851 | +GetMaterialApp( | ||
852 | + getPages: [ | ||
853 | + GetPage(name: '/', page:(){ | ||
854 | + return box.hasData('token') ? Home() : Login(); | ||
855 | + }) | ||
856 | + ] | ||
857 | +) | ||
858 | +``` | ||
859 | + | ||
860 | +# 为什么选择Getx? | ||
861 | + | ||
862 | +1- Flutter更新后,很多时候,你的很多包都会坏掉。有时会发生编译错误,经常出现的错误,至今仍没有答案,开发者需要知道错误的来源,跟踪错误,才会尝试在相应的仓库中开一个问题,并看到其问题的解决。Get集中了开发的主要资源(状态、依赖和路由管理),让你可以在pubspec中添加一个包,然后开始工作。Flutter更新后,你唯一需要做的就是更新Get依赖,然后开始工作。Get还可以解决兼容性问题。有多少次,一个包的版本与另一个包的版本不兼容,因为一个包在一个版本中使用了依赖,而另一个包在另一个版本中使用了依赖?使用Get也不用担心这个问题,因为所有的东西都在同一个包里,是完全兼容的。 | ||
863 | + | ||
864 | +2- Flutter很简单,Flutter很不可思议,但是Flutter仍然有一些代码,对于大多数开发者来说可能是不需要的,比如`Navigator.of(context).push (context, builder [...]`,你写了8行代码仅仅只为了调用一个路由。而使用Get只需`Get.to(Home())`就完成了,你将进入下一个页面。动态网页URL是目前Flutter中非常痛苦的一件事,而用GetX则非常简单。在Flutter中管理状态,管理依赖关系也产生了很多讨论,因为pub中的模式有上百种。但是没有什么比在你的变量末尾加一个".obs "更简单的了,把你的widget放在一个Obx里面,就这样,所有对这个变量的更新都会在页面上自动更新。 | ||
865 | + | ||
866 | +3-轻松,不用担心性能。Flutter的性能已经很惊人了,但是想象一下,你使用一个状态管理器,和一个定位器来分布你的blocs/stores/controllers/等等类。当你不需要那个依赖的时候,你必须手动调用排除它。但是,你有没有想过简单地使用你的控制器,当它不再被任何人使用时,它会简单地从内存中删除?这就是GetX所做的。有了SmartManagement,所有不被使用的东西都会从内存中删除,除了编程,您不应该担心任何事情。GetX将保证您消耗的是最低限度的必要资源,甚至没有为此创建一个逻辑。 | ||
867 | + | ||
868 | +4-实际解耦。你可能听说过 "将界面与业务逻辑分离 "的概念。这并不是BLoC、MVC、MVVM的特例,市面上的其他标准都有这个概念。但是,由于使用了上下文(context),这个概念在Flutter中往往可以得到缓解。 | ||
869 | +如果你需要上下文来寻找InheritedWidget,你需要在界面中找到它,或者通过参数传递上下文。我特别觉得这种解决方案非常丑陋,要在团队中工作,我们总会对View的业务逻辑产生依赖。Getx与标准的做法不一样,虽然它并没有完全禁止使用StatefulWidgets、InitState等,但它总有类似的方法,可以更干净。控制器是有生命周期的,例如当你需要进行APIREST请求时,你不依赖于界面中的任何东西。你可以使用onInit来启动http调用,当数据到达时,变量将被填充。由于GetX是完全响应式的(真的,在流下工作),一旦项目被填充,所有使用该变量的widgets将在界面中自动更新。这使得具有UI专业知识的人只需要处理widget,除了用户事件(比如点击按钮)之外,不需要向业务逻辑发送任何东西,而处理业务逻辑的人将可以自由地单独创建和测试业务逻辑。 | ||
870 | + | ||
871 | +这个库会一直更新和实现新的功能。欢迎提供PR,并为其做出贡献。 | ||
872 | + | ||
873 | +# 社区 | ||
874 | + | ||
875 | +## 社区渠道 | ||
876 | + | ||
877 | +GetX拥有一个非常活跃且乐于助人的社区。如果你有问题,或者想得到关于这个框架使用的任何帮助,请加入我们的社区频道。这个资源库是提问、申请资源的专用库,欢迎随时加入GetX社区。 | ||
878 | + | ||
879 | +| **Slack** | **Discord** | **Telegram** | | ||
880 | +| :-------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------- | | ||
881 | +| [](https://communityinviter.com/apps/getxworkspace/getx) | [](https://discord.com/invite/9Hpt99N) | [](https://t.me/joinchat/PhdbJRmsZNpAqSLJL6bH7g) | | ||
882 | + | ||
883 | +## 如何做贡献 | ||
884 | + | ||
885 | +_想为项目做贡献吗?我们将自豪地强调你是我们的合作者之一。以下是您可以做出贡献并使Get(和Flutter)变得更好的几点。 | ||
886 | + | ||
887 | +- 帮助将readme翻译成其他语言。 | ||
888 | +- 为readme添加文档(Get的很多功能还没有被记录下来)。 | ||
889 | +- 撰写文章或制作视频,教大家如何使用Get(它们将被记录到readme和未来的Wiki中)。 | ||
890 | +- 提供代码/测试的PR。 | ||
891 | +- 包括新功能。 | ||
892 | + | ||
893 | +欢迎任何贡献 | ||
894 | + | ||
895 | +## 文章和视频 | ||
896 | + | ||
897 | +- [Dynamic Themes in 3 lines using GetX™](https://medium.com/swlh/flutter-dynamic-themes-in-3-lines-c3b375f292e3) - Tutorial by [Rod Brown](https://github.com/RodBr). | ||
898 | +- [Complete GetX™ Navigation](https://www.youtube.com/watch?v=RaqPIoJSTtI) - Route management video by Amateur Coder. | ||
899 | +- [Complete GetX State Management](https://www.youtube.com/watch?v=CNpXbeI_slw) - State management video by Amateur Coder. | ||
900 | +- [GetX™ Other Features](https://youtu.be/ttQtlX_Q0eU) - utils, storage, bindings and other features video by Amateur Coder. | ||
901 | +- [Firestore User with GetX | Todo App](https://www.youtube.com/watch?v=BiV0DcXgk58) - Video by Amateur Coder. | ||
902 | +- [Firebase Auth with GetX | Todo App](https://www.youtube.com/watch?v=-H-T_BSgfOE) - Video by Amateur Coder. | ||
903 | +- [The Flutter GetX™ Ecosystem ~ State Management](https://medium.com/flutter-community/the-flutter-getx-ecosystem-state-management-881c7235511d) - State management by [Aachman Garg](https://github.com/imaachman). | ||
904 | +- [GetX, the all-in-one Flutter package](https://www.youtube.com/watch?v=IYQgtu9TM74) - A brief tutorial covering State Management and Navigation by Thad Carnevalli. | ||
905 | +- [Build a To-do List App from scratch using Flutter and GetX](https://www.youtube.com/watch?v=EcnqFasHf18) - UI + State Management + Storage video by Thad Carnevalli. | ||
906 | +- [GetX Flutter Firebase Auth Example](https://medium.com/@jeffmcmorris/getx-flutter-firebase-auth-example-b383c1dd1de2) - Article by Jeff McMorris. | ||
907 | +- [Flutter State Management with GetX – Complete App](https://www.appwithflutter.com/flutter-state-management-with-getx/) - by App With Flutter. | ||
908 | +- [Flutter Routing with Animation using Get Package](https://www.appwithflutter.com/flutter-routing-using-get-package/) - by App With Flutter. | ||
909 | + |
documentation/zh_CN/dependency_management.md
0 → 100644
1 | +# #依赖管理 | ||
2 | +- [依赖管理](#依赖管理) | ||
3 | + - [实例方法](#实例方法) | ||
4 | + - [Get.put()](#Get.put()) | ||
5 | + - [Get.lazyPut](#Get.lazyPut) | ||
6 | + - [Get.putAsync](#Get.putAsync) | ||
7 | + - [Get.create](#Get.create) | ||
8 | + - [使用实例化方法/类](#使用实例化方法/类) | ||
9 | + - [方法之间的差异](#方法之间的差异) | ||
10 | + - [Bindings](#Bindings) | ||
11 | + - [Bindings类](#Bindings类) | ||
12 | + - [BindingsBuilder](#BindingsBuilder) | ||
13 | + - [智能管理](#智能管理) | ||
14 | + - [SmartManagement.full](#smartmanagementfull) | ||
15 | + - [SmartManagement.onlyBuilders](#SmartManagement.onlyBuilders) | ||
16 | + - [SmartManagement.keepFactory](#smartmanagementkeepFactory) | ||
17 | + - [Bindings的工作原理](#Bindings的工作原理) | ||
18 | + - [注释](#注释) | ||
19 | + | ||
20 | +Get有一个简单而强大的依赖管理器,它允许你只用1行代码就能检索到与你的Bloc或Controller相同的类,无需Provider上下文,无需 inheritedWidget。 | ||
21 | + | ||
22 | +```dart | ||
23 | +Controller controller = Get.put(Controller()); // 而不是 Controller controller = Controller(); | ||
24 | +``` | ||
25 | + | ||
26 | +你是在Get实例中实例化它,而不是在你正在使用的类中实例化你的类,这将使它在整个App中可用。 | ||
27 | +所以你可以正常使用你的控制器(或Bloc类)。 | ||
28 | + | ||
29 | +- 注意:如果你使用的是Get的状态管理器,请多关注[Bindings](#Bindings)api,这将使你的视图更容易连接到你的控制器。 | ||
30 | +- 注意事项²。Get的依赖管理与包中的其他部分是分离的,所以如果你的应用已经使用了一个状态管理器(任何一个,都没关系),你不需要修改也可以同时使用这个依赖注入管理器,完全没有问题。 | ||
31 | + | ||
32 | +## 实例方法 | ||
33 | +这些方法和它的可配置参数是: | ||
34 | + | ||
35 | +### Get.put() | ||
36 | + | ||
37 | +最常见的插入依赖关系的方式。例如,对于你的视图的控制器来说: | ||
38 | + | ||
39 | +```dart | ||
40 | +Get.put<SomeClass>(SomeClass()); | ||
41 | +Get.put<LoginController>(LoginController(), permanent: true); | ||
42 | +Get.put<ListItemController>(ListItemController, tag: "some unique string"); | ||
43 | +``` | ||
44 | + | ||
45 | +这是你使用put时可以设置的所有选项。 | ||
46 | +```dart | ||
47 | +Get.put<S>( | ||
48 | + // 必备:你想得到保存的类,比如控制器或其他东西。 | ||
49 | + // 注:"S "意味着它可以是任何类型的类。 | ||
50 | + S dependency | ||
51 | + | ||
52 | + // 可选:当你想要多个相同类型的类时,可以用这个方法。 | ||
53 | + // 因为你通常使用Get.find<Controller>()来获取一个类。 | ||
54 | + // 你需要使用标签来告诉你需要哪个实例。 | ||
55 | + // 必须是唯一的字符串 | ||
56 | + String tag, | ||
57 | + | ||
58 | + // 可选:默认情况下,get会在实例不再使用后进行销毁 | ||
59 | + // (例如:一个已经销毁的视图的Controller) | ||
60 | + // 但你可能需要这个实例在整个应用生命周期中保留在那里,就像一个sharedPreferences的实例或其他东西。 | ||
61 | + //所以你设置这个选项 | ||
62 | + // 默认值为false | ||
63 | + bool permanent = false, | ||
64 | + | ||
65 | + // 可选:允许你在测试中使用一个抽象类后,用另一个抽象类代替它,然后再进行测试。 | ||
66 | + // 默认为false | ||
67 | + bool overrideAbstract = false, | ||
68 | + | ||
69 | + // 可选:允许你使用函数而不是依赖(dependency)本身来创建依赖。 | ||
70 | + // 这个不常用 | ||
71 | + InstanceBuilderCallback<S> builder, | ||
72 | +) | ||
73 | +``` | ||
74 | + | ||
75 | +### Get.lazyPut | ||
76 | +可以懒加载一个依赖,这样它只有在使用时才会被实例化。这对于计算代价高的类来说非常有用,或者如果你想在一个地方实例化几个类(比如在Bindings类中),而且你知道你不会在那个时候使用这个类。 | ||
77 | + | ||
78 | +```dart | ||
79 | +///只有当第一次使用Get.find<ApiMock>时,ApiMock才会被调用。 | ||
80 | +Get.lazyPut<ApiMock>(() => ApiMock()); | ||
81 | + | ||
82 | +Get.lazyPut<FirebaseAuth>( | ||
83 | + () => { | ||
84 | + // ... some logic if needed | ||
85 | + return FirebaseAuth() | ||
86 | + }, | ||
87 | + tag: Math.random().toString(), | ||
88 | + fenix: true | ||
89 | +) | ||
90 | + | ||
91 | +Get.lazyPut<Controller>( () => Controller() ) | ||
92 | +``` | ||
93 | + | ||
94 | +这是你在使用lazyPut时可以设置的所有选项。 | ||
95 | +```dart | ||
96 | +Get.lazyPut<S>( | ||
97 | + // 强制性:当你的类第一次被调用时,将被执行的方法。 | ||
98 | + InstanceBuilderCallback builder, | ||
99 | + | ||
100 | + // 可选:和Get.put()一样,当你想让同一个类有多个不同的实例时,就会用到它。 | ||
101 | + // 必须是唯一的 | ||
102 | + String tag, | ||
103 | + | ||
104 | + // 可选:类似于 "永久", | ||
105 | + // 不同的是,当不使用时,实例会被丢弃,但当再次需要使用时,Get会重新创建实例, | ||
106 | + // 就像 bindings api 中的 "SmartManagement.keepFactory "一样。 | ||
107 | + // 默认值为false | ||
108 | + bool fenix = false | ||
109 | + | ||
110 | +) | ||
111 | +``` | ||
112 | + | ||
113 | +### Get.putAsync | ||
114 | +如果你想注册一个异步实例,你可以使用`Get.putAsync`。 | ||
115 | + | ||
116 | +```dart | ||
117 | +Get.putAsync<SharedPreferences>(() async { | ||
118 | + final prefs = await SharedPreferences.getInstance(); | ||
119 | + await prefs.setInt('counter', 12345); | ||
120 | + return prefs; | ||
121 | +}); | ||
122 | + | ||
123 | +Get.putAsync<YourAsyncClass>( () async => await YourAsyncClass() ) | ||
124 | +``` | ||
125 | + | ||
126 | +这都是你在使用putAsync时可以设置的选项。 | ||
127 | +```dart | ||
128 | +Get.putAsync<S>( | ||
129 | + | ||
130 | + // 必备:一个将被执行的异步方法,用于实例化你的类。 | ||
131 | + AsyncInstanceBuilderCallback<S> builder, | ||
132 | + | ||
133 | + // 可选:和Get.put()一样,当你想让同一个类有多个不同的实例时,就会用到它。 | ||
134 | + // 必须是唯一的 | ||
135 | + String tag, | ||
136 | + | ||
137 | + // 可选:与Get.put()相同,当你需要在整个应用程序中保持该实例的生命时使用。 | ||
138 | + // 默认值为false | ||
139 | + bool permanent = false | ||
140 | +) | ||
141 | +``` | ||
142 | + | ||
143 | +### Get.create | ||
144 | + | ||
145 | +这个就比较棘手了。关于这个是什么和其他的区别,可以在[方法之间的差异](#方法之间的差异)部分找到详细的解释。 | ||
146 | + | ||
147 | +```dart | ||
148 | +Get.Create<SomeClass>(() => SomeClass()); | ||
149 | +Get.Create<LoginController>(() => LoginController()); | ||
150 | +``` | ||
151 | + | ||
152 | +这是你在使用create时可以设置的所有选项。 | ||
153 | + | ||
154 | +```dart | ||
155 | +Get.create<S>( | ||
156 | + // 需要:一个返回每次调用"Get.find() "都会被新建的类的函数。 | ||
157 | + // 示例: Get.create<YourClass>(()=>YourClass()) | ||
158 | + FcBuilderFunc<S> builder, | ||
159 | + | ||
160 | + // 可选:就像Get.put()一样,但当你需要多个同类的实例时,会用到它。 | ||
161 | + // 当你有一个列表,每个项目都需要自己的控制器时,这很有用。 | ||
162 | + // 需要是一个唯一的字符串。只要把标签改成名字 | ||
163 | + String name, | ||
164 | + | ||
165 | + // 可选:就像 Get.put() 一样, | ||
166 | + // 它是为了当你需要在整个应用中保活实例的时候 | ||
167 | + // 区别在于 Get.create 的 permanent默认为true | ||
168 | + bool permanent = true | ||
169 | +``` | ||
170 | + | ||
171 | +## 使用实例化方法/类 | ||
172 | + | ||
173 | +想象一下,你已经浏览了无数条路由,现在你需要拿到一个被遗留在控制器中的数据,那么你会需要一个状态管理器与Provider或Get_it相结合,对吗?用Get则不然,你只需要让Get为你的控制器自动 "寻找",你不需要任何额外的依赖关系。 | ||
174 | + | ||
175 | +```dart | ||
176 | +final controller = Get.find<Controller>(); | ||
177 | +// 或者 | ||
178 | +Controller controller = Get.find(); | ||
179 | + | ||
180 | +// 是的,它看起来像魔术,Get会找到你的控制器,并将其提供给你。 | ||
181 | +// 你可以实例化100万个控制器,Get总会给你正确的控制器。 | ||
182 | +``` | ||
183 | + | ||
184 | +然后你就可以恢复你在后面获得的控制器数据。 | ||
185 | + | ||
186 | +```dart | ||
187 | +Text(controller.textFromApi); | ||
188 | +``` | ||
189 | + | ||
190 | +由于返回的值是一个正常的类,你可以做任何你想做的事情。 | ||
191 | +```dart | ||
192 | +int count = Get.find<SharedPreferences>().getInt('counter'); | ||
193 | +print(count); // out: 12345 | ||
194 | +``` | ||
195 | + | ||
196 | +移除一个Get实例: | ||
197 | + | ||
198 | +```dart | ||
199 | +Get.delete<Controller>(); //通常你不需要这样做,因为GetX已经删除了未使用的控制器。 | ||
200 | +``` | ||
201 | + | ||
202 | +## 方法之间的差异 | ||
203 | + | ||
204 | +首先,让我们来看看Get.lazyPut的 "fenix "和其他方法的 "permanent"。 | ||
205 | + | ||
206 | +`permanent`和`fenix`的根本区别在于你想如何存储实例。 | ||
207 | + | ||
208 | +强化:默认情况下,GetX会在不使用实例时删除它们。 | ||
209 | +这意味着 如果页面1有控制器1,页面2有控制器2,而你从堆栈中删除了第一个路由,(比如你使用`Get.off()`或`Get.offNamed()`)控制器1失去了它的使用,所以它将被删除。 | ||
210 | + | ||
211 | +但是如果你想选择使用`permanent:true`,那么控制器就不会在这个过渡中丢失--这对于你想在整个应用程序中保持生命的服务来说非常有用。 | ||
212 | + | ||
213 | +`fenix`则是针对那些你不担心在页面变化之间丢失的服务,但当你需要该服务时,你希望它还活着。所以基本上,它会处理未使用的控制器/服务/类,但当你需要它时,它会 "从灰烬中重新创建 "一个新的实例。 | ||
214 | + | ||
215 | +继续说说方法之间的区别: | ||
216 | + | ||
217 | +- Get.put和Get.putAsync的创建顺序是一样的,不同的是,第二个方法使用的是异步方法创建和初始化实例。put是直接插入内存,使用内部方法`insert`,参数`permanent: false`和`isSingleton: true`(这个isSingleton参数只是告诉它是使用`dependency`上的依赖,还是使用`FcBuilderFunc`上的依赖),之后,调用`Get.find()`,立即初始化内存中的实例。 | ||
218 | + | ||
219 | +- Get.create。顾名思义,它将 "创建 "你的依赖关系!类似于`Get.put()`。与`Get.put()`类似,它也会调用内部方法`insert`来实例化。但是`permanent`变成了true,而`isSingleton`变成了false(因为我们是在 "创建 "我们的依赖关系,所以它没有办法成为一个单例,这就是为什么是false)。因为它有`permanent: true`,所以我们默认的好处是不会在页面跳转之间销毁它。另外,`Get.find()`并不是立即被调用,而是等待在页面中被调用,这样创建是为了利用 "permanent "这个参数,值得注意的是,`Get.create()`的目标是创建不共享的实例,但不会被销毁,比如listView中的一个按钮,你想为该列表创建一个唯一的实例--正因为如此,Get.create必须和GetWidget一起使用。 | ||
220 | + | ||
221 | +- Get.lazyPut。顾名思义,这是一个懒加载的过程。实例被创建了,但它并没有被调用来立即使用,而是一直等待被调用。与其他方法相反,这里没有调用 "insert"。取而代之的是,实例被插入到内存的另一个部分,这个部分负责判断实例是否可以被重新创建,我们称之为 "工厂"。如果我们想创建一些以后使用的东西,它不会和现在使用的东西混在一起。这就是 "fenix "的魔力所在:如果你选择留下 "fenix: false",并且你的 "smartManagement "不是 "keepFactory",那么当使用 "Get.find "时,实例将把内存中的位置从 "工厂 "改为普通实例内存区域。紧接着,默认情况下,它将从 "工厂 "中移除。现在,如果你选择 "fenix: true",实例将继续存在这个专用的部分,甚至进入公共区域,以便将来再次被调用。 | ||
222 | + | ||
223 | +## Bindings | ||
224 | + | ||
225 | +这个包最大的区别之一,也许就是可以将路由、状态管理器和依赖管理器完全集成。 | ||
226 | +当一个路由从Stack中移除时,所有与它相关的控制器、变量和对象的实例都会从内存中移除。如果你使用的是流或定时器,它们会自动关闭,你不必担心这些。 | ||
227 | +在2.10版本中,Get完全实现了Bindings API。 | ||
228 | +现在你不再需要使用init方法了。如果你不想的话,你甚至不需要键入你的控制器。你可以在适当的地方启动你的控制器和服务来实现。 | ||
229 | +Binding类是一个将解耦依赖注入的类,同时 "Bindings "路由到状态管理器和依赖管理器。 | ||
230 | +这使得Get可以知道当使用某个控制器时,哪个页面正在显示,并知道在哪里以及如何销毁它。 | ||
231 | +此外,Binding类将允许你拥有SmartManager配置控制。你可以配置依赖关系,当从堆栈中删除一个路由时,或者当使用它的widget被布置时,或者两者都不布置。你将有智能依赖管理为你工作,但即使如此,你也可以按照你的意愿进行配置。 | ||
232 | + | ||
233 | +### Bindings类 | ||
234 | + | ||
235 | +- 创建一个类并实现Binding | ||
236 | + | ||
237 | +```dart | ||
238 | +class HomeBinding implements Bindings {} | ||
239 | +``` | ||
240 | + | ||
241 | +你的IDE会自动要求你重写 "dependencies"方法,然后插入你要在该路由上使用的所有类。 | ||
242 | + | ||
243 | +```dart | ||
244 | +class HomeBinding implements Bindings { | ||
245 | + @override | ||
246 | + void dependencies() { | ||
247 | + Get.lazyPut<HomeController>(() => HomeController()); | ||
248 | + Get.put<Service>(()=> Api()); | ||
249 | + } | ||
250 | +} | ||
251 | + | ||
252 | +class DetailsBinding implements Bindings { | ||
253 | + @override | ||
254 | + void dependencies() { | ||
255 | + Get.lazyPut<DetailsController>(() => DetailsController()); | ||
256 | + } | ||
257 | +} | ||
258 | +``` | ||
259 | + | ||
260 | +现在你只需要通知你的路由,你将使用该 Binding 来建立路由管理器、依赖关系和状态之间的连接。 | ||
261 | + | ||
262 | +- 使用别名路由: | ||
263 | + | ||
264 | +```dart | ||
265 | +getPages: [ | ||
266 | + GetPage( | ||
267 | + name: '/', | ||
268 | + page: () => HomeView(), | ||
269 | + binding: HomeBinding(), | ||
270 | + ), | ||
271 | + GetPage( | ||
272 | + name: '/details', | ||
273 | + page: () => DetailsView(), | ||
274 | + binding: DetailsBinding(), | ||
275 | + ), | ||
276 | +]; | ||
277 | +``` | ||
278 | + | ||
279 | +- 使用正常路由。 | ||
280 | + | ||
281 | +```dart | ||
282 | +Get.to(Home(), binding: HomeBinding()); | ||
283 | +Get.to(DetailsView(), binding: DetailsBinding()) | ||
284 | +``` | ||
285 | + | ||
286 | +至此,你不必再担心你的应用程序的内存管理,Get将为你做这件事。 | ||
287 | + | ||
288 | +Binding类在调用路由时被调用,你可以在你的GetMaterialApp中创建一个 "initialBinding "来插入所有将要创建的依赖关系。 | ||
289 | + | ||
290 | +```dart | ||
291 | +GetMaterialApp( | ||
292 | + initialBinding: SampleBind(), | ||
293 | + home: Home(), | ||
294 | +); | ||
295 | +``` | ||
296 | + | ||
297 | +### BindingsBuilder | ||
298 | + | ||
299 | +创建Bindings的默认方式是创建一个实现Bindings的类,但是,你也可以使用`BindingsBuilder`回调,这样你就可以简单地使用一个函数来实例化任何你想要的东西。 | ||
300 | + | ||
301 | +例子: | ||
302 | + | ||
303 | +```dart | ||
304 | +getPages: [ | ||
305 | + GetPage( | ||
306 | + name: '/', | ||
307 | + page: () => HomeView(), | ||
308 | + binding: BindingsBuilder(() => { | ||
309 | + Get.lazyPut<ControllerX>(() => ControllerX()); | ||
310 | + Get.put<Service>(()=> Api()); | ||
311 | + }), | ||
312 | + ), | ||
313 | + GetPage( | ||
314 | + name: '/details', | ||
315 | + page: () => DetailsView(), | ||
316 | + binding: BindingsBuilder(() => { | ||
317 | + Get.lazyPut<DetailsController>(() => DetailsController()); | ||
318 | + }), | ||
319 | + ), | ||
320 | +]; | ||
321 | +``` | ||
322 | + | ||
323 | +这样一来,你就可以避免为每条路径创建一个 Binding 类,使之更加简单。 | ||
324 | + | ||
325 | +两种方式都可以完美地工作,我们希望您使用最适合您的风格。 | ||
326 | + | ||
327 | +### 智能管理 | ||
328 | + | ||
329 | +GetX 默认情况下会将未使用的控制器从内存中移除。 | ||
330 | +但是如果你想改变GetX控制类的销毁方式,你可以用`SmartManagement`类设置不同的行为。 | ||
331 | + | ||
332 | +#### 如何改变 | ||
333 | + | ||
334 | +如果你想改变这个配置(你通常不需要),就用这个方法。 | ||
335 | + | ||
336 | +```dart | ||
337 | +void main () { | ||
338 | + runApp( | ||
339 | + GetMaterialApp( | ||
340 | + smartManagement: SmartManagement.onlyBuilders //这里 | ||
341 | + home: Home(), | ||
342 | + ) | ||
343 | + ) | ||
344 | +} | ||
345 | +``` | ||
346 | + | ||
347 | +#### SmartManagement.full | ||
348 | + | ||
349 | +这是默认的。销毁那些没有被使用的、没有被设置为永久的类。在大多数情况下,你会希望保持这个配置不受影响。如果你是第一次使用GetX,那么不要改变这个配置。 | ||
350 | + | ||
351 | +#### SmartManagement.onlyBuilders | ||
352 | +使用该选项,只有在`init:`中启动的控制器或用`Get.lazyPut()`加载到Binding中的控制器才会被销毁。 | ||
353 | + | ||
354 | +如果你使用`Get.put()`或`Get.putAsync()`或任何其他方法,SmartManagement将没有权限移除这个依赖。 | ||
355 | + | ||
356 | +在默认行为下,即使是用 "Get.put "实例化的widget也会被移除,这与SmartManagement.onlyBuilders不同。 | ||
357 | + | ||
358 | +#### SmartManagement.keepFactory | ||
359 | + | ||
360 | +就像SmartManagement.full一样,当它不再被使用时,它将删除它的依赖关系,但它将保留它们的工厂,这意味着如果你再次需要该实例,它将重新创建该依赖关系。 | ||
361 | +### Bindings的工作原理 | ||
362 | +Bindings会创建过渡性工厂,在你点击进入另一个页面的那一刻,这些工厂就会被创建,一旦换屏动画发生,就会被销毁。 | ||
363 | +这种情况发生得非常快,以至于分析器甚至都来不及注册。 | ||
364 | +当你再次导航到这个页面时,一个新的临时工厂将被调用,所以这比使用SmartManagement.keepFactory更可取,但如果你不想创建Bindings,或者想让你所有的依赖关系都在同一个Binding上,它肯定会帮助你。 | ||
365 | +Factories占用的内存很少,它们并不持有实例,而是一个具有你想要的那个类的 "形状 "的函数。 | ||
366 | +这在内存上的成本很低,但由于这个库的目的是用最少的资源获得最大的性能,所以Get连工厂都默认删除。 | ||
367 | +请使用对你来说最方便的方法。 | ||
368 | + | ||
369 | +## 注释 | ||
370 | + | ||
371 | +- 如果你使用多个Bindings,不要使用SmartManagement.keepFactory。它被设计成在没有Bindings的情况下使用,或者在GetMaterialApp的初始Binding中链接一个Binding。 | ||
372 | + | ||
373 | +- 使用Bindings是完全可选的,你也可以在使用给定控制器的类上使用`Get.put()`和`Get.find()`。 | ||
374 | +然而,如果你使用Services或任何其他抽象,我建议使用Bindings来更好地组织。 |
documentation/zh_CN/route_management.md
0 → 100644
1 | +- [路由管理](#路由管理) | ||
2 | + - [如何使用](#如何使用) | ||
3 | + - [普通路由导航](#普通路由导航) | ||
4 | + - [别名路由导航](#别名路由导航) | ||
5 | + - [发送数据到别名路由](#发送数据到别名路由) | ||
6 | + - [动态网页链接](#动态网页链接) | ||
7 | + - [中间件](#中间件) | ||
8 | + - [免context导航](#免context导航) | ||
9 | + - [SnackBars](#SnackBars) | ||
10 | + - [Dialogs](#dialogs) | ||
11 | + - [BottomSheets](#bottomSheets) | ||
12 | + - [嵌套导航](#嵌套导航) | ||
13 | + | ||
14 | +# 路由管理 | ||
15 | + | ||
16 | +这是关于Getx在路由管理方面的完整解释。 | ||
17 | + | ||
18 | +## 如何使用 | ||
19 | + | ||
20 | +将此添加到你的pubspec.yaml文件中。 | ||
21 | + | ||
22 | +```yaml | ||
23 | +dependencies: | ||
24 | + get: | ||
25 | +``` | ||
26 | + | ||
27 | +如果你要在没有context的情况下使用路由/SnackBars/Dialogs/BottomSheets,或者使用高级的Get API,你只需要在你的MaterialApp前面加上 "Get",就可以把它变成GetMaterialApp,享受吧! | ||
28 | + | ||
29 | +```dart | ||
30 | +GetMaterialApp( // Before: MaterialApp( | ||
31 | + home: MyHome(), | ||
32 | +) | ||
33 | +``` | ||
34 | + | ||
35 | +## 普通路由导航 | ||
36 | + | ||
37 | +导航到新的页面。 | ||
38 | + | ||
39 | +```dart | ||
40 | +Get.to(NextScreen()); | ||
41 | +``` | ||
42 | + | ||
43 | +关闭SnackBars、Dialogs、BottomSheets或任何你通常会用Navigator.pop(context)关闭的东西。 | ||
44 | + | ||
45 | +```dart | ||
46 | +Get.back(); | ||
47 | +``` | ||
48 | + | ||
49 | +进入下一个页面,但没有返回上一个页面的选项(用于SplashScreens,登录页面等)。 | ||
50 | + | ||
51 | +```dart | ||
52 | +Get.off(NextScreen()); | ||
53 | +``` | ||
54 | + | ||
55 | +进入下一个界面并取消之前的所有路由(在购物车、投票和测试中很有用)。 | ||
56 | + | ||
57 | +```dart | ||
58 | +Get.offAll(NextScreen()); | ||
59 | +``` | ||
60 | + | ||
61 | +要导航到下一条路由,并在返回后立即接收或更新数据。 | ||
62 | + | ||
63 | +```dart | ||
64 | +var data = await Get.to(Payment()); | ||
65 | +``` | ||
66 | + | ||
67 | +在另一个页面上,发送前一个路由的数据。 | ||
68 | + | ||
69 | +```dart | ||
70 | +Get.back(result: 'success'); | ||
71 | +``` | ||
72 | + | ||
73 | +并使用它,例: | ||
74 | + | ||
75 | +```dart | ||
76 | +if(data == 'success') madeAnything(); | ||
77 | +``` | ||
78 | + | ||
79 | +你不想学习我们的语法吗? | ||
80 | +只要把 Navigator(大写)改成 navigator(小写),你就可以拥有标准导航的所有功能,而不需要使用context,例如: | ||
81 | + | ||
82 | +```dart | ||
83 | + | ||
84 | +// 默认的Flutter导航 | ||
85 | +Navigator.of(context).push( | ||
86 | + context, | ||
87 | + MaterialPageRoute( | ||
88 | + builder: (BuildContext context) { | ||
89 | + return HomePage(); | ||
90 | + }, | ||
91 | + ), | ||
92 | +); | ||
93 | + | ||
94 | +// 使用Flutter语法获得,而不需要context。 | ||
95 | +navigator.push( | ||
96 | + MaterialPageRoute( | ||
97 | + builder: (_) { | ||
98 | + return HomePage(); | ||
99 | + }, | ||
100 | + ), | ||
101 | +); | ||
102 | + | ||
103 | +// get语法 (这要好得多) | ||
104 | +Get.to(HomePage()); | ||
105 | + | ||
106 | + | ||
107 | +``` | ||
108 | + | ||
109 | +## 别名路由导航 | ||
110 | + | ||
111 | +- 如果你喜欢用别名路由导航,Get也支持。 | ||
112 | + | ||
113 | +导航到下一个页面 | ||
114 | + | ||
115 | +```dart | ||
116 | +Get.toNamed("/NextScreen"); | ||
117 | +``` | ||
118 | + | ||
119 | +浏览并删除前一个页面。 | ||
120 | + | ||
121 | +```dart | ||
122 | +Get.offNamed("/NextScreen"); | ||
123 | +``` | ||
124 | + | ||
125 | +浏览并删除所有以前的页面。 | ||
126 | + | ||
127 | +```dart | ||
128 | +Get.offAllNamed("/NextScreen"); | ||
129 | +``` | ||
130 | + | ||
131 | +要定义路由,使用GetMaterialApp。 | ||
132 | + | ||
133 | +```dart | ||
134 | +void main() { | ||
135 | + runApp( | ||
136 | + GetMaterialApp( | ||
137 | + initialRoute: '/', | ||
138 | + getPages: [ | ||
139 | + GetPage(name: '/', page: () => MyHomePage()), | ||
140 | + GetPage(name: '/second', page: () => Second()), | ||
141 | + GetPage( | ||
142 | + name: '/third', | ||
143 | + page: () => Third(), | ||
144 | + transition: Transition.zoom | ||
145 | + ), | ||
146 | + ], | ||
147 | + ) | ||
148 | + ); | ||
149 | +} | ||
150 | +``` | ||
151 | + | ||
152 | +### 发送数据到别名路由 | ||
153 | + | ||
154 | +只要发送你想要的参数即可。Get在这里接受任何东西,无论是一个字符串,一个Map,一个List,甚至一个类的实例。 | ||
155 | + | ||
156 | +```dart | ||
157 | +Get.toNamed("/NextScreen", arguments: 'Get is the best'); | ||
158 | +``` | ||
159 | + | ||
160 | +在你的类或控制器上: | ||
161 | + | ||
162 | +```dart | ||
163 | +print(Get.arguments); | ||
164 | +//print out: Get is the best | ||
165 | +``` | ||
166 | + | ||
167 | +### 动态网页链接 | ||
168 | + | ||
169 | +Get提供高级动态URL,就像在Web上一样。Web开发者可能已经在Flutter上想要这个功能了,Get也解决了这个问题。 | ||
170 | + | ||
171 | +```dart | ||
172 | +Get.offAllNamed("/NextScreen?device=phone&id=354&name=Enzo"); | ||
173 | +``` | ||
174 | + | ||
175 | +在你的controller/bloc/stateful/stateless类上: | ||
176 | + | ||
177 | +```dart | ||
178 | +print(Get.parameters['id']); | ||
179 | +// out: 354 | ||
180 | +print(Get.parameters['name']); | ||
181 | +// out: Enzo | ||
182 | +``` | ||
183 | + | ||
184 | +你也可以用Get轻松接收NamedParameters。 | ||
185 | + | ||
186 | +```dart | ||
187 | +void main() { | ||
188 | + runApp( | ||
189 | + GetMaterialApp( | ||
190 | + initialRoute: '/', | ||
191 | + getPages: [ | ||
192 | + GetPage( | ||
193 | + name: '/', | ||
194 | + page: () => MyHomePage(), | ||
195 | + ), | ||
196 | + GetPage( | ||
197 | + name: '/profile/', | ||
198 | + page: () => MyProfile(), | ||
199 | + ), | ||
200 | + //你可以为有参数的路由定义一个不同的页面,也可以为没有参数的路由定义一个不同的页面,但是你必须在不接收参数的路由上使用斜杠"/",就像上面说的那样。 | ||
201 | + GetPage( | ||
202 | + name: '/profile/:user', | ||
203 | + page: () => UserProfile(), | ||
204 | + ), | ||
205 | + GetPage( | ||
206 | + name: '/third', | ||
207 | + page: () => Third(), | ||
208 | + transition: Transition.cupertino | ||
209 | + ), | ||
210 | + ], | ||
211 | + ) | ||
212 | + ); | ||
213 | +} | ||
214 | +``` | ||
215 | + | ||
216 | +发送别名路由数据 | ||
217 | + | ||
218 | +```dart | ||
219 | +Get.toNamed("/second/34954"); | ||
220 | +``` | ||
221 | + | ||
222 | +在第二个页面上,通过参数获取数据 | ||
223 | + | ||
224 | +```dart | ||
225 | +print(Get.parameters['user']); | ||
226 | +// out: 34954 | ||
227 | +``` | ||
228 | + | ||
229 | +现在,你需要做的就是使用Get.toNamed()来导航你的别名路由,不需要任何context(你可以直接从你的BLoC或Controller类中调用你的路由),当你的应用程序被编译到web时,你的路由将出现在URL中。 | ||
230 | + | ||
231 | +### 中间件 | ||
232 | + | ||
233 | +如果你想通过监听Get事件来触发动作,你可以使用routingCallback来实现。 | ||
234 | + | ||
235 | +```dart | ||
236 | +GetMaterialApp( | ||
237 | + routingCallback: (routing) { | ||
238 | + if(routing.current == '/second'){ | ||
239 | + openAds(); | ||
240 | + } | ||
241 | + } | ||
242 | +) | ||
243 | +``` | ||
244 | + | ||
245 | +如果你没有使用GetMaterialApp,你可以使用手动API来附加Middleware观察器。 | ||
246 | + | ||
247 | +```dart | ||
248 | +void main() { | ||
249 | + runApp( | ||
250 | + MaterialApp( | ||
251 | + onGenerateRoute: Router.generateRoute, | ||
252 | + initialRoute: "/", | ||
253 | + navigatorKey: Get.key, | ||
254 | + navigatorObservers: [ | ||
255 | + GetObserver(MiddleWare.observer), // HERE !!! | ||
256 | + ], | ||
257 | + ), | ||
258 | + ); | ||
259 | +} | ||
260 | +``` | ||
261 | + | ||
262 | +创建一个MiddleWare类 | ||
263 | + | ||
264 | +```dart | ||
265 | +class MiddleWare { | ||
266 | + static observer(Routing routing) { | ||
267 | + ///你除了可以监听路由外,还可以监听每个页面上的SnackBars、Dialogs和Bottomsheets。 | ||
268 | + if (routing.current == '/second' && !routing.isSnackbar) { | ||
269 | + Get.snackbar("Hi", "You are on second route"); | ||
270 | + } else if (routing.current =='/third'){ | ||
271 | + print('last route called'); | ||
272 | + } | ||
273 | + } | ||
274 | +} | ||
275 | +``` | ||
276 | + | ||
277 | +现在,在你的代码上使用Get: | ||
278 | + | ||
279 | +```dart | ||
280 | +class First extends StatelessWidget { | ||
281 | + @override | ||
282 | + Widget build(BuildContext context) { | ||
283 | + return Scaffold( | ||
284 | + appBar: AppBar( | ||
285 | + leading: IconButton( | ||
286 | + icon: Icon(Icons.add), | ||
287 | + onPressed: () { | ||
288 | + Get.snackbar("hi", "i am a modern snackbar"); | ||
289 | + }, | ||
290 | + ), | ||
291 | + title: Text('First Route'), | ||
292 | + ), | ||
293 | + body: Center( | ||
294 | + child: RaisedButton( | ||
295 | + child: Text('Open route'), | ||
296 | + onPressed: () { | ||
297 | + Get.toNamed("/second"); | ||
298 | + }, | ||
299 | + ), | ||
300 | + ), | ||
301 | + ); | ||
302 | + } | ||
303 | +} | ||
304 | + | ||
305 | +class Second extends StatelessWidget { | ||
306 | + @override | ||
307 | + Widget build(BuildContext context) { | ||
308 | + return Scaffold( | ||
309 | + appBar: AppBar( | ||
310 | + leading: IconButton( | ||
311 | + icon: Icon(Icons.add), | ||
312 | + onPressed: () { | ||
313 | + Get.snackbar("hi", "i am a modern snackbar"); | ||
314 | + }, | ||
315 | + ), | ||
316 | + title: Text('second Route'), | ||
317 | + ), | ||
318 | + body: Center( | ||
319 | + child: RaisedButton( | ||
320 | + child: Text('Open route'), | ||
321 | + onPressed: () { | ||
322 | + Get.toNamed("/third"); | ||
323 | + }, | ||
324 | + ), | ||
325 | + ), | ||
326 | + ); | ||
327 | + } | ||
328 | +} | ||
329 | + | ||
330 | +class Third extends StatelessWidget { | ||
331 | + @override | ||
332 | + Widget build(BuildContext context) { | ||
333 | + return Scaffold( | ||
334 | + appBar: AppBar( | ||
335 | + title: Text("Third Route"), | ||
336 | + ), | ||
337 | + body: Center( | ||
338 | + child: RaisedButton( | ||
339 | + onPressed: () { | ||
340 | + Get.back(); | ||
341 | + }, | ||
342 | + child: Text('Go back!'), | ||
343 | + ), | ||
344 | + ), | ||
345 | + ); | ||
346 | + } | ||
347 | +} | ||
348 | +``` | ||
349 | + | ||
350 | +## 免context导航 | ||
351 | + | ||
352 | +### SnackBars | ||
353 | + | ||
354 | +用Flutter创建一个简单的SnackBar,你必须获得Scaffold的context,或者你必须使用一个GlobalKey附加到你的Scaffold上。 | ||
355 | + | ||
356 | +```dart | ||
357 | +final snackBar = SnackBar( | ||
358 | + content: Text('Hi!'), | ||
359 | + action: SnackBarAction( | ||
360 | + label: 'I am a old and ugly snackbar :(', | ||
361 | + onPressed: (){} | ||
362 | + ), | ||
363 | +); | ||
364 | +// 在小组件树中找到脚手架并使用它显示一个SnackBars。 | ||
365 | +Scaffold.of(context).showSnackBar(snackBar); | ||
366 | +``` | ||
367 | + | ||
368 | +用Get: | ||
369 | + | ||
370 | +```dart | ||
371 | +Get.snackbar('Hi', 'i am a modern snackbar'); | ||
372 | +``` | ||
373 | + | ||
374 | +有了Get,你所要做的就是在你代码的任何地方调用你的Get.snackbar,或者按照你的意愿定制它。 | ||
375 | + | ||
376 | +```dart | ||
377 | +Get.snackbar( | ||
378 | + "Hey i'm a Get SnackBar!", // title | ||
379 | + "It's unbelievable! I'm using SnackBar without context, without boilerplate, without Scaffold, it is something truly amazing!", // message | ||
380 | + icon: Icon(Icons.alarm), | ||
381 | + shouldIconPulse: true, | ||
382 | + onTap:(){}, | ||
383 | + barBlur: 20, | ||
384 | + isDismissible: true, | ||
385 | + duration: Duration(seconds: 3), | ||
386 | +); | ||
387 | + | ||
388 | + | ||
389 | + ////////// ALL FEATURES ////////// | ||
390 | + // Color colorText, | ||
391 | + // Duration duration, | ||
392 | + // SnackPosition snackPosition, | ||
393 | + // Widget titleText, | ||
394 | + // Widget messageText, | ||
395 | + // bool instantInit, | ||
396 | + // Widget icon, | ||
397 | + // bool shouldIconPulse, | ||
398 | + // double maxWidth, | ||
399 | + // EdgeInsets margin, | ||
400 | + // EdgeInsets padding, | ||
401 | + // double borderRadius, | ||
402 | + // Color borderColor, | ||
403 | + // double borderWidth, | ||
404 | + // Color backgroundColor, | ||
405 | + // Color leftBarIndicatorColor, | ||
406 | + // List<BoxShadow> boxShadows, | ||
407 | + // Gradient backgroundGradient, | ||
408 | + // FlatButton mainButton, | ||
409 | + // OnTap onTap, | ||
410 | + // bool isDismissible, | ||
411 | + // bool showProgressIndicator, | ||
412 | + // AnimationController progressIndicatorController, | ||
413 | + // Color progressIndicatorBackgroundColor, | ||
414 | + // Animation<Color> progressIndicatorValueColor, | ||
415 | + // SnackStyle snackStyle, | ||
416 | + // Curve forwardAnimationCurve, | ||
417 | + // Curve reverseAnimationCurve, | ||
418 | + // Duration animationDuration, | ||
419 | + // double barBlur, | ||
420 | + // double overlayBlur, | ||
421 | + // Color overlayColor, | ||
422 | + // Form userInputForm | ||
423 | + /////////////////////////////////// | ||
424 | +``` | ||
425 | + | ||
426 | +如果您喜欢传统的SnackBars,或者想从头开始定制,包括只添加一行(Get.snackbar使用了一个强制性的标题和信息),您可以使用 | ||
427 | +`Get.rawSnackbar();`它提供了建立Get.snackbar的RAW API。 | ||
428 | + | ||
429 | +### Dialogs | ||
430 | + | ||
431 | +打开Dialogs: | ||
432 | + | ||
433 | +```dart | ||
434 | +Get.dialog(YourDialogWidget()); | ||
435 | +``` | ||
436 | + | ||
437 | +打开默认Dialogs: | ||
438 | + | ||
439 | +```dart | ||
440 | +Get.defaultDialog( | ||
441 | + onConfirm: () => print("Ok"), | ||
442 | + middleText: "Dialog made in 3 lines of code" | ||
443 | +); | ||
444 | +``` | ||
445 | + | ||
446 | +你也可以用Get.generalDialog代替showGeneralDialog。 | ||
447 | + | ||
448 | +对于所有其他的FlutterDialogs小部件,包括cupertinos,你可以使用Get.overlayContext来代替context,并在你的代码中任何地方打开它。 | ||
449 | +对于不使用Overlay的小组件,你可以使用Get.context。 | ||
450 | +这两个context在99%的情况下都可以代替你的UIcontext,除了在没有导航context的情况下使用 inheritedWidget的情况。 | ||
451 | + | ||
452 | +### BottomSheets | ||
453 | + | ||
454 | +Get.bottomSheet类似于showModalBottomSheet,但不需要context: | ||
455 | + | ||
456 | +```dart | ||
457 | +Get.bottomSheet( | ||
458 | + Container( | ||
459 | + child: Wrap( | ||
460 | + children: <Widget>[ | ||
461 | + ListTile( | ||
462 | + leading: Icon(Icons.music_note), | ||
463 | + title: Text('Music'), | ||
464 | + onTap: () => {} | ||
465 | + ), | ||
466 | + ListTile( | ||
467 | + leading: Icon(Icons.videocam), | ||
468 | + title: Text('Video'), | ||
469 | + onTap: () => {}, | ||
470 | + ), | ||
471 | + ], | ||
472 | + ), | ||
473 | + ) | ||
474 | +); | ||
475 | +``` | ||
476 | + | ||
477 | +## 嵌套导航 | ||
478 | + | ||
479 | +Get让Flutter的嵌套导航更加简单。 | ||
480 | +你不需要context,而是通过Id找到你的导航栈。 | ||
481 | + | ||
482 | +- 注意:创建平行导航堆栈可能是危险的。理想的情况是不要使用NestedNavigators,或者尽量少用。如果你的项目需要它,请继续,但请记住,在内存中保持多个导航堆栈可能不是一个好主意(消耗RAM)。 | ||
483 | + | ||
484 | +看看它有多简单: | ||
485 | + | ||
486 | +```dart | ||
487 | +Navigator( | ||
488 | + key: Get.nestedKey(1), // create a key by index | ||
489 | + initialRoute: '/', | ||
490 | + onGenerateRoute: (settings) { | ||
491 | + if (settings.name == '/') { | ||
492 | + return GetPageRoute( | ||
493 | + page: () => Scaffold( | ||
494 | + appBar: AppBar( | ||
495 | + title: Text("Main"), | ||
496 | + ), | ||
497 | + body: Center( | ||
498 | + child: FlatButton( | ||
499 | + color: Colors.blue, | ||
500 | + onPressed: () { | ||
501 | + Get.toNamed('/second', id:1); // navigate by your nested route by index | ||
502 | + }, | ||
503 | + child: Text("Go to second"), | ||
504 | + ), | ||
505 | + ), | ||
506 | + ), | ||
507 | + ); | ||
508 | + } else if (settings.name == '/second') { | ||
509 | + return GetPageRoute( | ||
510 | + page: () => Center( | ||
511 | + child: Scaffold( | ||
512 | + appBar: AppBar( | ||
513 | + title: Text("Main"), | ||
514 | + ), | ||
515 | + body: Center( | ||
516 | + child: Text("second") | ||
517 | + ), | ||
518 | + ), | ||
519 | + ), | ||
520 | + ); | ||
521 | + } | ||
522 | + } | ||
523 | +), | ||
524 | +``` |
documentation/zh_CN/state_management.md
0 → 100644
1 | +- [状态管理](#状态管理) | ||
2 | + - [响应式状态管理器](#响应式状态管理器) | ||
3 | + - [优点](#优势) | ||
4 | + - [声明一个响应式变量](#声明一个响应式变量) | ||
5 | + - [使用视图中的值](#使用视图中的值) | ||
6 | + - [什么时候重建](#什么时候重建) | ||
7 | + - [可以使用.obs的地方](#可以使用.obs的地方) | ||
8 | + - [关于List的说明](#关于List的说明) | ||
9 | + - [为什么使用.value](#为什么使用.value) | ||
10 | + - [Obx()](#obx) | ||
11 | + - [Workers](#Workers) | ||
12 | + - [简单状态管理器](#简单状态管理器) | ||
13 | + - [优点](#优点) | ||
14 | + - [用法](#用法) | ||
15 | + - [如何处理controller](#如何处理controller) | ||
16 | + - [无需StatefulWidgets](#无需StatefulWidgets) | ||
17 | + - [为什么它存在](#为什么它存在) | ||
18 | + - [其他使用方法](#其他使用方法) | ||
19 | + - [唯一的ID](#唯一的ID) | ||
20 | + - [与其他状态管理器混用](#与其他状态管理器混用) | ||
21 | + - [GetBuilder vs GetX vs Obx vs MixinBuilder](#GetBuilder-vs-GetX-vs-Obx-vs-MixinBuilder) | ||
22 | + | ||
23 | +# 状态管理 | ||
24 | + | ||
25 | +目前,Flutter有几种状态管理器。但是,它们中的大多数都涉及到使用ChangeNotifier来更新widget,这对于中大型应用的性能来说是一个糟糕的方法。你可以在Flutter官方文档中查到,[ChangeNotifier应该使用1个或最多2个监听器](https://api.flutter.dev/flutter/foundation/ChangeNotifier-class.html),这使得它实际上无法用于任何中等或大型应用。 | ||
26 | + | ||
27 | +其他的状态管理器也不错,但有其细微的差别。 | ||
28 | + | ||
29 | +- BLoC非常安全和高效,但是对于初学者来说非常复杂,这使得人们无法使用Flutter进行开发。 | ||
30 | +- MobX比BLoC更容易,而且是响应式的,几乎是完美的,但是你需要使用一个代码生成器,对于大型应用来说,这降低了生产力,因为你需要喝很多咖啡,直到你的代码在`flutter clean`之后再次准备好(这不是MobX的错,而是codegen真的很慢!)。 | ||
31 | +- Provider使用InheritedWidget来传递相同的监听器,以此来解决上面报告的ChangeNotifier的问题,这意味着对其ChangeNotifier类的任何访问都必须在widget树内。 | ||
32 | + | ||
33 | +Get并不是比任何其他状态管理器更好或更差,而是说你应该分析这些要点以及下面的要点来选择是只用Get,还是与其他状态管理器结合使用。Get不是其他状态管理器的敌人,因为Get是一个微框架,而不仅仅是一个状态管理器,它的状态管理功能既可以单独使用,也可以与其他状态管理器结合使用。 | ||
34 | + | ||
35 | +## 响应式状态管理器 | ||
36 | + | ||
37 | +响应式编程可能会让很多人感到陌生,因为它很复杂,但是GetX将响应式编程变得非常简单。 | ||
38 | + | ||
39 | +- 你不需要创建StreamControllers. | ||
40 | +- 你不需要为每个变量创建一个StreamBuilder。 | ||
41 | +- 你不需要为每个状态创建一个类。 | ||
42 | +- 你不需要为一个初始值创建一个get。 | ||
43 | + | ||
44 | +使用 Get 的响应式编程就像使用 setState 一样简单。 | ||
45 | + | ||
46 | +让我们想象一下,你有一个名称变量,并且希望每次你改变它时,所有使用它的小组件都会自动刷新。 | ||
47 | + | ||
48 | +这是你的计数变量: | ||
49 | + | ||
50 | +```dart | ||
51 | +var name = 'Jonatas Borges'; | ||
52 | +``` | ||
53 | + | ||
54 | +要想让它变得可观察,你只需要在它的末尾加上".obs"。 | ||
55 | + | ||
56 | +```dart | ||
57 | +var name = 'Jonatas Borges'.obs; | ||
58 | +``` | ||
59 | + | ||
60 | +就这么简单! | ||
61 | + | ||
62 | +我们把这个reactive-".obs"(ervables)变量称为_Rx_。 | ||
63 | + | ||
64 | +我们做了什么?我们创建了一个 "Stream "的 "String",分配了初始值 "Jonatas Borges",我们通知所有使用 "Jonatas Borges "的widgets,它们现在 "属于 "这个变量,当_Rx_的值发生变化时,它们也要随之改变。 | ||
65 | + | ||
66 | +这就是GetX**的**魔力,这要归功于Dart的能力。 | ||
67 | + | ||
68 | +但是,我们知道,一个`Widget`只有在函数里面才能改变,因为静态类没有 "自动改变 "的能力。 | ||
69 | + | ||
70 | +你需要创建一个`StreamBuilder`,订阅这个变量来监听变化,如果你想在同一个范围内改变几个变量,就需要创建一个 "级联 "的嵌套`StreamBuilder`,对吧? | ||
71 | + | ||
72 | +不,你不需要一个`StreamBuilder`,但你对静态类的理解是对的。 | ||
73 | + | ||
74 | +在视图中,当我们想改变一个特定的Widget时,我们通常有很多Flutter方式的模板。 | ||
75 | +有了**GetX**,你也可以忘记这些模板代码了。 | ||
76 | + | ||
77 | +`StreamBuilder( ... )`? `initialValue: ...`? `builder: ...`? 不,你只需要把这个变量放在`Obx()`这个Widget里面就可以了。 | ||
78 | + | ||
79 | +```dart | ||
80 | +Obx (() => Text (controller.name)); | ||
81 | +``` | ||
82 | + | ||
83 | +_你只需记住 `Obx(()=>` | ||
84 | + | ||
85 | +你只需将Widget通过一个箭头函数传递给 `Obx()`(_Rx_的 "观察者")。 | ||
86 | + | ||
87 | +`Obx`是相当聪明的,只有当`controller.name`的值发生变化时才会改变。 | ||
88 | + | ||
89 | +如果`name`是`"John"`,你把它改成了`"John"`(`name.value="John"`),因为它和之前的`value`是一样的,所以界面上不会有任何变化,而`Obx`为了节省资源,会直接忽略新的值,不重建Widget。**这是不是很神奇**? | ||
90 | + | ||
91 | +> 那么,如果我在一个`Obx`里有5个_Rx_(可观察的)变量呢? | ||
92 | + | ||
93 | +当其中**任何**一个变量发生变化时,它就会更新。 | ||
94 | + | ||
95 | +> 如果我在一个类中有 30 个变量,当我更新其中一个变量时,它会更新该类中**所有**的变量吗? | ||
96 | + | ||
97 | +不会,只会更新使用那个 _Rx_ 变量的**特定 Widget**。 | ||
98 | + | ||
99 | +所以,只有当_Rx_变量的值发生变化时,**GetX**才会更新界面。 | ||
100 | + | ||
101 | +``` | ||
102 | +final isOpen = false.obs; | ||
103 | + | ||
104 | +//什么都不会发生......相同的值。 | ||
105 | +void onButtonTap() => isOpen.value=false; | ||
106 | +``` | ||
107 | +### 优势 | ||
108 | + | ||
109 | +**当你需要对更新的内容进行**精细的控制时,**GetX()** 可以帮助你。 | ||
110 | + | ||
111 | +如果你不需要 "unique IDs",比如当你执行一个操作时,你的所有变量都会被修改,那么就使用`GetBuilder`。 | ||
112 | +因为它是一个简单的状态更新器(以块为单位,比如`setState()`),只用几行代码就能完成。 | ||
113 | +它做得很简单,对CPU的影响最小,只是为了完成一个单一的目的(一个_State_ Rebuild),并尽可能地花费最少的资源。 | ||
114 | + | ||
115 | +如果你需要一个**强大的**状态管理器,用**GetX**是不会错的。 | ||
116 | + | ||
117 | +它不能和变量一起工作,除了__flows__,它里面的东西本质都是`Streams`。 | ||
118 | +你可以将_rxDart_与它结合使用,因为所有的东西都是`Streams`。 | ||
119 | +你可以监听每个"_Rx_变量 "的 "事件"。 | ||
120 | +因为里面的所有东西都是 "Streams"。 | ||
121 | + | ||
122 | +这实际上是一种_BLoC_方法,比_MobX_更容易,而且没有代码生成器或装饰。 | ||
123 | +你可以把**任何东西**变成一个_"Observable"_,只需要在它末尾加上`.obs`。 | ||
124 | + | ||
125 | +### 最高性能 | ||
126 | + | ||
127 | +除了有一个智能的算法来实现最小化的重建,**GetX**还使用了比较器以确保状态已经改变。 | ||
128 | + | ||
129 | +如果你的应用程序中遇到错误,并发送重复的状态变更,**GetX**将确保它不会崩溃。 | ||
130 | + | ||
131 | +使用**GetX**,只有当`value`改变时,状态才会改变。 | ||
132 | +这就是**GetX**,和使用MobX_的_`computed`的主要区别。 | ||
133 | +当加入两个__observable__,其中一个发生变化时,该_observable_的监听器也会发生变化。 | ||
134 | + | ||
135 | +使用**GetX**,如果你连接了两个变量,`GetX()`(类似于`Observer()`)只有在它的状态真正变化时才会重建。 | ||
136 | + | ||
137 | +### 声明一个响应式变量 | ||
138 | + | ||
139 | +你有3种方法可以把一个变量变成是 "可观察的"。 | ||
140 | + | ||
141 | + | ||
142 | +1 - 第一种是使用 **`Rx{Type}`**。 | ||
143 | + | ||
144 | +```dart | ||
145 | +// 建议使用初始值,但不是强制性的 | ||
146 | +final name = RxString(''); | ||
147 | +final isLogged = RxBool(false); | ||
148 | +final count = RxInt(0); | ||
149 | +final balance = RxDouble(0.0); | ||
150 | +final items = RxList<String>([]); | ||
151 | +final myMap = RxMap<String, int>({}); | ||
152 | +``` | ||
153 | + | ||
154 | +2 - 第二种是使用 **`Rx`**,规定泛型 `Rx<Type>`。 | ||
155 | + | ||
156 | +```dart | ||
157 | +final name = Rx<String>(''); | ||
158 | +final isLogged = Rx<Bool>(false); | ||
159 | +final count = Rx<Int>(0); | ||
160 | +final balance = Rx<Double>(0.0); | ||
161 | +final number = Rx<Num>(0) | ||
162 | +final items = Rx<List<String>>([]); | ||
163 | +final myMap = Rx<Map<String, int>>({}); | ||
164 | + | ||
165 | +// 自定义类 - 可以是任何类 | ||
166 | +final user = Rx<User>(); | ||
167 | +``` | ||
168 | + | ||
169 | +3 - 第三种更实用、更简单、更可取的方法,只需添加 **`.obs`** 作为`value`的属性。 | ||
170 | + | ||
171 | +```dart | ||
172 | +final name = ''.obs; | ||
173 | +final isLogged = false.obs; | ||
174 | +final count = 0.obs; | ||
175 | +final balance = 0.0.obs; | ||
176 | +final number = 0.obs; | ||
177 | +final items = <String>[].obs; | ||
178 | +final myMap = <String, int>{}.obs; | ||
179 | + | ||
180 | +// 自定义类 - 可以是任何类 | ||
181 | +final user = User().obs; | ||
182 | +``` | ||
183 | + | ||
184 | +##### 有一个反应的状态,很容易。 | ||
185 | + | ||
186 | +我们知道,_Dart_现在正朝着_null safety_的方向发展。 | ||
187 | +为了做好准备,从现在开始,你应该总是用一个**初始值**来开始你的_Rx_变量。 | ||
188 | + | ||
189 | +> 用**GetX**将一个变量转化为一个_observable_ + _initial value_是最简单,也是最实用的方法。 | ||
190 | + | ||
191 | +你只需在变量的末尾添加一个"`.obs`",即可把它变成可观察的变量, | ||
192 | +然后它的`.value`就是_初始值_)。 | ||
193 | + | ||
194 | + | ||
195 | +### 使用视图中的值 | ||
196 | + | ||
197 | +```dart | ||
198 | +// controller | ||
199 | +final count1 = 0.obs; | ||
200 | +final count2 = 0.obs; | ||
201 | +int get sum => count1.value + count2.value; | ||
202 | +``` | ||
203 | + | ||
204 | +```dart | ||
205 | +// 视图 | ||
206 | +GetX<Controller>( | ||
207 | + builder: (controller) { | ||
208 | + print("count 1 rebuild"); | ||
209 | + return Text('${controller.count1.value}'); | ||
210 | + }, | ||
211 | +), | ||
212 | +GetX<Controller>( | ||
213 | + builder: (controller) { | ||
214 | + print("count 2 rebuild"); | ||
215 | + return Text('${controller.count2.value}'); | ||
216 | + }, | ||
217 | +), | ||
218 | +GetX<Controller>( | ||
219 | + builder: (controller) { | ||
220 | + print("count 3 rebuild"); | ||
221 | + return Text('${controller.sum}'); | ||
222 | + }, | ||
223 | +), | ||
224 | +``` | ||
225 | + | ||
226 | +如果我们把`count1.value++`递增,就会打印出来: | ||
227 | +- `count 1 rebuild` | ||
228 | +- `count 3 rebuild` | ||
229 | + | ||
230 | + | ||
231 | +如果我们改变`count2.value++`,就会打印出来。 | ||
232 | +- `count 2 rebuild` | ||
233 | +- `count 3 rebuild` | ||
234 | + | ||
235 | +因为`count2.value`改变了,`sum`的结果现在是`2`。 | ||
236 | + | ||
237 | +- 注意:默认情况下,第一个事件将重建小组件,即使是相同的`值`。 | ||
238 | + 这种行为是由于布尔变量而存在的。 | ||
239 | + | ||
240 | +想象一下你这样做。 | ||
241 | + | ||
242 | +```dart | ||
243 | +var isLogged = false.obs; | ||
244 | +``` | ||
245 | + | ||
246 | +然后,你检查用户是否 "登录",以触发`ever`的事件。 | ||
247 | + | ||
248 | +```dart | ||
249 | +@override | ||
250 | +onInit(){ | ||
251 | + ever(isLogged, fireRoute); | ||
252 | + isLogged.value = await Preferences.hasToken(); | ||
253 | +} | ||
254 | + | ||
255 | +fireRoute(logged) { | ||
256 | + if (logged) { | ||
257 | + Get.off(Home()); | ||
258 | + } else { | ||
259 | + Get.off(Login()); | ||
260 | + } | ||
261 | +} | ||
262 | +``` | ||
263 | + | ||
264 | +如果 "hasToken "是 "false","isLogged "就不会有任何变化,所以 "ever() "永远不会被调用。 | ||
265 | +为了避免这种问题,_observable_的第一次变化将总是触发一个事件,即使它包含相同的`.value`。 | ||
266 | + | ||
267 | +如果你想删除这种行为,你可以使用: | ||
268 | +`isLogged.firstRebuild = false;`。 | ||
269 | + | ||
270 | +### 什么时候重建 | ||
271 | + | ||
272 | +此外,Get还提供了精细的状态控制。你可以根据特定的条件对一个事件进行条件控制(比如将一个对象添加到List中)。 | ||
273 | + | ||
274 | +```dart | ||
275 | +// 第一个参数:条件,必须返回true或false。 | ||
276 | +// 第二个参数:如果条件为真,则为新的值。 | ||
277 | +list.addIf(item < limit, item); | ||
278 | +``` | ||
279 | + | ||
280 | +没有装饰,没有代码生成器,没有复杂的程序: 爽歪歪! | ||
281 | + | ||
282 | +你知道Flutter的计数器应用吗?你的Controller类可能是这样的。 | ||
283 | + | ||
284 | +```dart | ||
285 | +class CountController extends GetxController { | ||
286 | + final count = 0.obs; | ||
287 | +} | ||
288 | +``` | ||
289 | + | ||
290 | +用一个简单的。 | ||
291 | + | ||
292 | +```dart | ||
293 | +controller.count.value++ | ||
294 | +``` | ||
295 | + | ||
296 | +你可以在你的UI中更新计数器变量,不管它存储在哪里。 | ||
297 | + | ||
298 | +### 可以使用.obs的地方 | ||
299 | + | ||
300 | +你可以在 obs 上转换任何东西,这里有两种方法: | ||
301 | + | ||
302 | +* 可以将你的类值转换为 obs | ||
303 | +```dart | ||
304 | +class RxUser { | ||
305 | + final name = "Camila".obs; | ||
306 | + final age = 18.obs; | ||
307 | +} | ||
308 | +``` | ||
309 | + | ||
310 | +* 或者可以将整个类转换为一个可观察的类。 | ||
311 | +```dart | ||
312 | +class User { | ||
313 | + User({String name, int age}); | ||
314 | + var name; | ||
315 | + var age; | ||
316 | +} | ||
317 | + | ||
318 | +//实例化时。 | ||
319 | +final user = User(name: "Camila", age: 18).obs; | ||
320 | +``` | ||
321 | + | ||
322 | +### 关于List的说明 | ||
323 | + | ||
324 | +List和它里面的对象一样,是完全可以观察的。这样一来,如果你在List中添加一个值,它会自动重建使用它的widget。 | ||
325 | + | ||
326 | +你也不需要在List中使用".value",神奇的dart api允许我们删除它。 | ||
327 | +不幸的是,像String和int这样的原始类型不能被扩展,使得.value的使用是强制性的,但是如果你使用get和setter来处理这些类型,这将不是一个问题。 | ||
328 | + | ||
329 | +```dart | ||
330 | +// controller | ||
331 | +final String title = 'User Info:'.obs | ||
332 | +final list = List<User>().obs; | ||
333 | + | ||
334 | +// view | ||
335 | +Text(controller.title.value), // 字符串后面需要有.value。 | ||
336 | +ListView.builder ( | ||
337 | + itemCount: controller.list.length // List不需要它 | ||
338 | +) | ||
339 | +``` | ||
340 | + | ||
341 | +当你在使自己的类可观察时,有另外一种方式来更新它们: | ||
342 | + | ||
343 | +```dart | ||
344 | +// model | ||
345 | +// 我们将使整个类成为可观察的,而不是每个属性。 | ||
346 | +class User() { | ||
347 | + User({this.name = '', this.age = 0}); | ||
348 | + String name; | ||
349 | + int age; | ||
350 | +} | ||
351 | + | ||
352 | + | ||
353 | +// controller | ||
354 | +final user = User().obs; | ||
355 | +//当你需要更新用户变量时。 | ||
356 | +user.update( (user) { // 这个参数是你要更新的类本身。 | ||
357 | +user.name = 'Jonny'; | ||
358 | +user.age = 18; | ||
359 | +}); | ||
360 | +// 更新用户变量的另一种方式。 | ||
361 | +user(User(name: 'João', age: 35)); | ||
362 | + | ||
363 | +// view | ||
364 | +Obx(()=> Text("Name ${user.value.name}: Age: ${user.value.age}")) | ||
365 | +// 你也可以不使用.value来访问模型值。 | ||
366 | +user().name; // 注意是用户变量,而不是类变量(首字母是小写的)。 | ||
367 | +``` | ||
368 | + | ||
369 | +你可以使用 "assign "和" assignAll "。 | ||
370 | +"assign "会清除你的List,并添加一个单个对象。 | ||
371 | +"assignAll "将清除现有的List,并添加任何可迭代对象。 | ||
372 | + | ||
373 | +### 为什么使用.value | ||
374 | + | ||
375 | +我们可以通过一个简单的装饰和代码生成器来消除使用"String "和 "int "的值的义务,但这个库的目的正是为了避免外部依赖。我们希望提供一个准备好的编程的环境(路由、依赖和状态的管理),以一种简单、轻量级和高性能的方式,而不需要一个外部包。 | ||
376 | + | ||
377 | +你可以在你的pubspec中添加3个字母(get)和一个冒号,然后开始编程。从路由管理到状态管理,所有的解决方案都是默认的,目的是为了方便、高效和高性能。 | ||
378 | + | ||
379 | +这个库的总大小还不如一个状态管理器,尽管它是一个完整的解决方案。 | ||
380 | + | ||
381 | +如果你被`.value`困扰,喜欢代码生成器,MobX是一个很好的选择,也可以和Get一起使用。对于那些想在pubspec中添加一个单一的依赖,然后开始编程,而不用担心一个包的版本与另一个包不兼容,也不用担心状态更新的错误来自于状态管理器或依赖,还是不想担心控制器的可用性,get都是刚刚好。 | ||
382 | + | ||
383 | +如果你对MobX代码生成器或者BLoC模板熟悉,你可以直接用Get来做路由,而忘记它有状态管理器。如果有一个项目有90多个控制器,MobX代码生成器在标准机器上进行Flutter Clean后,需要30多分钟才能完成任务。如果你的项目有5个、10个、15个控制器,任何一个状态管理器都能很好的满足你。如果你的项目大得离谱,代码生成器对你来说是个问题,但你已经获得了Get这个解决方案。 | ||
384 | + | ||
385 | +显然,如果有人想为项目做贡献,创建一个代码生成器,或者类似的东西,我将在这个readme中链接,作为一个替代方案,我的需求并不是所有开发者的需求,但现在我要说的是,已经有很好的解决方案,比如MobX。 | ||
386 | + | ||
387 | +### Obx() | ||
388 | + | ||
389 | +在Get中使用Bindings的类型是不必要的。你可以使用Obx widget代替GetX,GetX只接收创建widget的匿名函数。 | ||
390 | +如果你不使用类型,你将需要有一个控制器的实例来使用变量,或者使用`Get.find<Controller>()`.value或Controller.to.value来检索值。 | ||
391 | + | ||
392 | +### Workers | ||
393 | + | ||
394 | +Workers将协助你在事件发生时触发特定的回调。 | ||
395 | + | ||
396 | +```dart | ||
397 | +///每次`count1`变化时调用。 | ||
398 | +ever(count1, (_) => print("$_ has been changed")); | ||
399 | + | ||
400 | +///只有在变量$_第一次被改变时才会被调用。 | ||
401 | +once(count1, (_) => print("$_ was changed once")); | ||
402 | + | ||
403 | +///防DDos - 每当用户停止输入1秒时调用,例如。 | ||
404 | +debounce(count1, (_) => print("debouce$_"), time: Duration(seconds: 1)); | ||
405 | + | ||
406 | +///忽略1秒内的所有变化。 | ||
407 | +interval(count1, (_) => print("interval $_"), time: Duration(seconds: 1)); | ||
408 | +``` | ||
409 | +所有Workers(除 "debounce "外)都有一个名为 "condition"的参数,它可以是一个 "bool "或一个返回 "bool "的回调。 | ||
410 | +这个`condition`定义了`callback`函数何时执行。 | ||
411 | + | ||
412 | +所有worker都会返回一个`Worker`实例,你可以用它来取消(通过`dispose()`)worker。 | ||
413 | + | ||
414 | +- **`ever`** | ||
415 | + 每当_Rx_变量发出一个新的值时,就会被调用。 | ||
416 | + | ||
417 | +- **`everAll`** | ||
418 | + 和 "ever "很像,但它需要一个_Rx_值的 "List",每次它的变量被改变时都会被调用。就是这样。 | ||
419 | + | ||
420 | + | ||
421 | +- **`once`** | ||
422 | +'once'只在变量第一次被改变时被调用。 | ||
423 | + | ||
424 | +- **`debounce`** | ||
425 | +debounce'在搜索函数中非常有用,你只希望API在用户完成输入时被调用。如果用户输入 "Jonny",你将在API中进行5次搜索,分别是字母J、o、n、n和y。使用Get不会发生这种情况,因为你将有一个 "debounce "Worker,它只会在输入结束时触发。 | ||
426 | + | ||
427 | +- **`interval`** | ||
428 | +'interval'与debouce不同,debouce如果用户在1秒内对一个变量进行了1000次修改,他将在规定的计时器(默认为800毫秒)后只发送最后一次修改。Interval则会忽略规定时间内的所有用户操作。如果你发送事件1分钟,每秒1000个,那么当用户停止DDOS事件时,debounce将只发送最后一个事件。建议这样做是为了避免滥用,在用户可以快速点击某样东西并获得一些好处的功能中(想象一下,用户点击某样东西可以赚取硬币,如果他在同一分钟内点击300次,他就会有300个硬币,使用间隔,你可以设置时间范围为3秒,无论是点击300次或100万次,1分钟内他最多获得20个硬币)。debounce适用于防DDOS,适用于搜索等功能,每次改变onChange都会调用你的api进行查询。Debounce会等待用户停止输入名称,进行请求。如果在上面提到的投币场景中使用它,用户只会赢得1个硬币,因为只有当用户 "暂停 "到既定时间时,它才会被执行。 | ||
429 | + | ||
430 | +- 注意:Worker应该总是在启动Controller或Class时使用,所以应该总是在onInit(推荐)、Class构造函数或StatefulWidget的initState(大多数情况下不推荐这种做法,但应该不会有任何副作用)。 | ||
431 | + | ||
432 | +## 简单状态管理器 | ||
433 | + | ||
434 | +Get有一个极其轻巧简单的状态管理器,它不使用ChangeNotifier,可以满足特别是对Flutter新手的需求,而且不会给大型应用带来问题。 | ||
435 | + | ||
436 | +GetBuilder正是针对多状态控制的。想象一下,你在购物车中添加了30个产品,你点击删除一个,同时List更新了,价格更新了,购物车中的徽章也更新为更小的数字。这种类型的方法使GetBuilder成为杀手锏,因为它将状态分组并一次性改变,而无需为此进行任何 "计算逻辑"。GetBuilder就是考虑到这种情况而创建的,因为对于短暂的状态变化,你可以使用setState,而不需要状态管理器。 | ||
437 | + | ||
438 | +这样一来,如果你想要一个单独的控制器,你可以为其分配ID,或者使用GetX。这取决于你,记住你有越多的 "单独 "部件,GetX的性能就越突出,而当有多个状态变化时,GetBuilder的性能应该更优越。 | ||
439 | + | ||
440 | +### 优点 | ||
441 | + | ||
442 | +1. 只更新需要的小部件。 | ||
443 | + | ||
444 | +2. 不使用changeNotifier,状态管理器使用较少的内存(接近0mb)。 | ||
445 | + | ||
446 | +3. 忘掉StatefulWidget! 使用Get你永远不会需要它。对于其他的状态管理器,你可能需要使用StatefulWidget来获取你的Provider、BLoC、MobX控制器等的实例。但是你有没有停下来想一想,你的appBar,你的脚手架,以及你的类中的大部分widget都是无状态的?那么如果你只能保存有状态的Widget的状态,为什么要保存整个类的状态呢?Get也解决了这个问题。创建一个无状态类,让一切都成为无状态。如果你需要更新单个组件,就用GetBuilder把它包起来,它的状态就会被维护。 | ||
447 | + | ||
448 | +4. 真正的解耦你的项目! 控制器一定不要在你的UI中,把你的TextEditController,或者你使用的任何控制器放在你的Controller类中。 | ||
449 | + | ||
450 | +5. 你是否需要触发一个事件来更新一个widget,一旦它被渲染?GetBuilder有一个属性 "initState",就像StatefulWidget一样,你可以从你的控制器中调用事件,直接从控制器中调用,不需要再在你的initState中放置事件。 | ||
451 | + | ||
452 | +6. 你是否需要触发一个动作,比如关闭流、定时器等?GetBuilder也有dispose属性,只要该widget被销毁,你就可以调用事件。 | ||
453 | + | ||
454 | +7. 仅在必要时使用流。你可以在你的控制器里面正常使用你的StreamControllers,也可以正常使用StreamBuilder,但是请记住,一个流消耗合理的内存,响应式编程很美,但是你不应该滥用它。30个流同时打开会比changeNotifier更糟糕(而且changeNotifier非常糟糕)。 | ||
455 | + | ||
456 | +8. 更新widgets而不需要为此花费ram。Get只存储GetBuilder的创建者ID,必要时更新该GetBuilder。get ID存储在内存中的消耗非常低,即使是成千上万的GetBuilders。当你创建一个新的GetBuilder时,你实际上是在共享拥有创建者ID的GetBuilder的状态。不会为每个GetBuilder创建一个新的状态,这为大型应用节省了大量的内存。基本上你的应用程序将是完全无状态的,而少数有状态的Widgets(在GetBuilder内)将有一个单一的状态,因此更新一个状态将更新所有的状态。状态只是一个。 | ||
457 | + | ||
458 | +9. Get是全知全能的,在大多数情况下,它很清楚地知道从内存中取出一个控制器的时机,你不需要担心什么时候移除一个控制器,Get知道最佳的时机。 | ||
459 | + | ||
460 | +### 用法 | ||
461 | + | ||
462 | +```dart | ||
463 | +// 创建控制器类并扩展GetxController。 | ||
464 | +class Controller extends GetxController { | ||
465 | + int counter = 0; | ||
466 | + void increment() { | ||
467 | + counter++; | ||
468 | + update(); // 当调用增量时,使用update()来更新用户界面上的计数器变量。 | ||
469 | + } | ||
470 | +} | ||
471 | +// 在你的Stateless/Stateful类中,当调用increment时,使用GetBuilder来更新Text。 | ||
472 | +GetBuilder<Controller>( | ||
473 | + init: Controller(), // 首次启动 | ||
474 | + builder: (_) => Text( | ||
475 | + '${_.counter}', | ||
476 | + ), | ||
477 | +) | ||
478 | +//只在第一次时初始化你的控制器。第二次使用ReBuilder时,不要再使用同一控制器。一旦将控制器标记为 "init "的部件部署完毕,你的控制器将自动从内存中移除。你不必担心这个问题,Get会自动做到这一点,只是要确保你不要两次启动同一个控制器。 | ||
479 | +``` | ||
480 | + | ||
481 | +**完成!** | ||
482 | + | ||
483 | +- 你已经学会了如何使用Get管理状态。 | ||
484 | + | ||
485 | +- 注意:你可能想要一个更大的规模,而不是使用init属性。为此,你可以创建一个类并扩展Bindings类,并在其中添加将在该路由中创建的控制器。控制器不会在那个时候被创建,相反,这只是一个声明,这样你第一次使用Controller时,Get就会知道去哪里找。Get会保持懒加载,当不再需要Controller时,会自动移除它们。请看pub.dev的例子来了解它是如何工作的。 | ||
486 | + | ||
487 | +如果你导航了很多路由,并且需要之前使用的Controller中的数据,你只需要再用一次GetBuilder(没有init)。 | ||
488 | + | ||
489 | +```dart | ||
490 | +class OtherClass extends StatelessWidget { | ||
491 | + @override | ||
492 | + Widget build(BuildContext context) { | ||
493 | + return Scaffold( | ||
494 | + body: Center( | ||
495 | + child: GetBuilder<Controller>( | ||
496 | + builder: (s) => Text('${s.counter}'), | ||
497 | + ), | ||
498 | + ), | ||
499 | + ); | ||
500 | + } | ||
501 | + | ||
502 | +``` | ||
503 | + | ||
504 | +如果你需要在许多其他地方使用你的控制器,并且在GetBuilder之外,只需在你的控制器中创建一个get,就可以轻松地拥有它。(或者使用`Get.find<Controller>()`) | ||
505 | + | ||
506 | +```dart | ||
507 | +class Controller extends GetxController { | ||
508 | + | ||
509 | + /// 你不需要这个,我推荐使用它只是为了方便语法。 | ||
510 | + /// 用静态方法:Controller.to.counter()。 | ||
511 | + /// 没有静态方法的情况下:Get.find<Controller>().counter(); | ||
512 | + /// 使用这两种语法在性能上没有区别,也没有任何副作用。一个不需要类型,另一个IDE会自动完成。 | ||
513 | + static Controller get to => Get.find(); // 添加这一行 | ||
514 | + | ||
515 | + int counter = 0; | ||
516 | + void increment() { | ||
517 | + counter++; | ||
518 | + update(); | ||
519 | + } | ||
520 | +} | ||
521 | +``` | ||
522 | + | ||
523 | +然后你可以直接访问你的控制器,这样: | ||
524 | + | ||
525 | +```dart | ||
526 | +FloatingActionButton( | ||
527 | + onPressed: () { | ||
528 | + Controller.to.increment(), | ||
529 | + } // 是不是贼简单! | ||
530 | + child: Text("${Controller.to.counter}"), | ||
531 | +), | ||
532 | +``` | ||
533 | + | ||
534 | +当你按下FloatingActionButton时,所有监听'counter'变量的widget都会自动更新。 | ||
535 | + | ||
536 | +### 如何处理controller | ||
537 | + | ||
538 | +比方说,我们有这样的情况。 | ||
539 | + | ||
540 | +`Class a => Class B (has controller X) => Class C (has controller X)` | ||
541 | + | ||
542 | +在A类中,控制器还没有进入内存,因为你还没有使用它(Get是懒加载)。在类B中,你使用了控制器,并且它进入了内存。在C类中,你使用了与B类相同的控制器,Get会将控制器B的状态与控制器C共享,同一个控制器还在内存中。如果你关闭C屏和B屏,Get会自动将控制器X从内存中移除,释放资源,因为a类没有使用该控制器。如果你再次导航到B,控制器X将再次进入内存,如果你没有去C类,而是再次回到a类,Get将以同样的方式将控制器从内存中移除。如果类C没有使用控制器,你把类B从内存中移除,就没有类在使用控制器X,同样也会被处理掉。唯一能让Get乱了阵脚的例外情况,是如果你意外地从路由中删除了B,并试图使用C中的控制器,在这种情况下,B中的控制器的创建者ID被删除了,Get被设计为从内存中删除每一个没有创建者ID的控制器。如果你打算这样做,在B类的GetBuilder中添加 "autoRemove: false "标志,并在C类的GetBuilder中使用adopID = true; | ||
543 | + | ||
544 | +### 无需StatefulWidgets | ||
545 | + | ||
546 | +使用StatefulWidgets意味着不必要地存储整个界面的状态,甚至因为如果你需要最小化地重建一个widget,你会把它嵌入一个Consumer/Observer/BlocProvider/GetBuilder/GetX/Obx中,这将是另一个StatefulWidget。 | ||
547 | +StatefulWidget类是一个比StatelessWidget大的类,它将分配更多的RAM,只使用一两个类之间可能不会有明显的区别,但当你有100个类时,它肯定会有区别! | ||
548 | +除非你需要使用混合器,比如TickerProviderStateMixin,否则完全没有必要使用StatefulWidget与Get。 | ||
549 | + | ||
550 | +你可以直接从GetBuilder中调用StatefulWidget的所有方法。 | ||
551 | +例如,如果你需要调用initState()或dispose()方法,你可以直接调用它们。 | ||
552 | + | ||
553 | +```dart | ||
554 | +GetBuilder<Controller>( | ||
555 | + initState: (_) => Controller.to.fetchApi(), | ||
556 | + dispose: (_) => Controller.to.closeStreams(), | ||
557 | + builder: (s) => Text('${s.username}'), | ||
558 | +), | ||
559 | +``` | ||
560 | + | ||
561 | +比这更好的方法是直接从控制器中使用onInit()和onClose()方法。 | ||
562 | + | ||
563 | +```dart | ||
564 | +@override | ||
565 | +void onInit() { | ||
566 | + fetchApi(); | ||
567 | + super.onInit(); | ||
568 | +} | ||
569 | +``` | ||
570 | + | ||
571 | +- 注意:如果你想在控制器第一次被调用的那一刻启动一个方法,你不需要为此使用构造函数,使用像Get这样面向性能的包,这样做反而是糟糕的做法,因为它偏离了控制器被创建或分配的逻辑(如果你创建了这个控制器的实例,构造函数会立即被调用,你会在控制器还没有被使用之前就填充了一个控制器,你在没有被使用的情况下就分配了内存,这绝对违背这个库的原则)。onInit();和onClose();方法就是为此而创建的,它们会在Controller被创建,或者第一次使用时被调用,这取决于你是否使用Get.lazyPut。例如,如果你想调用你的API来填充数据,你可以忘掉老式的initState/dispose方法,只需在onInit中开始调用api,如果你需要执行任何命令,如关闭流,使用onClose()来实现。 | ||
572 | + | ||
573 | +### 为什么它存在 | ||
574 | + | ||
575 | +这个包的目的正是为了给你提供一个完整的解决方案,用于导航路线,管理依赖和状态,使用尽可能少的依赖,高度解耦。Get将所有高低级别的Flutter API都纳入自身,以确保你在工作中尽可能减少耦合。我们将所有的东西集中在一个包中,以确保你在你的项目中没有任何形式的耦合。这样一来,你就可以只在视图中放置小组件,而让你的团队中负责业务逻辑的那部分人自由地工作,不需要依赖视图中的任何元素来处理业务逻辑。这样就提供了一个更加干净的工作环境,这样你的团队中的一部分人只用widget工作,而不用担心将数据发送到你的controller,你的团队中的一部分人只用业务逻辑工作,而不依赖于视图的任何元素。 | ||
576 | + | ||
577 | +所以为了简化这个问题。 | ||
578 | +你不需要在initState中调用方法,然后通过参数发送给你的控制器,也不需要使用你的控制器构造函数,你有onInit()方法,在合适的时间被调用,以启动你的服务。 | ||
579 | +你不需要调用设备,你有onClose()方法,它将在确切的时刻被调用,当你的控制器不再需要时,将从内存中删除。这样一来,只给widget留下视图,不要从中进行任何形式的业务逻辑。 | ||
580 | + | ||
581 | +不要在GetxController里面调用dispose方法,它不会有任何作用,记住控制器不是Widget,你不应该 "dispose "它,它会被Get自动智能地从内存中删除。如果你在上面使用了任何流,想关闭它,只要把它插入到close方法中就可以了。例如 | ||
582 | + | ||
583 | +```dart | ||
584 | +class Controller extends GetxController { | ||
585 | + StreamController<User> user = StreamController<User>(); | ||
586 | + StreamController<String> name = StreamController<String>(); | ||
587 | + | ||
588 | + ///关闭流用onClose方法,而不是dispose | ||
589 | + @override | ||
590 | + void onClose() { | ||
591 | + user.close(); | ||
592 | + name.close(); | ||
593 | + super.onClose(); | ||
594 | + } | ||
595 | +} | ||
596 | +``` | ||
597 | + | ||
598 | +控制器的生命周期。 | ||
599 | + | ||
600 | +- onInit()是创建控制器的地方。 | ||
601 | +- onClose(),关闭控制器,为删除方法做准备。 | ||
602 | +- deleted: 你不能访问这个API,因为它实际上是将控制器从内存中删除。它真的被删除了,不留任何痕迹。 | ||
603 | + | ||
604 | +### 其他使用方法 | ||
605 | + | ||
606 | +你可以直接在GetBuilder值上使用Controller实例。 | ||
607 | + | ||
608 | +```dart | ||
609 | +GetBuilder<Controller>( | ||
610 | + init: Controller(), | ||
611 | + builder: (value) => Text( | ||
612 | + '${value.counter}', //here | ||
613 | + ), | ||
614 | +), | ||
615 | +``` | ||
616 | + | ||
617 | +你可能还需要在GetBuilder之外的控制器实例,你可以使用这些方法来实现。 | ||
618 | + | ||
619 | +```dart | ||
620 | +class Controller extends GetxController { | ||
621 | + static Controller get to => Get.find(); | ||
622 | +[...] | ||
623 | +} | ||
624 | +//view | ||
625 | +GetBuilder<Controller>( | ||
626 | + init: Controller(), // 每个控制器只用一次 | ||
627 | + builder: (_) => Text( | ||
628 | + '${Controller.to.counter}', //here | ||
629 | + ) | ||
630 | +), | ||
631 | +``` | ||
632 | + | ||
633 | +或者 | ||
634 | + | ||
635 | +```dart | ||
636 | +class Controller extends GetxController { | ||
637 | + // static Controller get to => Get.find(); // with no static get | ||
638 | +[...] | ||
639 | +} | ||
640 | +// on stateful/stateless class | ||
641 | +GetBuilder<Controller>( | ||
642 | + init: Controller(), // 每个控制器只用一次 | ||
643 | + builder: (_) => Text( | ||
644 | + '${Get.find<Controller>().counter}', //here | ||
645 | + ), | ||
646 | +), | ||
647 | +``` | ||
648 | + | ||
649 | +- 你可以使用 "非规范 "的方法来做这件事。如果你正在使用一些其他的依赖管理器,比如get_it、modular等,并且只想交付控制器实例,你可以这样做。 | ||
650 | + | ||
651 | +```dart | ||
652 | +Controller controller = Controller(); | ||
653 | +[...] | ||
654 | +GetBuilder<Controller>( | ||
655 | + init: controller, //here | ||
656 | + builder: (_) => Text( | ||
657 | + '${controller.counter}', // here | ||
658 | + ), | ||
659 | +), | ||
660 | + | ||
661 | +``` | ||
662 | + | ||
663 | +### 唯一的ID | ||
664 | + | ||
665 | +如果你想用GetBuilder完善一个widget的更新控件,你可以给它们分配唯一的ID。 | ||
666 | + | ||
667 | +```dart | ||
668 | +GetBuilder<Controller>( | ||
669 | + id: 'text' 、、这里 | ||
670 | + init: Controller(), // 每个控制器只用一次 | ||
671 | + builder: (_) => Text( | ||
672 | + '${Get.find<Controller>().counter}', //here | ||
673 | + ), | ||
674 | +), | ||
675 | +``` | ||
676 | + | ||
677 | +并更新它: | ||
678 | + | ||
679 | +```dart | ||
680 | +update(['text']); | ||
681 | +``` | ||
682 | + | ||
683 | +您还可以为更新设置条件。 | ||
684 | + | ||
685 | +```dart | ||
686 | +update(['text'], counter < 10); | ||
687 | +``` | ||
688 | + | ||
689 | +GetX会自动进行重建,并且只重建使用被更改的变量的小组件,如果您将一个变量更改为与之前相同的变量,并且不意味着状态的更改,GetX不会重建小组件以节省内存和CPU周期(界面上正在显示3,而您再次将变量更改为3。在大多数状态管理器中,这将导致一个新的重建,但在GetX中,如果事实上他的状态已经改变,那么widget将只被再次重建) | ||
690 | + | ||
691 | +## 与其他状态管理器混用 | ||
692 | + | ||
693 | +有人开了一个功能请求,因为他们只想使用一种类型的响应式变量,而其他的则手动去更新,需要为此在GetBuilder中插入一个Obx。思来想去,MixinBuilder应运而生。它既可以通过改变".obs "变量进行响应式改变,也可以通过update()进行手动更新。然而,在4个widget中,他是消耗资源最多的一个,因为除了有一个Subscription来接收来自他的子代的变化事件外,他还订阅了他的控制器的update方法。 | ||
694 | + | ||
695 | +扩展GetxController是很重要的,因为它们有生命周期,可以在它们的onInit()和onClose()方法中 "开始 "和 "结束 "事件。你可以使用任何类来实现这一点,但我强烈建议你使用GetxController类来放置你的变量,无论它们是否是可观察的。 | ||
696 | + | ||
697 | + | ||
698 | +## GetBuilder vs GetX vs Obx vs MixinBuilder | ||
699 | + | ||
700 | +在十年的编程工作中,我能够学到一些宝贵的经验。 | ||
701 | + | ||
702 | +我第一次接触到响应式编程的时候,是那么的 "哇,这太不可思议了",事实上响应式编程是不可思议的。 | ||
703 | +但是,它并不适合所有情况。通常情况下,你需要的是同时改变2、3个widget的状态,或者是短暂的状态变化,这种情况下,响应式编程不是不好,而是不适合。 | ||
704 | + | ||
705 | +响应式编程对RAM的消耗比较大,可以通过单独的工作流来弥补,这样可以保证只有一个widget被重建,而且是在必要的时候,但是创建一个有80个对象的List,每个对象都有几个流,这不是一个好的想法。打开dart inspect,查看一个StreamBuilder的消耗量,你就会明白我想告诉你什么。 | ||
706 | + | ||
707 | +考虑到这一点,我创建了简单的状态管理器。它很简单,这正是你应该对它提出的要求:以一种简单的方式,并且以最高效的方式更新块中的状态。 | ||
708 | + | ||
709 | +GetBuilder在RAM中是非常高效的,几乎没有比他更高效的方法(至少我无法想象,如果存在,请告诉我们)。 | ||
710 | + | ||
711 | +然而,GetBuilder仍然是一个手动的状态管理器,你需要调用update(),就像你需要调用Provider的notifyListeners()一样。 | ||
712 | + | ||
713 | +还有一些情况下,响应式编程真的很有趣,不使用它就等于重新发明轮子。考虑到这一点,GetX的创建是为了提供状态管理器中最现代和先进的一切。它只在必要的时候更新必要的东西,如果你出现了错误,同时发送了300个状态变化,GetX只在状态真正发生变化时才会过滤并更新界面。 | ||
714 | + | ||
715 | +GetX比其他响应式状态管理器还是比较高效的,但它比GetBuilder多消耗一点内存。思前想后,以最大限度地消耗资源为目标,Obx应运而生。与GetX和GetBuilder不同的是,你将无法在Obx内部初始化一个控制器,它只是一个带有StreamSubscription的Widget,接收来自你的子代的变化事件,仅此而已。它比GetX更高效,但输给了GetBuilder,这是意料之中的,因为它是响应式的,而且GetBuilder有最简单的方法,即存储widget的hashcode和它的StateSetter。使用Obx,你不需要写你的控制器类型,你可以从多个不同的控制器中监听到变化,但它需要在之前进行初始化,或者使用本readme开头的示例方法,或者使用Bindings类。 |
-
Please register or login to post a comment