展示在页面中的Widget是圆角的,此时将这个Widget转图片保存至相册后发现圆角外侧会有黑色,如图:

让ui给了一张圆角图片保存至相册后发现依旧有这个问题,因此考虑保存至相册的图片为直角,但在页面中展示的还是圆角。
单独写了一个直角的Widget但未在页面中引用,发现RepaintBoundary只对展示在页面中的Widget起作用。
这里提供一个我解决的思路:Stack组件内若不使用Positioned定位,组件会重叠在一起,因此我们可以将要保存为图片的直角Widget等比例缩小,藏在需要展示在页面中的圆角Widget的后面。
Stack(
alignment: Alignment.center,
children: [
//需要保存至相册的直角Widget,等比例缩小
RepaintBoundary(
key: globalKey,
child: Container(
...
)
),
//展示在页面的圆角Widget
Container(
...
)
],
)
当页面中的Widget显示为圆角并保存为图片时,发现圆角外有黑色边框。尝试使用UI提供的圆角图片也存在同样问题。解决方案可能是使用Stack组件,将直角Widget等比例缩小并置于圆角Widget之后,利用RepaintBoundary只对显示Widget起作用的特性。
1万+





