如何在颤动中截取屏幕之外的小部件屏幕截图？

Posted 2023-02-23

【中文标题】如何在颤动中截取屏幕之外的小部件屏幕截图？

【英文标题】：How to take screenshot of widget beyond the screen in flutter?

【发布时间】：2019-12-26 06:43:49

【问题描述】：

我正在使用 RepaintBoundary 截取当前小部件的屏幕截图，它是一个 listView。但它只捕获当时在屏幕上可见的内容。

RepaintBoundary(
                key: src,
                child: ListView(padding: EdgeInsets.only(left: 10.0),
                  scrollDirection: Axis.horizontal,
                  children: <Widget>[
                    Align(
                        alignment: Alignment(-0.8, -0.2),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: listLabel(orientation),
                        )
                    ),

                    Padding(padding: EdgeInsets.all(5.0)),

                    Align(
                        alignment: FractionalOffset(0.3, 0.5),
                        child: Container(
                            height: orientation == Orientation.portrait? 430.0: 430.0*0.7,
                            decoration: BoxDecoration(
                                border: Border(left: BorderSide(color: Colors.black))
                            ),
                            //width: 300.0,
                            child:
                            Wrap(
                              direction: Axis.vertical,
                              //runSpacing: 10.0,
                              children: colWidget(orientation),
                            )
                        )
                    ),
                    Padding(padding: EdgeInsets.all(5.0)),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: listLabel(orientation),
                    )
                  ],
                ),
              );

截图功能：

Future screenshot() async 
    RenderRepaintBoundary boundary = src.currentContext.findRenderObject();
    ui.Image image = await boundary.toImage();
    ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    Uint8List pngBytes = byteData.buffer.asUint8List();
    print(pngBytes);
    final directory = (await getExternalStorageDirectory()).path;
File imgFile =new File('$directory/layout2.pdf');
imgFile.writeAsBytes(pngBytes);
  

有什么办法可以让我捕获整个listView，即不仅可以捕获屏幕上不可见的内容，还可以捕获可滚动的内容。或者，如果整个小部件太大而无法放入图片中，则可以将其捕获到多个图像中。

【问题讨论】：

我认为当前的 ListView 实现不可能做到这一点。 ListView 在后台进行了大量优化，使其仅绘制当前在屏幕上的对象，因为绘制整个列表会浪费大量资源并可能导致丢帧。我不确定它是否会起作用，但如果你真的需要这样做，你可以尝试使用带有 RepaintBoundary 和 Column 的SingleChildScrollView，因为这实际上可能会绘制出整个列表......但我仍然不确定会不会。

是的 rmtmckenzie，SingleChildScrollView(child: RepaintBoundary(child: Column(...),),), 确实绘制了整个列表。

【参考方案1】：

这让我很好奇这是否可行，所以我做了一个快速的模型来证明它确实有效。但请注意，这样做实际上是在有意破坏 Flutter 为优化而做的事情，所以你真的不应该在绝对必须的地方使用它。

不管怎样，代码如下：

import 'dart:math';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

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

class UiImagePainter extends CustomPainter 
  final ui.Image image;

  UiImagePainter(this.image);

  @override
  void paint(ui.Canvas canvas, ui.Size size) 
    // simple aspect fit for the image
    var hr = size.height / image.height;
    var wr = size.width / image.width;

    double ratio;
    double translateX;
    double translateY;
    if (hr < wr) 
      ratio = hr;
      translateX = (size.width - (ratio * image.width)) / 2;
      translateY = 0.0;
     else 
      ratio = wr;
      translateX = 0.0;
      translateY = (size.height - (ratio * image.height)) / 2;
    

    canvas.translate(translateX, translateY);
    canvas.scale(ratio, ratio);
    canvas.drawImage(image, new Offset(0.0, 0.0), new Paint());
  

  @override
  bool shouldRepaint(UiImagePainter other) 
    return other.image != image;
  


class UiImageDrawer extends StatelessWidget 
  final ui.Image image;

  const UiImageDrawer(Key key, this.image) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return CustomPaint(
      size: Size.infinite,
      painter: UiImagePainter(image),
    );
  


class MyApp extends StatefulWidget 
  @override
  _MyAppState createState() => _MyAppState();


