关于程序员: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<PostDetailController>(      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<PostDetailController>(      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属性来标识控制器实例。

end

本文由mdnice多平台公布