Flutter火了。Google的Fuchsia操作系统和配套的Flutter开发框架在去年发布了Preview版本，沉寂了一年之后在今年的google大会上又一次被提名，超高的渲染性能和Android/iOS跨平台的特性让它又一次被推向风口浪尖。
最近准备开个Flutter系列博客的更新，以作知识储备。
回到正题，高斯模糊不是什么新奇的特效，原生平台经常见到的，本篇记录如何在Flutter框架下实现动态的高斯模糊。
创建工程
使用AS创建Flutter工程，在main.dar文件中清理无用代码，便于代码演示。清理后得到如下内容：
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(),
);
}
}
图片模糊
首先加载一张图片，任何格式的都可以，从本地加载或者从网络加载，这里选用从网络加载一张gif图片，加入到HomePage的渲染方法中
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Image.network("http://qiniu.nightfarmer.top/恶龙咆哮.gif"),
),
);
}
}
如上代码所示，你会在界面中到一张恶龙咆哮的动态图片。
而对这张图片进行高斯模糊只需要在这张图片的上层放上一个BackdropFilter组件即可，在Flutter中，组件上下叠加比较常用的方法是把需要叠加的组件以列表形式放进一个Stack组件中，处理后布局如下：
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Stack(
children: [
Image.network(
"http://qiniu.nightfarmer.top/恶龙咆哮.gif",
width: 300,
height: 300,
),
BackdropFilter(
filter: new ImageFilter.blur(sigmaX: 3, sigmaY: 3),
child: new Container(
color: Colors.white.withOpacity(0.1),
width: 300,
height: 300,
),
)
],
),
),
);
}
}
从上面的代码中能够看到，在Stack中给Image组件和BackdropFilter指定了300的宽和高，这是为了让两个组件完全重合，在实际场景中也使用其他方式来进行对齐处理；
BackdropFilter组件设置了filter对象，这个filter对象就是对BackdropFilter下层的画面进行模糊处理的，sigmaX和sigmaY分别设置了x和y方向的模糊程度；
BackdropFilter的child设置了一个半透明的Container，用于模糊后画面的颜色填补，你也可以设置为其他颜色。
这样即可达到图片高斯模糊的效果，若要在模糊后的图片上增加正常的组件，只需要在BackdropFilter内的Container容器中添加child就可以了。
组件模糊
对其他组件的模糊其实同理，在BackropFilter组件的下层放置其他组件即可。
默认情况下BackdropFilter组件是会对触摸事件进行拦截的，下层如果要放置的组件需要相应触摸事件，需要在BackdropFilter组件的外层套一个IgnorePointer组件，IgnorePointer会拦截将要进入自己内部的触摸事情，并向后传递，关于触摸事件会在以后的文章详细说明。
下面是关于一个ListView模糊的示例：
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Stack(
children: [
ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return Container(
alignment: Alignment.center,
child: Text(
"测试$index",
style: TextStyle(color: Colors.blue, fontSize: 30),
),
);
},
),
IgnorePointer(
ignoring: true,
child: BackdropFilter(
filter: new ImageFilter.blur(sigmaX: 3, sigmaY: 3),
child: new Container(
color: Colors.white.withOpacity(0.1),
height: 500,
),
),
)
],
),
),
);
}
}
整个布局的渲染顺序应该是逐层渲染的，首先渲染IgnorePointer下层的图像，然后是IgnorePointer并进行模糊处理，最后渲染IgnorePointer内部的child组件，所以IgnorePointer的child组件是不受影响的。
本篇完
更多干货移步我的个人博客 https://www.nightfarmer.top/
