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

阳光穿透心脏的1/2处 2022-12-22 04:43 133阅读 0赞

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

![ebbf2bc4642241918e2bb8be1aff4b85.webp][]

IMG\_B955B557304E-1.jpeg

下面我们就用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时，就会像下面一样弹出窗口。

![1cbbeb6aa8016a621877d3bb8886728d.webp][]

IMG\_3DEAAD8252F7-1.jpeg

作者：何小有  
链接：https://www.jianshu.com/p/2eef7d735c02  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[ebbf2bc4642241918e2bb8be1aff4b85.webp]: /images/20221120/f23ea132acb14379b81808c41977b74e.png
[1cbbeb6aa8016a621877d3bb8886728d.webp]: /images/20221120/aff7c5a8dbf64751abfcb8cc5154d067.png