Flutter中,GetX是一款非常流行的状态管理库。它不仅提供了状态管理的功能,还有路由、依赖注入和许多其他功能。在这篇文章中,我将介绍如何在Flutter中正确使用GetX的标签(Tag)功能。

Flutter GetX Tag 属性使用详解

了解 Flutter GetX Tag 属性的定义、用途、实现方式和常见问题。

前言

Flutter中,GetX是一款非常流行的状态管理库。它不仅提供了状态管理的功能,还有路由、依赖注入和许多其他功能。在这篇文章中,我将介绍如何在Flutter中正确使用GetX的标签(Tag)功能。

很多同学在问我 Getx 问题的时候,我发现都对 tag 属性不清楚,今天我们就来讲一讲。

知识点

在 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属性来标识控制器实例。


© 猫哥 ducafecat.com

end