如何在Flutter中截取屏幕之外的小部件？

Question

我正在使用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，即不仅捕获屏幕上不可见的内容，而且还包括可滚动的内容。或者，如果整个小部件太大无法容纳在一张图片中，它可以被捕获成多个图片。

- Keshav

---

我认为使用当前的ListView实现不可能做到这一点。ListView在幕后进行了大量优化，因此仅绘制当前屏幕上的对象，而不是绘制整个列表，这将浪费大量资源并可能导致帧率下降。我不确定它是否有效，但如果您确实需要这样做，可以尝试使用SingleChildScrollView、RepaintBoundary和Column，因为这可能会真正绘制出整个列表...但我仍然不确定它是否有效。 - rmtmckenzie

是的，rmtmckenzie，“SingleChildScrollView(child: RepaintBoundary(child: Column(...),),),”确实会绘制整个列表。 - Zvi Karp

Answer 1

我使用了这个包：Screenshot，通过对整个小部件进行截图来解决这个问题。很容易上手，可以按照 PubDev 或 GitHub 上的步骤操作即可。

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

（在我的情况下，我在一个 Container 内部有一个 ListView，由于其中有许多项，该软件包不会截取所有 ListView 的屏幕截图，所以我将我的 Container 包装在一个 SingleChildScrollView 中，并在 ListView 中添加 NeverScrollableScrollPhysics 物理引擎，这样就行了！ :D）。 我的屏幕截图

此问题的更多详细信息

- gvNN

---

有没有办法仅捕获ListView中的一个项目而不是整个ListView的屏幕截图？ - Arpit

@Arpit 是的，但你可以稍微改变这里提到的逻辑。 例如，如果你想要在列表中截取一个卡片的屏幕截图，你可以在每个列表项中添加小部件，并添加一些逻辑来控制哪个卡片将被截取。但我认为从性能方面考虑，这不是最好的选择。 - gvNN

能否使用这个大截图创建多页PDF文件？ - djalmafreestyler

@djalmafreestyler 这是一个好问题，我以前没有尝试过。 - gvNN

我该如何使用CustomScrollView和SliverList作为子组件来实现这个功能？ - Mohit Arora

Answer 2

这使我很好奇是否有可能，所以我做了一个快速的模型展示它是有效的。但请注意，通过这样做，您基本上是故意破坏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

---

嘿@rmtmckenzie，我在寻找解决我的问题（在此处描述）的过程中发现了你的答案，并希望你能给我一些提示..? :) ListView的每个子项似乎都是它自己的RepaintBoundary - 这可能是正确的吗？我正在尝试对Listview.builder的某些子项进行imagefilter.blur“togeter”... - user3249027

Answer 3

有一种简单的方法，您需要将 SingleChildScrollView 小部件包装到RepaintBoundary中。只需使用SingleChildScrollView包装您的可滚动小部件（或其父级）。

SingleChildScrollView(
  child: RepaintBoundary(
     key: _globalKey

   )
)

- WU_C

---

我认为这是最简单和最有效的方法。 - Zero