• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

Flutter 截长图并保存

武飞扬头像
shengy
帮助2

日常开发中我们有时候会碰到需要截超过屏幕长度的图片,超过一屏的内容这时候我们会想到内容肯定是可滑动的,这时候我们可能会想到ListView或者SingleChildScrollView等可滑动的组件。

注意:我们在使用截图功能的时候,因为需要将屏幕外的内容放在截图范围内,所以这时候我们就不能用build函数去构造实例;

并且RepaintBoundary组件必须和需要截图的组件紧挨着;

直接上代码

final GlobalKey _boundaryKey = GlobalKey();

SingleChildScrollView(
  child: RepaintBoundary(
    key: _boundaryKey,
    child: Column(
      children: List.generate(
        msgs.length,
        (index) => _createItem(),
      ).toList(),
    ),
  ),
),
onScreenshot(){
   RenderRepaintBoundary? boundary = _boundaryKey.currentContext!
        .findRenderObject() as RenderRepaintBoundary?;
    double dpr = window.devicePixelRatio; // 获取当前设备的像素比
    //通过boundary生成图片
    var image = await boundary!.toImage(pixelRatio: dpr);
     // 将image转化成byte
    ByteData? byteData = await image.toByteData(format: ImageByteFormat.png);
    Uint8List pngBytes = byteData!.buffer.asUint8List();
    //通过image_gallery_saver插件截图
    var reslut = await ImageGallerySaver.saveImage(pngBytes, name: '截图');
}

SingleChildScrollView也可以换成ListView,但是构造函数必须用children;

至此整个截长图保存到本地的功能已完成。

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhgbcfbi
系列文章
更多 icon
同类精品
更多 icon
继续加载