Flutter之實現動態高斯模糊

flutter火了。google的fuchsia作業系統和配套的flutter開發框架在去年發布了preview版本，沉寂了一年之後在今年的google大會上又一次被提名，超高的渲染效能和android/ios跨平台的特性讓它又一次被推向風口浪尖。

最近準備開個flutter系列部落格的更新，以作知識儲備。

回到正題，高斯模糊不是什麼新奇的特效，原生平台經常見到的，本篇記錄如何在flutter框架下實現動態的高斯模糊。

使用as建立flutter工程，在main.dar檔案中清理無用**，便於**演示。清理後得到如下內容：

class

extends

statelesswidget

}class

myhomepage

extends

statefulwidget

) : super(key: key);

final string title;

@override

_myhomepagestate createstate() => _myhomepagestate();

}class

_myhomepagestate

extends

state

}複製**

首先載入一張，任何格式的都可以，從本地載入或者從網路載入，這裡選用從網路載入一張gif，加入到homepage的渲染方法中

class _myhomepagestate extends state

}複製**

而對這張進行高斯模糊只需要在這張的上層放上乙個backdropfilter元件即可，在flutter中，元件上下疊加比較常用的方法是把需要疊加的元件以列表形式放進乙個stack元件中，處理後布局如下：

class

_myhomepagestate
extends
state
}複製**

backdropfilter元件設定了filter物件，這個filter物件就是對backdropfilter下層的畫面進行模糊處理的，sigmax和sigmay分別設定了x和y方向的模糊程度；

backdropfilter的child設定了乙個半透明的container，用於模糊後畫面的顏色填補，你也可以設定為其他顏色。

這樣即可達到高斯模糊的效果，若要在模糊後的上增加正常的元件，只需要在backdropfilter內的container容器中新增child就可以了。

對其他元件的模糊其實同理，在backropfilter元件的下層放置其他元件即可。

預設情況下backdropfilter元件是會對觸控事件進行攔截的，下層如果要放置的元件需要相應觸控事件，需要在backdropfilter元件的外層套乙個ignorepointer元件，ignorepointer會攔截將要進入自己內部的觸控事情，並向後傳遞，關於觸控事件會在以後的文章詳細說明。

下面是關於乙個listview模糊的示例：

class

_myhomepagestate
extends
state
,),
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元件是不受影響的。

不想醜陋之實現動態url

urlpatterns url r admin include admin.site.urls url r index hello.views.index url r login hello.views.login url r logout hello.views.logout 前面我們這樣乙個個手...

CSS3D之實現動態字

思路 用 befor偽元素生成用於3d翻轉的字型 實現起來挺簡單的 新建5個div，每個div分別對應5個字型 用 befor生成用於翻轉的字型，並用absolute，以及z index控制生成字型的位置 當元素被 hover時，就進行3d翻轉 實現起來挺簡單的，下面直接上原始碼 前端小 學生上面也...

CSS之實現二級選單動態出現

一直覺得二級選單的出現效果僅僅有js才幹控制。今天研究了一下阿里巴巴站點的首頁，才發現，原來二級選單的動態顯示也能夠使用css來控制，原來對css是靜態的東西一直是誤解它了，css也能夠實現動態的效果，現把主要 展演示樣例如以下 html css ls cate li div ls cate li ...