前言
為了讓更多的人永遠記住12月13日，各大廠都在這一天將應用變灰了，
那么接下來我們看一下Flutter是如何實作的，
Flutter中實作整個App變為灰色
在Flutter中實作整個App變為灰色是非常簡單的，
只需要在最外層的控制元件上包裹ColorFiltered，用法如下：
ColorFiltered（顏色過濾器）
看名字就知道是增加顏色濾鏡效果的，
ColorFiltered(
colorFilter:ColorFilter.mode(Colors.grey, BlendMode.color),
child: child,
);
將上面代碼放到全域根widget下，即可設定全部頁面顏色變灰
通過colorFilter可設定某種顏色過濾，比如變灰設定灰色即可，以及顏色混合模式
ColorFiltered 小部件繼承SingleChildRenderObjectWidget，因此會提供一個child子布局，這里可以放置想要過濾顏色的頁面；
最終我們就合成一張這樣帶濾鏡效果
追蹤原始碼
我我們持續追蹤原始碼到 RenderImage 類中，可以看到最終也是創建了一個 ColorFilter ，
class ColorFiltered extends SingleChildRenderObjectWidget {
/// Creates a widget that applies a [ColorFilter] to its child.
///
/// The [colorFilter] must not be null.
const ColorFiltered({required this.colorFilter, Widget? child, Key? key})
: assert(colorFilter != null),
super(key: key, child: child);
/// The color filter to apply to the child of this widget.
final ColorFilter colorFilter;
@override
RenderObject createRenderObject(BuildContext context) => _ColorFilterRenderObject(colorFilter);
@override
void updateRenderObject(BuildContext context, RenderObject renderObject) {
(renderObject as _ColorFilterRenderObject).colorFilter = colorFilter;
}
@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties.add(DiagnosticsProperty<ColorFilter>('colorFilter', colorFilter));
}
}
設定前
設定后
功能就這樣實作了，功能簡單，意義不凡，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/380203.html
標籤：其他