Android Flutter圖片處理之高斯模糊的實(shí)現(xiàn)
ImageFilter
在Flutter中，使圖片模糊有2種方式，這2種方式都需要配合ImageFilter.blur()使用。
factory ImageFilter.blur({ double sigmaX = 0.0, double sigmaY = 0.0, TileMode tileMode = TileMode.clamp })
sigmaX：以x軸方向模糊，值越大越模糊
sigmaY：以Y軸方向模糊，值越大越模糊
TileMode：不需要設(shè)置，使用默認(rèn)值就行
原圖
橫向模糊
ImageFilter.blur(sigmaX: 10, sigmaY: 0)
垂直模糊
ImageFilter.blur(sigmaX: 0, sigmaY: 10)
xy軸同時(shí)模糊
ImageFilter.blur(sigmaX: 20, sigmaY: 20)
用法
BackdropFilter
如果是前端開(kāi)發(fā)，看到這個(gè)名字應(yīng)該很熟悉。和CSS中的backdrop-filter一樣，都是用來(lái)實(shí)現(xiàn)毛玻璃效果。
const BackdropFilter({
Key? key,
required this.filter,
Widget? child,
})
filter是一個(gè)ImageFilter過(guò)濾器，過(guò)濾器的效果會(huì)應(yīng)用于父Widget的子widget，過(guò)濾器不會(huì)作用在child上。所以一般都是使用Stack,將BackdropFilter放在圖片之上。
示例：
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('blur demo'),
),
body: Stack(
children: [
/// 圖片在Stack最底層
Image.asset(
“assets/images/painting2.jpg”,
),
BackdropFilter(
/// 過(guò)濾器
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
/// 必須設(shè)置一個(gè)空容器
child: Container(),
),
}
注意：child中必須設(shè)置一個(gè)空的Container，不然模糊效果不會(huì)生效。
局部模糊
BackdropFilter支持局部模糊，必須使用ClipRect或者其他ClipXXX包裹。
body: Stack(
children: [
Image.asset(imgs[0]),
Positioned(
left: 100,
right: 100,
top: 200,
bottom: 200,
/// 必須clip，否則會(huì)對(duì)整個(gè)區(qū)域模糊。
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaY: 5, sigmaX: 5),
child: Container(
alignment: Alignment.center,
color: Colors.black.withOpacity(0),
child: Text('child不會(huì)被模糊處理'),
),
),
),
)
],
),
ImageFiltered
使用起來(lái)非常簡(jiǎn)單，只需要設(shè)置一個(gè)過(guò)濾器，child中添加圖片即可實(shí)現(xiàn)模糊效果。
ImageFiltered(
imageFilter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
child: Image.asset(
"assets/images/painting2.jpg",
),
)
區(qū)別
Drop更適合處理局部模糊，性能沒(méi)有ImageFiltered好。如果只需要對(duì)圖片全部區(qū)域進(jìn)行模糊處理，推薦使用ImageFiltered。
以上就是Android Flutter圖片處理之高斯模糊的實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于Android Flutter高斯模糊的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Kotlin server多線程編程，Service是實(shí)現(xiàn)程序后臺(tái)運(yùn)行的解決方案，適合執(zhí)行非交互，后臺(tái)預(yù)先的任務(wù)，即使用戶打開(kāi)其他應(yīng)用，Service也能夠正常運(yùn)行2023-01-01
有時(shí)我們的程序使用默認(rèn)的Toast時(shí)會(huì)和程序的整體風(fēng)格不搭配，這個(gè)時(shí)候我們就需要自定義Toast，使其與我們的程序更加融合,使用自定義Toast，首先我們需要添加一個(gè)布局文件，該布局文件的結(jié)構(gòu)和Activity使用的布局文件結(jié)構(gòu)一致，在該布局文件中我們需設(shè)計(jì)我們Toast的布局2013-01-01
Android編程開(kāi)發(fā)音樂(lè)播放器實(shí)例
這篇文章主要介紹了Android編程開(kāi)發(fā)音樂(lè)播放器,結(jié)合實(shí)例形式分析了Android音樂(lè)播放器開(kāi)發(fā)所涉及的SeekBar,ListView,廣播接收者(以代碼的形式注冊(cè)Receiver),系統(tǒng)服務(wù),MediaPlayer等技巧,需要的朋友可以參考下2016-01-01
本篇文章主要介紹了Android修改字體樣式的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
Afianl框架里面的FinalBitmap加載網(wǎng)絡(luò)圖片
這篇文章主要介紹了Afianl框架里面的FinalBitmap加載網(wǎng)絡(luò)圖片的相關(guān)資料,需要的朋友可以參考下2015-07-07
Android實(shí)現(xiàn)自定義帶文字和圖片Button的方法
這篇文章主要介紹了Android實(shí)現(xiàn)自定義帶文字和圖片Button的方法,涉及Android針對(duì)Button按鈕的布局與設(shè)計(jì)技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了Android Jetpack- Paging的使用詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
這篇文章給大家整理了關(guān)于Android進(jìn)階資深開(kāi)發(fā)必備技能-切面編程的相關(guān)知識(shí)點(diǎn)內(nèi)容，有興趣的朋友可以參考學(xué)習(xí)下。2018-07-07
Android仿京東首頁(yè)秒殺倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了Android仿京東首頁(yè)秒殺倒計(jì)時(shí)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
android Launcher3設(shè)置默認(rèn)桌面應(yīng)用
這篇文章主要為大家詳細(xì)介紹了android Launcher3設(shè)置默認(rèn)桌面應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07