Flutter GetX Tag 属性使用详解
Flutter GetX Tag 属性使用详解
了解 Flutter GetX Tag 属性的定义、用途、实现方式和常见问题。
前言
Flutter中，GetX是一款非常流行的状态管理库。它不仅提供了状态管理的功能，还有路由、依赖注入和许多其他功能。在这篇文章中，我将介绍如何在Flutter中正确使用GetX的标签（Tag）功能。
很多同学在问我 Getx 问题的时候，我发现都对 tag 属性不清楚，今天我们就来讲一讲。
视频
https://www.bilibili.com/video/BV1eP411R7ft/
知识点
在 Flutter GetX 中，tag 属性是用于标识控制器（Controller）实例的字符串，具体作用如下：
区分不同的控制器实例
在一个 Flutter GetX 应用程序中，可能会存在多个相同类型的控制器实例，例如多个页面使用相同的数据控制器。使用 tag 属性可以为不同的控制器实例分配不同的标识，以便在不同的页面中使用不同的控制器实例。
保存控制器状态
使用 tag 属性可以为控制器实例分配唯一的标识，以便在应用程序生命周期中保存控制器的状态。例如，在页面切换时，可以通过 tag 属性保存当前页面的控制器状态，以便在页面重新打开时恢复控制器状态。
避免控制器重复创建
使用 tag 属性可以避免相同类型的控制器实例重复创建。例如，在多个页面中使用相同的数据控制器时，使用相同的 tag 标识可以确保只创建一个控制器实例，以减少资源的消耗。
正文
如果不设置 tag 将使用相同的控制器
控制器
lib/pages/post_detail/controller.dart
import 'package:get/get.dart';
import 'index.dart';
class PostDetailController extends GetxController {
PostDetailController();
int num = 0;
_initData() {
update(["post_detail"]);
}
void onTap() {
num++;
update(["post_detail"]);
}
void onNextPage() {
// 当前时间戳
final int timestamp = DateTime.now().millisecondsSinceEpoch;
Get.to(PostDetailPage(),
routeName: "/post/$timestamp", arguments: {"timestamp": "$timestamp"});
}
@override
void onReady() {
super.onReady();
_initData();
}
}
视图
lib/pages/post_detail/view.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'index.dart';
class PostDetailPage extends GetView<PostDetailController> {
PostDetailPage({Key? key}) : super(key: key);
final String timestamp = Get.arguments?["timestamp"] ??
DateTime.now().millisecondsSinceEpoch.toString();
// 主视图
Widget _buildView() {
return Center(
child: Column(
children: [
Text("计数 num : ${controller.num}"),
ElevatedButton(
onPressed: controller.onTap,
child: const Text("加法计算"),
),
ElevatedButton(
onPressed: controller.onNextPage,
child: const Text("再开一个界面"),
),
],
),
);
}
@override
Widget build(BuildContext context) {
return GetBuilder(
init: PostDetailController(),
id: "post_detail",
builder: (_) {
return Scaffold(
appBar: AppBar(title: Text("post_detail $timestamp")),
body: SafeArea(
child: _buildView(),
),
);
},
);
}
}
加入 tag 属性就能区分不同控制器
控制器
lib/pages/post_detail/controller.dart
import 'package:get/get.dart';
import 'index.dart';
class PostDetailController extends GetxController {
PostDetailController();
int num = 0;
_initData() {
update(["post_detail"]);
}
void onTap() {
num++;
update(["post_detail"]);
}
void onNextPage() {
// 当前时间戳
final int timestamp = DateTime.now().millisecondsSinceEpoch;
Get.to(PostDetailPage(),
routeName: "/post/$timestamp", arguments: {"timestamp": "$timestamp"});
}
@override
void onReady() {
super.onReady();
_initData();
}
}
视图
lib/pages/post_detail/view.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'index.dart';
class PostDetailPage extends GetView<PostDetailController> {
PostDetailPage({Key? key}) : super(key: key);
final String timestamp = Get.arguments?["timestamp"] ??
DateTime.now().millisecondsSinceEpoch.toString();
@override
String? get tag => timestamp;
// 主视图
Widget _buildView() {
return Center(
child: Column(
children: [
Text("计数 num : ${controller.num}"),
ElevatedButton(
onPressed: controller.onTap,
child: const Text("加法计算"),
),
ElevatedButton(
onPressed: controller.onNextPage,
child: const Text("再开一个界面"),
),
],
),
);
}
@override
Widget build(BuildContext context) {
return GetBuilder(
init: PostDetailController(),
tag: timestamp,
id: "post_detail",
builder: (_) {
return Scaffold(
appBar: AppBar(title: Text("post_detail $timestamp")),
body: SafeArea(
child: _buildView(),
),
);
},
);
}
}
代码
https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter_application_getx_tag
小结
在Flutter中使用GetX的标签（Tag）功能可以区分不同的控制器实例、保存控制器状态和避免控制器重复创建。在本文中，猫哥介绍了如何正确使用GetX的标签功能，以及如何在Flutter GetX中使用tag属性来标识控制器实例。
© 猫哥 ducafecat.com
end
本文由 mdnice 多平台发布