Flutter之實現動態高斯模糊

時間 2019-11-08

標籤 flutter 實現動態高斯模糊简体版

原文原文鏈接

Flutter火了。Google的Fuchsia操做系統和配套的Flutter開發框架在去年發佈了Preview版本，沉寂了一年以後在今年的google大會上又一次被提名，超高的渲染性能和Android/iOS跨平臺的特性讓它又一次被推向風口浪尖。
最近準備開個Flutter系列博客的更新，以做知識儲備。
回到正題，高斯模糊不是什麼新奇的特效，原平生臺常常見到的，本篇記錄如何在Flutter框架下實現動態的高斯模糊。
bash

建立工程

使用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的渲染方法中app

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就能夠了。less

組件模糊

對其餘組件的模糊其實同理，在BackropFilter組件的下層放置其餘組件便可。
默認狀況下BackdropFilter組件是會對觸摸事件進行攔截的，下層若是要放置的組件須要相應觸摸事件，須要在BackdropFilter組件的外層套一個IgnorePointer組件，IgnorePointer會攔截將要進入本身內部的觸摸事情，並向後傳遞，關於觸摸事件會在之後的文章詳細說明。
下面是關於一個ListView模糊的示例：ide

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

複製代碼