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/
