当前位置：首页 > news >正文

flutter开发实战-BackdropFilter高斯模糊子Widget控件

news 2025/8/10 11:50:02

flutter开发实战-BackdropFilter高斯模糊子Widget。

最近开发过程中遇到需要将控件进行模糊，比如iOS的effect的模糊效果。那在flutter中就需要用到了BackdropFilter

一、BackdropFilter

BackdropFilter属性定义

BackdropFilter({Key key, @required ImageFilter filter,Widget child })

其中ImageFilter的filter是必须传的，child为子控件。

ImageFilter一下两种两种构造方法

设置背景高斯模糊

//构造一个设置高斯模糊的ImageFilter，sigmaX，sigmaY用来控制

//模糊度，取值范围是0-10
ImageFilter.blur({double sigmaX: 0.0, double sigmaY: 0.0 })

矩阵变换

ImageFilter.matrix(Float64List matrix4, { FilterQuality filterQuality: FilterQuality.low })

二、实现模糊效果的控件Widget

这里我们实现一个实现设置背景高斯模糊的Widget

import 'package:flutter/material.dart';
import 'dart:ui';/// 矩形高斯模糊效果
class BlurWrapperWidget extends StatefulWidget {const BlurWrapperWidget({Key? key,required this.child,required this.sigmaX,required this.sigmaY,required this.opacity,this.blurMargin,this.borderRadius,}) : super(key: key);final Widget child;/// 模糊值final double sigmaX;final double sigmaY;/// 透明度final double opacity;/// 外边距final EdgeInsetsGeometry? blurMargin;/// 圆角final BorderRadius? borderRadius;@override_BlurWrapperWidgetState createState() => _BlurWrapperWidgetState();
}class _BlurWrapperWidgetState extends State<BlurWrapperWidget> {@overrideWidget build(BuildContext context) {return Container(margin: widget.blurMargin != null? widget.blurMargin: EdgeInsets.only(bottom: 0.0),child: ClipRRect(borderRadius: widget.borderRadius == null? BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)): widget.borderRadius,child: BackdropFilter(filter: ImageFilter.blur(sigmaX: this.widget.sigmaX != null ? this.widget.sigmaX : 10,sigmaY: this.widget.sigmaY != null ? this.widget.sigmaY : 10,),child: Container(color: Colors.white10,child: this.widget.opacity != null? Opacity(opacity: widget.opacity,child: this.widget.child,): this.widget.child,),),),);}
}