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，即，不仅捕获屏幕上不可见的内容，还捕获可滚动的内容。或者，如果整个小部件太大而无法容纳图片，则可以将其捕获为多张图像。

Answer 1

这让我很好奇是否可行，因此我做了一个快速的模型来证明它确实有效。但是请注意，这样做实际上是在故意破坏flutter进行优化的工作，因此，您确实不应在绝对必要的地方使用它。

无论如何，这是代码：

dfa['gid'] = dfa.groupby('A').cumcount()
dfb['gid'] = dfb.sort_values('F', ascending=False).groupby('A').cumcount()
dfa.merge(dfb, on=['A', 'gid'], how='left')

它的作用是制作一个滚动视图以封装列表（列），并确保repaintBoundary在列周围。使用您的代码使用列表时，因为列表本质上是一个repaintBoundary，所以它不可能捕获所有子项。

尤其要注意'overRepaintKey'和OverRepaintBoundary。通过遍历渲染子代，您可能可以不使用它而逃脱，但这使它变得容易得多。

Answer 2

我使用以下软件包实现了此问题的解决方案：Screenshot，该软件包拍摄了整个小部件的屏幕截图。很简单，只需按照PubDev或GitHub上的步骤操作，即可使其正常工作。

OBS：要获取窗口小部件的完整屏幕快照，请确保您的窗口小部件可以完全滚动，而不仅仅是其中一部分。

（在我的情况下，我在一个Container内有一个ListView，并且该程序包不包含所有ListView的屏幕快照，因为我对此有很多标签，所以我将我的Container包装在SingleChildScrollView中并且可以正常工作！： D）。 Screenshot of my screen

Answer 3

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

SingleChildScrollView(
  child: RepaintBoundary(
     key: _globalKey

   )
)

如何使小部件的屏幕截图在屏幕外颤抖？

3 个答案: