Flutter 實現整個App變為灰色(勿忘國殤 警鐘長鳴)

語言: CN / TW / HK

Flutter 實現整個App變為灰色(勿忘國殤 警鐘長鳴)

前言

1937年12月13日,侵華日軍侵入南京,對我同胞實施長達40多天滅絕人性的大屠殺,30萬生靈慘遭殺戮,人類文明史上留下最黑暗的一頁。81年過去,中華門城牆上戰爭留下的彈孔依舊清晰可見,“萬人坑”的累累白骨訴說著當年那段沉痛的歷史。

昭昭前事,惕惕後人。

為了讓更多的人永遠記住,各大廠都在這一天將應用變灰了。

image-20211213081824100

那麼接下來我們看一下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)); } }

設定前

image-20211213081150413

設定後

image-20211213081202975

功能就這樣實現了,功能簡單,意義不凡,但是歷史不會就這樣被人遺忘。

最後

今天早上十點鐘

當空襲警報響徹南京的天空

無論您在哪裡

在做什麼

請留一分鐘

為遇難同胞默哀

國行公祭

不只是民族的悲愴

還有落後必亡的訓誡

銘諸心腑

銘記苦難的歷史

匯聚前行的力量

勿忘國殤 警鐘長鳴

振興中華 吾輩自強