Flutter 將整個App變爲灰色（勿忘國殤 警鐘長鳴）【Flutter專題21】

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"1937年12月13日，侵華日軍侵入南京，對我同胞實施長達40多天滅絕人性的大屠殺，30萬生靈慘遭殺戮，人類文明史上留下最黑暗的一頁。81年過去，中華門城牆上戰爭留下的彈孔依舊清晰可見，“萬人坑”的累累白骨訴說着當年那段沉痛的歷史。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"昭昭前事，惕惕後人。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲了讓更多的人永遠記住，各大廠都在這一天將應用變灰了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/15/15855a7fae48e8e1aa205860c577458a.png","alt":"image-20211213081824100","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那麼接下來我們看一下Flutter是如何實現的。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Flutter中實現整個App變爲灰色","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在Flutter中實現整個App變爲灰色是非常簡單的，","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"只需要在最外層的控件上包裹ColorFiltered，用法如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"ColorFiltered（顏色過濾器）","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"看名字就知道是增加顏色濾鏡效果的，","attrs":{}}]},{"type":"codeblock","attrs":{"lang":""},"content":[{"type":"text","text":"ColorFiltered(\n     colorFilter:ColorFilter.mode(Colors.grey, BlendMode.color),\n     child: child,\n   );","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"將上面代碼放到全局根widget下，即可設置全部頁面顏色變灰","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通過colorFilter可設置某種顏色過濾，比如變灰設置灰色即可，以及顏色混合模式ColorFiltered 小部件繼承SingleChildRenderObjectWidget，因此會提供一個child子佈局，這裏可以放置想要過濾顏色的頁面；","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最終我們就合成一張這樣帶濾鏡效果","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"追蹤源碼","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們持續追蹤源碼到 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"RenderImage","attrs":{}}],"attrs":{}},{"type":"text","text":" 類中，可以看到最終也是創建了一個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"ColorFilter","attrs":{}}],"attrs":{}},{"type":"text","text":" 。","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"dart"},"content":[{"type":"text","text":"class ColorFiltered extends SingleChildRenderObjectWidget {\n  /// Creates a widget that applies a [ColorFilter] to its child.\n  ///\n  /// The [colorFilter] must not be null.\n  const ColorFiltered({required this.colorFilter, Widget? child, Key? key})\n     : assert(colorFilter != null),\n        super(key: key, child: child);\n​\n  /// The color filter to apply to the child of this widget.\n  final ColorFilter colorFilter;\n​\n  @override\n  RenderObject createRenderObject(BuildContext context) => _ColorFilterRenderObject(colorFilter);\n​\n  @override\n  void updateRenderObject(BuildContext context, RenderObject renderObject) {\n   (renderObject as _ColorFilterRenderObject).colorFilter = colorFilter;\n }\n​\n  @override\n  void debugFillProperties(DiagnosticPropertiesBuilder properties) {\n    super.debugFillProperties(properties);\n    properties.add(DiagnosticsProperty('colorFilter', colorFilter));\n }\n}","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"設置前","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/64/64d6721f762cf8cdc3c12332951c89ae.png","alt":"image-20211213081150413","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"設置後","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/fc/fc49681d375545ef10a8d93c4b12375f.png","alt":"image-20211213081202975","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"功能就這樣實現了，功能簡單，意義不凡，但是歷史不會就這樣被人遺忘。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"最後","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"今天早上十點鐘","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當空襲警報響徹南京的天空","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"無論您在哪裏","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在做什麼","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"請留一分鐘","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲遇難同胞默哀","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"國行公祭","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不只是民族的悲愴","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"還有落後必亡的訓誡","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"銘諸心腑","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"銘記苦難的歷史","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"匯聚前行的力量","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"勿忘國殤 警鐘長鳴","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"振興中華 吾輩自強","attrs":{}}]}]}