Dart 如何在flatter中拍摄屏幕以外的小部件截图?
我正在使用重新绘制边界拍摄当前小部件的屏幕截图,它是一个列表视图。但它只捕获当时在屏幕上可见的内容Dart 如何在flatter中拍摄屏幕以外的小部件截图?,dart,flutter,screenshot,Dart,Flutter,Screenshot,我正在使用重新绘制边界拍摄当前小部件的屏幕截图,它是一个列表视图。但它只捕获当时在屏幕上可见的内容 RepaintBoundary( key: src, child: ListView(padding: EdgeInsets.only(left: 10.0), scrollDirection: Axis.horizontal, children: <Wid
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),
)
],
),
);
是否有任何方法可以捕获整个listView,即不仅捕获屏幕上不可见的内容,还捕获可滚动的内容。或者,如果整个小部件太大,无法放在一张图片中,它可以在多张图片中捕获。这让我好奇这是否可能,所以我制作了一个快速的模型,显示它确实有效。但请注意,这样做实际上是故意破坏了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;
}
}
import'dart:math';
将“dart:ui”导入为ui;
进口“包装:颤振/材料.省道”;
导入“package:flatter/rendering.dart”;
void main()=>runApp(MyApp());
类UiImagePainter扩展了CustomPainter{
最终用户界面。图像;
UiImagePainter(this.image);
@凌驾
虚空绘制(ui.Canvas画布,ui.Size){
//适合图像的简单方面
var hr=size.height/image.height;
var wr=size.width/image.width;
双倍比率;
双translateX;
双重翻译;
如果(hr\u MyAppState();
}
类MyAppState扩展了状态{
GlobalKey GlobalKey=GlobalKey();
ui.图像;
@凌驾
小部件构建(构建上下文){
返回材料PP(
家:脚手架(
appBar:appBar(),
正文:image==null
?捕获者(
过密键:globalKey,
)
:UiImageDrawer(图像:图像),
floatingActionButton:image==null
?浮动操作按钮(
子:图标(图标.摄像机),
onPressed:()异步{
var renderObject=globalKey.currentContext.FindEnderObject();
RenderPaintBoundary=renderObject;
ui.Image captureImage=wait boundary.toImage();
设置状态(()=>image=captureImage);
},
)
:浮动操作按钮(
按下时:()=>setState(()=>image=null),
子:图标(图标。删除),
),
),
);
}
}
类捕获器扩展了无状态小部件{
静态最终随机=随机();
最终GlobalKey OverrepaitKey;
constcapturer({Key-Key,this.overrepaitkey}):super(Key:Key);
@凌驾
小部件构建(构建上下文){
返回SingleChildScrollView(
孩子:越过边界(
钥匙:修理过度钥匙,
子:重新绘制边界(
子:列(
子项:List.generate(
30,
(i) =>容器(
颜色:color.fromRGBO(random.nextInt(256),random.nextInt(256),random.nextInt(256),1.0),
身高:100,
),
),
),
),
),
);
}
}
类覆盖边界扩展StatefulWidget{
最后一个孩子;
const oversepaintboundary({Key-Key,this.child}):super(Key:Key);
@凌驾
OverRepaintBoundaryState createState()=>OverRepaintBoundaryState();
}
类OverRepaintBoundaryState扩展状态{
@凌驾
小部件构建(构建上下文){
返回widget.child;
}
}
它所做的是创建一个封装列表(列)的滚动视图,并确保重新绘制边界位于列的周围。在使用列表的代码中,它无法捕获所有子级,因为列表本身本质上是一个重绘边界
请特别注意“overRepaintKey”和OverRepaintBoundary。通过迭代渲染子对象,您可能不需要使用它,但这使它变得容易得多 我使用这个软件包实现了这个问题的解决方案:,它拍摄了整个小部件的屏幕截图。这很简单,按照PubDev或GitHub上的步骤进行操作,您就可以让它工作了 OBS:要获取小部件的完整屏幕截图,请确保您的小部件是完全可滚动的,而不仅仅是其中的一部分 (在我的例子中,我在一个容器中有一个ListView,而这个包并没有截取所有ListView的屏幕截图,因为它上面有很多iTen,所以我将我的容器包装在一个SingleChildScrollView中,并在ListView中添加NeverScrollableScrollPhysics,它可以工作!:D)。 有一个简单的方法 您需要wrapSingleChildScrollView小部件来重新绘制边界。只需使用SingleChildScrollView包装您的可滚动小部件(或其父亲)
SingleChildScrollView(
子:重新绘制边界(
键:_globalKey
)
)
我认为这在当前的ListView实现中是不可能的。ListView进行了大量的优化,因此它只绘制当前屏幕上的对象,因为绘制整个列表将是一种巨大的资源浪费,并可能导致帧丢失。我不
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;
}
}