Flutter代码锦囊---淘口令复制弹窗

对于淘系电商APP或其他类似的APP而言,获取剪贴板上的淘口令,再解析出具体的商品详情,是整个APP的核心业务操作,就像下面图片展示的这样。

Flutter代码锦囊---淘口令复制弹窗_第1张图片

下面我们就用Flutter实现这个功能,首先是前面一部分导入相关引用和常规页面布局代码,直接复制就好了。

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

接下来就是主要代码,我们需要实现组件绑定观察者(WidgetsBindingObserver)抽象类,使用组件(Widgets)图层绑定注册的类的接口,我们会覆盖它的App生命周期状态发生改变(didChangeAppLifecycleState)方法,其返回值类型是应用生命周期状态(AppLifecycleState)类。

应用生命周期状态(AppLifecycleState)类有几个常量,分别是:等待(AppLifecycleState.inactive)、暂停(AppLifecycleState. paused)和恢复(AppLifecycleState. resumed)。

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
  @override
  void initState() {
    // 在当前页面放一个观察者。
    WidgetsBinding.instance.addObserver(this);
    super.initState();
  }

  @override
  void dispose() {
    // 移除当前页面的观察者。
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    // 当App生命周期状态为恢复时。
    if (state == AppLifecycleState.resumed) {
      getClipboardContents();
    }
  }

  /// 使用异步调用获取系统剪贴板的返回值。
  getClipboardContents() async {
    // 访问剪贴板的内容。
    ClipboardData clipboardData = await Clipboard.getData(Clipboard.kTextPlain);
    // 剪贴板不为空时。
    if (clipboardData != null && clipboardData.text.trim() != '') {
      String _name = clipboardData.text.trim();
      // 淘口令的正则表达式,能判断类似“¥123456¥”的文本。
      if (RegExp(r'[\uffe5]+.+[\uffe5]').hasMatch(_name)) {
        // 处理淘口令的业务逻辑。
        showDialog<Null>(
          context: context,
          barrierDismissible: true,
          builder: (BuildContext context) {
            return CupertinoAlertDialog(
              title: Text('淘口令'),
              content: Text(_name),
            );
          },
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo 主页'),
      ),
    );
  }
}

如果把上面两段代码合成一个文件,执行调试,然后把APP放在后台,再复制一段淘口令,然后回到APP时,就会像下面一样弹出窗口。

Flutter代码锦囊---淘口令复制弹窗_第2张图片

你可能感兴趣的:(dart,flutter,Flutter锦囊)