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多平臺釋出

Flutter GetX Tag 屬性使用詳解