Flutter火了。Google的Fuchsia操作系統(tǒng)和配套的Flutter開發(fā)框架在去年發(fā)布了Preview版本，沉寂了一年之后在今年的google大會(huì)上又一次被提名，超高的渲染性能和Android/iOS跨平臺(tái)的特性讓它又一次被推向風(fēng)口浪尖。
最近準(zhǔn)備開個(gè)Flutter系列博客的更新，以作知識(shí)儲(chǔ)備。
回到正題，高斯模糊不是什么新奇的特效，原生平臺(tái)經(jīng)常見到的，本篇記錄如何在Flutter框架下實(shí)現(xiàn)動(dòng)態(tài)的高斯模糊。

靜態(tài)預(yù)覽
動(dòng)態(tài)預(yù)覽
列表滾動(dòng)預(yù)覽

創(chuàng)建工程

使用AS創(chuàng)建Flutter工程，在main.dar文件中清理無(wú)用代碼，便于代碼演示。清理后得到如下內(nèi)容：

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(), ); } }

圖片模糊

首先加載一張圖片，任何格式的都可以，從本地加載或者從網(wǎng)絡(luò)加載，這里選用從網(wǎng)絡(luò)加載一張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"), ), ); } } 

如上代碼所示，你會(huì)在界面中到一張惡龍咆哮的動(dòng)態(tài)圖片。
而對(duì)這張圖片進(jìn)行高斯模糊只需要在這張圖片的上層放上一個(gè)BackdropFilter組件即可，在Flutter中，組件上下疊加比較常用的方法是把需要疊加的組件以列表形式放進(jìn)一個(gè)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的寬和高，這是為了讓兩個(gè)組件完全重合，在實(shí)際場(chǎng)景中也使用其他方式來(lái)進(jìn)行對(duì)齊處理；
BackdropFilter組件設(shè)置了filter對(duì)象，這個(gè)filter對(duì)象就是對(duì)BackdropFilter下層的畫面進(jìn)行模糊處理的，sigmaX和sigmaY分別設(shè)置了x和y方向的模糊程度；
BackdropFilter的child設(shè)置了一個(gè)半透明的Container，用于模糊后畫面的顏色填補(bǔ)，你也可以設(shè)置為其他顏色。
這樣即可達(dá)到圖片高斯模糊的效果，若要在模糊后的圖片上增加正常的組件，只需要在BackdropFilter內(nèi)的Container容器中添加child就可以了。

組件模糊

對(duì)其他組件的模糊其實(shí)同理，在BackropFilter組件的下層放置其他組件即可。
默認(rèn)情況下BackdropFilter組件是會(huì)對(duì)觸摸事件進(jìn)行攔截的，下層如果要放置的組件需要相應(yīng)觸摸事件，需要在BackdropFilter組件的外層套一個(gè)IgnorePointer組件，IgnorePointer會(huì)攔截將要進(jìn)入自己內(nèi)部的觸摸事情，并向后傳遞，關(guān)于觸摸事件會(huì)在以后的文章詳細(xì)說(shuō)明。
下面是關(guān)于一個(gè)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( "測(cè)試$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, ), ), ) ], ), ), ); } }

整個(gè)布局的渲染順序應(yīng)該是逐層渲染的，首先渲染IgnorePointer下層的圖像，然后是IgnorePointer并進(jìn)行模糊處理，最后渲染IgnorePointer內(nèi)部的child組件，所以IgnorePointer的child組件是不受影響的。

本篇完

---

更多干貨移步我的個(gè)人博客 https://www.nightfarmer.top/

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/17644.html