Flutter截图控件RepaintBoundary案例(一)

原创
08/23 09:30
阅读数 1.5K

记录一下 RepaintBoundary 控件的简单使用。这个控件能帮我们实现截图的功能,你想截哪个控件的图,直接用 RepaintBoundary 把该控件包起来即可。

关键代码

点击截图按钮所做的事:

该代码通过_key 找到想要截图的节点控件,然后转成 Image,在转成 bytes 字节,最后存入缓存文件。

  //截图  void _onCaputrePicture() async {    try {      RenderRepaintBoundary boundary = _key.currentContext.findRenderObject();      double pix = window.devicePixelRatio; // 获取当前设备的像素比      var image = await boundary.toImage(pixelRatio: pix);      ByteData byteData = await image.toByteData(format: ImageByteFormat.png);      Uint8List pngBytes = byteData.buffer.asUint8List();      Directory tempDir =          await getTemporaryDirectory(); //需添加 path_provider: 1.6.11 插件      File file = new File('${tempDir.path}/${_images.length}.png');      print("===》" + file.path);      if (!file.existsSync()) {        file.createSync();      }      file.writeAsBytesSync(pngBytes); //写入文件      _images.add(file.path); //添加一个路径      setState(() {}); //刷新界面    } catch (e) {      print(e);    }  }

效果图

多点了几下,我就饿了。。。

全部代码

import 'dart:io';import 'dart:typed_data';import 'dart:ui';import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';import 'package:flutter/rendering.dart';import 'package:path_provider/path_provider.dart';
class DemoCapturePage extends StatefulWidget { @override _DemoCapturePageState createState() => _DemoCapturePageState();}
class _DemoCapturePageState extends State<DemoCapturePage> { GlobalKey _key = new GlobalKey();
List<String> _images = new List();
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Flutter截图"), ), body: Column( children: <Widget>[ RepaintBoundary( key: _key, //设置Key child: Container( child: Image.network( "https://visualhunt.com/photos/1/orange-oranges-fruit-sweet-food.jpg?s=l", width: 120, height: 120, ), ), ), RaisedButton( onPressed: () { //截图 _onCaputrePicture(); }, child: Text("截图"), ), Expanded( child: GridView.builder( itemCount: _images.length, gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, mainAxisSpacing: 2, crossAxisSpacing: 2, //childAspectRatio: 0.7, ), itemBuilder: (context, index) { Image image = Image.file(File.fromUri(Uri.parse(_images[index]))); return image; }, ), ) ], )); }
//截图 void _onCaputrePicture() async { try { RenderRepaintBoundary boundary = _key.currentContext.findRenderObject(); double pix = window.devicePixelRatio; // 获取当前设备的像素比 var image = await boundary.toImage(pixelRatio: pix); ByteData byteData = await image.toByteData(format: ImageByteFormat.png); Uint8List pngBytes = byteData.buffer.asUint8List(); Directory tempDir = await getTemporaryDirectory(); //需添加 path_provider: 1.6.11 插件 File file = new File('${tempDir.path}/${_images.length}.png'); print("===》" + file.path); if (!file.existsSync()) { file.createSync(); } file.writeAsBytesSync(pngBytes); //写入文件 _images.add(file.path); //添加一个路径 setState(() {}); //刷新界面 } catch (e) { print(e); } }}


本文分享自微信公众号 - Flutter学习簿(gh_d739155d3b2c)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部