flutter 在对文本字段应用模糊效果时，ImageFilter.Blur()是否会将边缘剪掉？

7z5jn7bk 于 2023-10-22 发布在 Flutter

关注(0)|答案(1)|浏览(139)

我想为用户提供一个选项，可以模糊包含敏感信息的某些文本字段，以防他们想分享我的应用程序的屏幕截图，而不向其他人显示这些信息。
从本质上讲，我在寻找一个相当于这样的效果：https://www.w3docs.com/tools/code-editor/5596
(You我可以将上面片段中的模糊增加到10px，这样你就可以看到我想要的了）
为了在Flutter中实现这一点，我将Text小部件嵌套在ImageFiltered小部件中，并有条件地对其应用ImageFilter.blur()效果。到目前为止还不错。
不过……效果看起来并不完全对：

正如你在截图中看到的，模糊效果似乎在边缘被剪切，使它看起来很丑。
我尝试过的事情：

在tileMode参数中使用所有可能的TileMode值
在周围添加（大量）填充
把它放进一个大容器里
减少文本的大小

但无论我做什么，如果模糊效果的sigmaX和sigmaY值足够高（我需要确保你看不出数字），那么模糊似乎会“溢出”到“分配”给文本小部件的空间之外。扑翼会把它夹下来
我做错什么了吗？有没有人能想出一个变通办法，使模糊效果看起来专业，而不是修剪周围的边缘？
下面是我的代码的最小版本，您可以给予它：

return ImageFiltered(
  imageFilter: ImageFilter.blur(
    tileMode: TileMode.clamp,
    sigmaX: 10,
    sigmaY: 10),
  child: Text(
    "Sample Text",
    style: TextStyle(fontSize: 30)
  ),
);

flutter

来源：https://stackoverflow.com/questions/77288704/imagefilter-blur-clips-the-edges-off-when-applying-the-blur-effect-to-a-text-f

1条答案

按热度按时间

ktca8awb1#

这有帮助吗？
如果只对文本应用图像模糊，模糊效果将仅限于文本区域。然而，当使用ClipRRect与剪切它与文本字段为例，虽然我使用容器作为例子来展示，模糊效果往往会超出预期的边界的文本。
但如果你使用的是文本字段，最好将模糊和文本字段分开

- ClipRRect
 - SizedBox - // height and width
 - Stack
   -[
     - textField
     - ImageBlur - // same width height from sizedbox and also 
//make ImageBlur to be wrap with Ignore Pointer to allow the 
//back of the image blur to be click and input text
    ] 


return ClipRRect(
    borderRadius: BorderRadius.circular(10),
    child: Container(
      
      width: 200.0,
      decoration: BoxDecoration(
          color: Colors.black,  
        
      ),
      child:  ImageFiltered(
  imageFilter: ImageFilter.blur(
    tileMode: TileMode.mirror,
    sigmaX: 4,
    sigmaY: 4),
  child: Padding(
     padding: const EdgeInsets.symmetric(
     vertical: 10,
      horizontal: 15
    ),
    child:  Text(
    "Sample Text",
    style: TextStyle(fontSize: 30)
  ),
  ),
)
    )
  );

赞(0）回复(0）举报 2023-10-22

我来回答

flutter 在对文本字段应用模糊效果时，ImageFilter.Blur()是否会将边缘剪掉？

1条答案

相关问题

热门标签

最新问答