Flutter 将整个 App 变为灰色（勿忘国殇警钟长鸣）【Flutter 专题 21】

2021 年 12 月 13 日
本文字数：1106 字
阅读完需：约 4 分钟

前言

1937 年 12 月 13 日，侵华日军侵入南京，对我同胞实施长达 40 多天灭绝人性的大屠杀，30 万生灵惨遭杀戮，人类文明史上留下最黑暗的一页。81 年过去，中华门城墙上战争留下的弹孔依旧清晰可见，“万人坑”的累累白骨诉说着当年那段沉痛的历史。

昭昭前事，惕惕后人。

为了让更多的人永远记住，各大厂都在这一天将应用变灰了。

那么接下来我们看一下 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));  }}

复制代码

设置前

设置后

功能就这样实现了，功能简单，意义不凡，但是历史不会就这样被人遗忘。

最后

今天早上十点钟

当空袭警报响彻南京的天空

无论您在哪里

在做什么

请留一分钟

为遇难同胞默哀

国行公祭

不只是民族的悲怆

还有落后必亡的训诫

铭诸心腑

铭记苦难的历史

汇聚前行的力量

勿忘国殇警钟长鸣

振兴中华吾辈自强

发布于: 2 小时前阅读数: 29

原文链接:【http://xie.infoq.cn/article/d4fd0353a03bcff3764f3de65】。文章转载请联系作者。

坚果前端

关注

此间若无火炬，我便是唯一的光 2020.10.25 加入

公众号：“坚果前端”，华为云享专家，51CTO博客首席体验官，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。

发布

暂无评论

创作场景

Flutter 将整个 App 变为灰色（勿忘国殇 警钟长鸣）【Flutter 专题 21】

前言

Flutter 中实现整个 App 变为灰色

ColorFiltered（颜色过滤器）

追踪源码

最后

坚果前端

评论

Flutter 将整个 App 变为灰色（勿忘国殇警钟长鸣）【Flutter 专题 21】