Flutter Toastx 开发思路

1. 思路

1). 原生开发

• Android 使用原生 Toast 对象
• iOS 使用原生创建一个悬浮层添加到窗口上

2). Flutter 开发

• 使用 Overlay 对象添加一个 OverlayEntry 对象实现， 并将其按顺序显示出来

2. 原生开发

1). Android

• 原生 kotlin

先在 onCreate 方法中初始化 Channel, 这里显示吐司是由 Flutter 代码主动调用，因此我们使用 MethodChannel 对象，根据 Flutter 中传递过来的方法名称和参数去显示 Toast , 在 Android 中相对比较容易。

/**
 * Flutter 向 Native 主动调用 MethodChannel
 * Native 向 Flutter 发送事件 EventChannel
 */
class MainActivity: FlutterActivity() {
  companion object {
    /** Toast标识 */
    private const val TOAST = "com.mazaiting/toast"
  }
  
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    GeneratedPluginRegistrant.registerWith(this)
    initChannel()
  }
  
  /**
   * 初始化 Channel
   */
  private fun initChannel() {
    initToastChannel()
  }
  
  /**
   * Toast工具类
   */
  private fun initToastChannel() {
    // Toast 显示
    MethodChannel(flutterView, TOAST).setMethodCallHandler { methodCall, result ->
      println(methodCall.arguments)
      when(methodCall.method) {
        "showToast" -> {
          Toast.makeText(this, methodCall.argument<String>("msg"), Toast.LENGTH_SHORT).show()
          result.success("success")
        }
        else -> {
          // 未实现
          result.notImplemented()
        }
      }
    }
  }

2). iOS

• 先创建一个 UILabel, 设置它的字体大小，颜色，内容，居中，再创建一个 UIView , 设置它的背景，圆角，并将 UILabel 添加到其中，最后创建 UIWindow对象，将 UIView 添加到 UIWindow 中，最后将 UIWindow 对象添加在UIApplication.shared.windows， 源码如下。

//
//  Toast.swift
//  Runner
//
//  Created by 麻再挺 on 2019/3/25.
//  Copyright © 2019 The Chromium Authors. All rights reserved.
//

import UIKit

// 弹窗
class ToastView: NSObject {
    
    // 单例
    static let instance: ToastView = ToastView()
    // 获取窗口对象
    var windows = UIApplication.shared.windows
    // 键盘视图
    let rv = UIApplication.shared.keyWindow?.subviews.first as UIView!
    // 获取屏幕宽高
    let windowFrame = UIScreen.main.bounds
    // 显示弹窗
    // @param content 显示内容
    // @param duration 显示时长， 默认为1.5s
    func showToast(content: String, duration: CFTimeInterval = 1.5) {
        // 清除所有弹窗
        clear()
        // 创建 Toast 视图
        let contentView = UILabel(frame: CGRect(x: 0, y: 0, width: 300, height: 50))
        // 设置字体大小
        contentView.font = UIFont.systemFont(ofSize: 13)
        // 设置字体颜色
        contentView.textColor = UIColor.white
        // 设置内容
        contentView.text = content
        // 设置对齐方式
        contentView.textAlignment = NSTextAlignment.center
        
        // 创建 Toast 父布局
        let containerView = UIView()
        // 设置圆角
        containerView.layer.cornerRadius = 10
        // 设置背景颜色
        containerView.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.7)
        
        // 将 Toast 视图 添加到 Toast 父布局中
        containerView.addSubview(contentView)
        
        let frame = CGRect(x: 0, y: 0, width: 300, height: 50)
        let window = UIWindow()
        window.backgroundColor = UIColor.clear
        window.frame = frame
        containerView.frame = frame
        window.windowLevel = UIWindowLevelAlert
        window.center = CGPoint(x: windowFrame.maxX * 0.5, y: windowFrame.maxY * 0.8)
//        window.center = CGPoint(x: rv?.center.x, y: rv?.center.y * 16 / 10)
        window.isHidden = false
        window.addSubview(containerView)
        
        windows.append(window)
        
        containerView.layer.add(AnimationUtil.getToastAnimation(duration: duration), forKey: "animation")
        
        
//        perform(#selector(removeToast(_:)), with: window, afterDelay: duration)
        
