flutter 使用RepaintBoundary将Widget转图片保存至相册时遇到的问题

YML_426

于 2023-01-13 14:45:24 发布

阅读量936

点赞数

CC 4.0 BY-SA版权

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.youkuaiyun.com/YML_426/article/details/128673786

flutter 专栏收录该内容

11 篇文章

订阅专栏

当页面中的Widget显示为圆角并保存为图片时，发现圆角外有黑色边框。尝试使用UI提供的圆角图片也存在同样问题。解决方案可能是使用Stack组件，将直角Widget等比例缩小并置于圆角Widget之后，利用RepaintBoundary只对显示Widget起作用的特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

让ui给了一张圆角图片保存至相册后发现依旧有这个问题，因此考虑保存至相册的图片为直角，但在页面中展示的还是圆角。

单独写了一个直角的Widget但未在页面中引用，发现RepaintBoundary只对展示在页面中的Widget起作用。

这里提供一个我解决的思路：Stack组件内若不使用Positioned定位，组件会重叠在一起，因此我们可以将要保存为图片的直角Widget等比例缩小，藏在需要展示在页面中的圆角Widget的后面。

Stack(
    alignment: Alignment.center,
    children: [
        //需要保存至相册的直角Widget,等比例缩小
        RepaintBoundary(
            key: globalKey,
            child: Container(
                ...
            )
        ),
        //展示在页面的圆角Widget
        Container(
            ...
        )
    ],
)