3)将需要生成图片的组件用RepaintBoundary包裹 GlobalKey globalKey = GlobalKey(); RepaintBoundary( key: globalKey, child:Text('我要生成图片'), ) 1. 2. 3. 4. 5. 4)保存图片到相册【再点击事件中调用下面这个方法】 /// 保存图片 static Future<void> saveImage(GlobalKey globalKey) async { RenderRepai...
在这里采用的实现思路是使用层叠布局Stack加载图片以及水印部分,水印部分可能是一个现成的图片也可能是一个文字等其他样式的组件,然后将这个Stack使用RepaintBoundary组件包裹起来,然后通过Widget生成图片的功能从而达到实现保存图片为水印效果。 如图下图所示,加载的本地资源目录下的一张图片,点击右上角的对勾然后将图片与右...
在这里采用的实现思路是使用层叠布局Stack加载图片以及水印部分,水印部分可能是一个现成的图片也可能是一个文字等其他样式的组件,然后将这个Stack使用RepaintBoundary组件包裹起来,然后通过Widget生成图片的功能从而达到实现保存图片为水印效果。 如图下图所示,加载的本地资源目录下的一张图片,点击右上角的对勾然后将图片与右...
一、ClipOval组件 代码语言:javascript 复制 ClipOval(child:Image.network('https://n4p.imoxiu.com/e5e90f67f879d213aa5eb46dcc1d95f1669ecb59/200_200',width:100.0,height:100.0,fit:BoxFit.cover,)) 二、ClipRRect组件 代码语言:javascript 复制 Center(child:ClipRRect(borderRadius:BorderRadius.circular...
通过这种方式绘制生成图片,好处是可以自由操作 Canvas 的绘制内容,而且必依赖于组件,只要在任何需要的地方触发方法即可。如下所示,在FloatingActionButton中触发createCanvas方法即可保存图片。 另外,这种方式还有另一个很大的优势,可以通过 canvas 的操作让图片放大,获得非常大尺寸的图片。比如将绘制内容放大 100 倍存储,...
Image加载了图片数据后存储在imageInfo.image。ImageInfo类很简单,只有两个属性: @immutable class ImageInfo { //图片像素点阵, final ui.Image image; //缩放比例,例当scale为2时,宽高都将变为原图的2倍。 final double scale; } 那imageInfo又是在哪生成的呢,也就是在哪加载了图片的数据呢?根据ImageInfo...
在生成分享卡片的同时还会有其他的操作选项,例如保存图片、复制链接、浏览器打开等等,所以通常分享卡片的形式为弹窗形式,中间为分享卡片主体,剩余空间为操作项。 操作项组件封装: class ImageDialog extends StatelessWidget { const ImageDialog({ Key? key,
老孟导读:Flutter中有这么一类组件,用于定位、装饰、控制子组件,比如Container(定位、装饰)、Expanded(扩展)、SizedBox(固定尺寸)、AspectRatio(宽高比)、FractionallySizedBox(占父组件比例)。这些组件的使用频率非常高,下面一一介绍,最后给出项目中实际案例熟悉其用法。
第一种:直接操作图片,将水印文字与图片一起编码生成新的图片; 第二种:用Stack组件,childs中放两个元素,一个是Image,一个是Text,最后用RepaintBoundary将Stack包起来,从Widget中截取获得合成后的水印图(本文介绍的是这种,也是博主推荐的)。 image.png 图中的日期就是水印。
当然这些重绘边界并不都需要我们手动放置,大部分Widget组件会自动放置重绘边界(自动分层)。 设置了RepaintBoundary的就会额外生成一个图层,其所有的子节点都会被绘制在这个新的图层上,Flutter中使用图层来描述一个层次上(一个绘制指令缓冲区)的所有RenderObject,根节点的RenderView会创建Root Layer,并且包含若干个子Layer,每...