Flutter列表视图截图插件listview_screenshot的使用

Flutter列表视图截图插件listview_screenshot的使用

标题

listview_screenshot

内容

flutter全平台针对ListView等滚动视图实现长截图，

• GitHub仓库
• CI测试
• 维护状态
• 主版本号

Getting started

dart pub add listview_screenshot

Usage

• 参考示例代码：列表截图示例
• 关键是 WidgetShotRenderRepaintBoundary.screenshot

final GlobalKey _shotKey = GlobalKey();
final ScrollController _scrollController = ScrollController();

child: WidgetShot(
  key: _shotKey,
  controller: _scrollController,
  child: ListView.builder(
    controller: _scrollController,
    // ...
  ),
),

void onScreenshot() async {
  EasyLoading.show(status: '正在创建截图，请勿操作');
  var context = _shotKey.currentContext!;
  WidgetShotRenderRepaintBoundary repaintBoundary =
      context.findRenderObject() as WidgetShotRenderRepaintBoundary;
  Uint8List pngBytes;
  try {
    pngBytes = await repaintBoundary.screenshotPng( // 或者调用screenshotImage得到image库的Image对象，
      backgroundColor: Colors.white,
      workerName: 'imageMergeTransform', // web异步线程合并要生成对应js文件，否则不传，
      onProcess: (current, total) {
        if (current == 0) {
          EasyLoading.show(status: '正在合并截图，请勿操作');
        } else {
          EasyLoading.showProgress(current / total,
              status: '正在创建截图，请勿操作, $current/$total');
        }
      },
    );
  } catch (e) {
    EasyLoading.dismiss();
    EasyLoading.showError('生成截图失败: ${e.toString()}');
    return;
  }
  EasyLoading.show(status: '正在保存长截图...');
  // ... save pngBytes to png file,
}

• web异步线程合并支持
  • 下载到flutter项目web目录下，使用如下代码编译出js文件。
  • 生成的js文件名填写到screenshot方法参数workerName，同时生成的js.deps和js.map文件仅调试使用，不必须。

dart compile js imageMergeTransform.dart -o imageMergeTransform.js -O4

• html渲染模式无法截图
  • 默认手机浏览器访问就是html渲染模式，可以在index.html设置指定强制使用canvaskit模式。

onEntrypointLoaded: function(engineInitializer) {
  engineInitializer.initializeEngine({
    renderer: "canvaskit",
  }).then(function(appRunner) {
    appRunner.runApp();
  });
}

TODO

• 可能出现一像素空隙。

示例代码

import 'package:flutter/material.dart';

import 'package:intl/intl.dart';
import 'package:logging/logging.dart';

import 'src/app.dart';
import 'src/settings/settings_controller.dart';
import 'src/settings/settings_service.dart';

void main() async {
  final format = DateFormat('HH:mm:ss');
  // 配置日志用于调试
  Logger.root.level = Level.ALL;
  Logger.root.onRecord.listen((record) {
    if (record.loggerName != 'listview_screenshot') {
      return;
    }
    debugPrint('${format.format(record.time)}: ${record.loggerName}: ${record.level.name} ${record.message}');
  });

  // 设置用户偏好主题控制器，将用户设置与多个Flutter组件绑定
  final settingsController = SettingsController(SettingsService());

  // 在启动屏幕加载用户偏好主题，防止初次显示时突然主题变化
  await settingsController.loadSettings();

  // 运行应用并传递设置控制器。 应用监听设置控制器的变化，然后将其传递给设置视图
  runApp(MyApp(settingsController: settingsController));
}

class MyApp extends StatelessWidget {
  final SettingsController settingsController;

  MyApp({required this.settingsController});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey _shotKey = GlobalKey();
  final ScrollController _scrollController = ScrollController();

  void onScreenshot() async {
    EasyLoading.show(status: '正在创建截图，请勿操作');
    var context = _shotKey.currentContext!;
    WidgetShotRenderRepaintBoundary repaintBoundary =
        context.findRenderObject() as WidgetShotRenderRepaintBoundary;
    Uint8List pngBytes;
    try {
      pngBytes = await repaintBoundary.screenshotPng( // 或者调用screenshotImage得到image库的Image对象，
        backgroundColor: Colors.white,
        workerName: 'imageMergeTransform', // web异步线程合并要生成对应js文件，否则不传，
        onProcess: (current, total) {
          if (current == 0) {
            EasyLoading.show(status: '正在合并截图，请勿操作');
          } else {
            EasyLoading.showProgress(current / total,
                status: '正在创建截图，请勿操作, $current/$total');
          }
        },
      );
    } catch (e) {
      EasyLoading.dismiss();
      EasyLoading.showError('生成截图失败: ${e.toString()}');
      return;
    }
    EasyLoading.show(status: '正在保存长截图...');
    // ... save pngBytes to png file,
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Listview Screenshot'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              controller: _scrollController,
              itemCount: 1,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text('Item $index'),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}