在 Flutter 中以编程方式截取任何 Widget

举报
坚果派 发表于 2022/06/07 08:06:27 2022/06/07
【摘要】 在 Flutter 中以编程方式截取任何 Widget有时,我们确实需要从我们的应用程序中捕获特定的东西,但是我们不知道如何在不使用任何外部包的情况下通过几个步骤来完成它,这就是我在这里讨论当单击一次截取您的Flutter小部件的原因。将小部件转换为图像字节的步骤首先,您需要创建一个与您希望转换为图像的小部件相关联的全局键,并且您必须使用RepaintBoundary小部件包装您的小部件。 ...

在 Flutter 中以编程方式截取任何 Widget

有时,我们确实需要从我们的应用程序中捕获特定的东西,但是我们不知道如何在不使用任何外部包的情况下通过几个步骤来完成它,这就是我在这里讨论当单击一次截取您的Flutter小部件的原因。

将小部件转换为图像字节的步骤

首先,您需要创建一个与您希望转换为图像的小部件相关联的全局键,并且您必须使用RepaintBoundary小部件包装您的小部件。 正如您在给定图像中看到的那样,我将全局键初始化为ssKey并将其分配给我的特定容器的 RepaintBoundary。

img

现在,我们将创建一个方法并转到为我们生成图像的步骤。我们走吧!

截图方法

1 — 初始化RenderRepaintBoundary类型的变量,该变量将保存我们的关键部件的渲染对象,别名与数据类型相同。 2 — 现在,我们将使用toImage方法将重绘边界转换为图像对象。此方法有一个pixelRatio参数,该参数包含默认值 1.0,但您可以增加该值以获得高分辨率、清晰和锐利的图像,如您在代码片段中看到的那样。 3 — 在这一步中,我们将通过调用toByteData方法提取图像对象的字节数据。您可以使用 format 参数更改字节格式,就像我使用 png 格式一样。 4——最后,我们可以通过转换Uint8List形式的字节缓冲区找到图像内存数据。

img

终于您可以轻松地使用 Image.memory 或 MemoryImage 中的 Uint8List 值来展示您的屏幕截图。





【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。