        DispatchQueue.main.asyncAfter(deadline: .now() + duration, execute:{
            self.removeToast(sender: window)
        })
    }
    
    // 移除当前所有弹窗
    func removeToast(sender: AnyObject) {
        if let window = sender as? UIWindow {
            if let index = windows.firstIndex(of: window) {
                // 移除对应 window
                windows.remove(at: index)
            }
        } else {
            print("can not find the window")
        }
    }
    
    // 清除所有弹窗
    func clear() {
        // 取消之前的所有请求
        NSObject.cancelPreviousPerformRequests(withTarget: self)
        // 移除全部
        windows.removeAll(keepingCapacity: false)
    }
}

其中 AnimationUtil 工具类代码如下：

//
//  AnimationUtil.swift
//  Runner
//
//  Created by 麻再挺 on 2019/3/26.
//  Copyright © 2019 The Chromium Authors. All rights reserved.
//

import Foundation

// 动画工具类
class AnimationUtil {
    // 弹窗动画
    // @param duration 显示时长， 默认值为1.5s
    // @return 动画
    static func getToastAnimation(duration: CFTimeInterval = 1.5) -> CAAnimation {
        // 大小变化动画
        let scaleAnimation = CAKeyframeAnimation(keyPath: "transform.scale")
        // 设置时间
        scaleAnimation.keyTimes = [0, 0.1, 0.9, 1]
        // 设置值
        scaleAnimation.values = [0.5, 1, 1, 0.5]
        // 设置显示时间
        scaleAnimation.duration = duration
        
        // 透明度变化动画
        let opacityAnimation = CAKeyframeAnimation(keyPath: "opacity")
        // 设置时间
        opacityAnimation.keyTimes = [0, 0.8, 1]
        // 设置值
        opacityAnimation.values = [0.5, 1, 0]
        // 设置显示时长
        opacityAnimation.duration = duration
        
        // 组动画
        let animation = CAAnimationGroup()
        // 设置动画组
        animation.animations = [scaleAnimation, opacityAnimation]
        // 动画过渡效果
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
        // 设置时间
        animation.duration = duration
        // 设置重复次数
        animation.repeatCount = 0
        // 设置完成后移除
        animation.isRemovedOnCompletion = false
        return animation
    }
}

3). Flutter 端代码

import 'package:flutter/services.dart';

class Toast {
  // 获取原生Toast
  static const TOAST = const MethodChannel("com.mazaiting/toast");

  /// 显示 Toast
  /// @param msg 显示信息
  static Future<void> show(msg) async {
    try {
      final String result = await TOAST.invokeMethod('showToast', {'msg': msg});
      print("Android_Toast: " + result);
    } on PlatformException catch (e) {
      print("Android_Toast: " + e.message);
    }
  }
}

3. Overlay 添加 OverlayEntry 方法

1). 创建一个 OverlayEntry 实体对象

//创建一个OverlayEntry对象
    OverlayEntry overlayEntry = OverlayEntry(builder: (context) {
      //外层使用Positioned进行定位，控制在Overlay中的位置
      return new Positioned(
          top: MediaQuery.of(context).size.height * 0.8, // 设置距离顶部80%
          child: new Material(
            type: MaterialType.transparency, // 设置透明
            child: new Container(
              width: MediaQuery.of(context).size.width, // 设置宽度
              alignment: Alignment.center, // 设置居中
              child: new Center(
                child: Container(
                  constraints: BoxConstraints(
                      maxWidth: MediaQuery.of(context).size.width *
                          0.8), // 设置约束，最大宽度为屏幕宽的80%
                  child: new Card(
                    child: new Padding(
                      padding: EdgeInsets.all(10),
                      child: new Text(message),
                    ),
                    color: Colors.grey,
                    shape: RoundedRectangleBorder(
                        borderRadius:
                            BorderRadius.all(Radius.circular(10))), // 设置圆角
                  ),
                ),
              ),
            ),
          ));
    });

2). 添加到 Overlay 中

    //往Overlay中插入插入OverlayEntry
    Overlay.of(context).insert(overlayEntry);

3). 延时后移除

    //两秒后，移除Toast
    new Future.delayed(Duration(seconds: 2)).then((value) {
      // 移除
      overlayEntry.remove();
    });

4). 定义一个静态列表，将每次创建好的 OverlayEntry 对象添加到静态表中，使用递归方法，每次移除一个 OverlayEntry 后，插入静态列表的第一个元素，并显示延时关闭。

Toastx_Gitee

Toastx_Github