class _MyAppState extends State<MyApp> 
  GlobalKey<OverRepaintBoundaryState> globalKey = GlobalKey();

  ui.Image image;

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: image == null
            ? Capturer(
                overRepaintKey: globalKey,
              )
            : UiImageDrawer(image: image),
        floatingActionButton: image == null
            ? FloatingActionButton(
                child: Icon(Icons.camera),
                onPressed: () async 
                  var renderObject = globalKey.currentContext.findRenderObject();

                  RenderRepaintBoundary boundary = renderObject;
                  ui.Image captureImage = await boundary.toImage();
                  setState(() => image = captureImage);
                ,
              )
            : FloatingActionButton(
                onPressed: () => setState(() => image = null),
                child: Icon(Icons.remove),
              ),
      ),
    );
  


class Capturer extends StatelessWidget 
  static final Random random = Random();

  final GlobalKey<OverRepaintBoundaryState> overRepaintKey;

  const Capturer(Key key, this.overRepaintKey) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return SingleChildScrollView(
      child: OverRepaintBoundary(
        key: overRepaintKey,
        child: RepaintBoundary(
          child: Column(
            children: List.generate(
              30,
              (i) => Container(
                    color: Color.fromRGBO(random.nextInt(256), random.nextInt(256), random.nextInt(256), 1.0),
                    height: 100,
                  ),
            ),
          ),
        ),
      ),
    );
  


class OverRepaintBoundary extends StatefulWidget 
  final Widget child;

  const OverRepaintBoundary(Key key, this.child) : super(key: key);

  @override
  OverRepaintBoundaryState createState() => OverRepaintBoundaryState();


class OverRepaintBoundaryState extends State<OverRepaintBoundary> 
  @override
  Widget build(BuildContext context) 
    return widget.child;
  

它所做的是制作一个封装列表（列）的滚动视图，并确保 repaintBoundary 在列周围。在您使用列表的代码中，它无法捕获所有子项，因为列表本身就是一个 repaintBoundary。

请特别注意“overRepaintKey”和 OverRepaintBoundary。通过迭代渲染子项，您可能可以在不使用它的情况下摆脱它，但这使它变得容易得多。

【讨论】：

嘿@rmtmckenzie，找到了你的答案，同时还在为我的问题寻找解决方案（described here），希望你能给我一个小费..？ :) ListView 的每个孩子似乎都是它自己的 RepaintBoundary - 这是正确的吗？我正在尝试 imagefilter.blur Listview.builder “togeter”的孩子的部分......

【参考方案2】：

我使用这个包解决了这个问题：Screenshot，它截取了整个小部件的屏幕截图。简单易行，按照 PubDev 或 GitHub 上的步骤操作即可。

OBS：要截取小部件的完整屏幕截图，请确保您的小部件是完全可滚动的，而不仅仅是它的一部分。

（在我的情况下，我在容器内有一个 ListView，并且包没有截取所有 ListView 的屏幕截图，因为我上面有很多项目，所以我将我的容器包装在 SingleChildScrollView 中并添加 NeverScrollableScrollPhysics ListView 中的物理，它可以工作！:D)。 Screenshot of my screen

More details in this issue

【讨论】：

非常感谢您最后一分钟的保存。虽然，我并不真正理解 ScrollView 应该是 ScreenShot 小部件的父级，因为在我的情况下它已经是孩子，但 Github 问题帮助了我。

好消息！请，如果您对此有任何问题，请随时在下面发表评论。

有什么办法让它只截取 ListView 的一项而不是完整 ListView 的截图？

@Arpit 是的，但是你可以稍微改变一下这里提到的逻辑。例如，如果您想对列表中的卡片进行截图，您可以在列表中的每个项目中添加小部件，并添加一些逻辑来控制将截图的卡片.. 但我认为就性能而言听起来不是最好的。

可以用这个大屏幕截图创建多页pdf吗？

【参考方案3】：

有一个简单的方法 您需要将 SingleChildScrollView 小部件包装到 RepaintBoundary。只需用 SingleChildScrollView 包装您的 Scrollable 小部件（或他的父亲）

SingleChildScrollView(
  child: RepaintBoundary(
     key: _globalKey

   )
)

【讨论】：

我认为这是最简单有效的方法