Flutter 混合开发实战问题记录（四）：编译运行时问题解决方案

Flutter 混合开发实战问题记录（四）：编译运行时问题汇总

作为一款 UI 框架，Flutter 的使用原则似乎是：只要实现不复杂，原生非不可替代的控件都应该使用 Flutter 来实现。不过，为了保持与原生界面的协调性，toast 这个元素还是使用原生吧。

不过，我遇到一个小问题：有的界面可能需要快速频繁地提示 toast，而且原生代码中使用的 toast 是自带队列的。这意味着如果 toast 显示得太快，后一个 toast 会把前一个顶掉，从而导致无法看到所有提示信息。

解决方案

为解决这个问题，我们可以创建一个 toast 队列，并在其中存储要显示的 toast。当需要显示 toast 时，我们将它添加到队列中。队列中的第一个 toast 会立即显示，后续的 toast 会在当前 toast 消失后依次显示。

实现此功能，我们需要使用 StreamController 来管理队列。StreamController 可以让我们创建数据流，并通过监听此流来接收数据。

第一步：创建 toast 队列

import 'dart:async';
import 'package:flutter/material.dart';

class ToastQueue {
  final StreamController<String> _controller = StreamController<String>();

  Stream<String> get toastStream => _controller.stream;

  void add(String toast) {
    _controller.add(toast);
  }

  void dispose() {
    _controller.close();
  }
}

第二步：在 initState 方法中初始化队列

@override
void initState() {
  super.initState();
  toastQueue = ToastQueue();
}

第三步：在需要显示 toast 时将其添加到队列中

void showToast(String toast) {
  toastQueue.add(toast);
}

第四步：监听队列中的 toast 并显示它们

@override
void dispose() {
  super.dispose();
  toastQueue.dispose();
}

通过使用此队列，我们可以确保所有 toast 都会按顺序显示，不会被后续的 toast 顶掉。

扩展

除了解决快速频繁显示 toast 的问题外，此方法还有以下优点：

• 代码复用性高： 我们可以将此队列类提取为一个单独的包，在其他项目中重用。
• 易于维护： 此方法将 toast 显示逻辑与具体实现分离开来，使得代码更易于维护和扩展。
• 可定制性： 我们可以自定义 toast 的显示位置、持续时间和外观，以满足不同的项目需求。

希望这个解决方案对你有帮助。如果你在 Flutter 混合开发中遇到其他问题，欢迎随时提出。