Closed 7ye closed 1 year ago
提供最简单的demo
完整DEMO代码:blur_test.txt
因为对这部分做了 clip,用了 BlendMode.clear 方法,高模糊+这部分就变成了黑色. overwidget的图层在 高斯模糊之上.你应该对整个 extended text 做高斯模糊,用clippath 来处理哪一部分需要模糊
你可以利用下面代码,为想要高斯模糊的文本添加 .
style: TextStyle(
foreground: Paint()
..maskFilter = MaskFilter.blur(BlurStyle.normal, 3.0)
..color = Colors.black,
),
WidgetSpan 可以这样,并且把 [TextOverflowWidget.clearType] 设置为 TextOverflowClearType.clipRect
return ExtendedWidgetSpan(
child: SizedBox(
width: size,
height: size,
child: ClipRect(
child: Stack(
children: [
Image.asset(
EmojiUitl.instance.emojiMap[key]!,
width: size,
height: size,
),
Positioned.fill(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
child: Container(color: Colors.transparent),
),
),
],
),
),
// CustomPaint(
// size: Size(size, size),
// child: Opacity(
// opacity: 0.5,
// child: Image.asset(
// EmojiUitl.instance.emojiMap[key]!,
// width: size,
// height: size,
// ),
// ),
// foregroundPainter: _BlurPainter(),
// // isComplex: true,
// ),
),
//style: textStyle,
actualText: key,
//imageWidth: size,
// imageHeight: size,
start: start!,
//fit: BoxFit.fill,
// margin: const EdgeInsets.only(left: 2.0, top: 2.0, right: 2.0),
alignment: PlaceholderAlignment.middle,
);
class _BlurPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
canvas.drawRect(
Offset.zero & size,
Paint()
..maskFilter = MaskFilter.blur(BlurStyle.normal, 5)
..color = Colors.black);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
内容中间加了一个使用BackdropFilter做文字模糊的效果,只要加了这个,全文越界显示那儿肯定会直接变黑