listview_screenshot

Description:

listview screenshot

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




Getting started #
dart pub add listview_screenshot
copied to clipboard
Usage #
列表截图示例
核心是 WidgetShotRenderRepaintBoundary.screenshot
final GlobalKey _shotKey = GlobalKey();
final ScrollController _scrollController = ScrollController();
copied to clipboard
child: WidgetShot(
key: _shotKey,
controller: _scrollController,
child: ListView.builder(
controller: _scrollController,
// ...
),
),
copied to clipboard
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,
}
copied to clipboard
web异步线程合并支持，
imageMergeTransform.dart
下载到flutter项目web目录下，使用如下代码编译出js文件，
生成的js文件名填写到screenshot方法参数workerName，
同时生成的js.deps和js.map文件仅调试使用，不必须，
dart compile js imageMergeTransform.dart -o imageMergeTransform.js -O4
copied to clipboard
不过web有个硬伤，html渲染模式无法截图，所以只能使用前加个判断，
否则截图方法会抛异常，
toImage is not supported on the Web
if (!WidgetShot.supported) {
EasyLoading.showError('html渲染模式无法截图');
return;
}
copied to clipboard
默认手机浏览器访问就是html渲染模式，所以可以在index.html设置指定强制使用canvaskit模式，
index.html
onEntrypointLoaded: function(engineInitializer) {
engineInitializer.initializeEngine({
renderer: "canvaskit",
}).then(function(appRunner) {
appRunner.runApp();
});
}
copied to clipboard
TODO #

可能出现一像素空隙，