Flutter將整個(gè)App變?yōu)榛疑姆椒ㄊ鞘裁?/h1>

發(fā)布時(shí)間：2021-12-14 10:07:28 來(lái)源：億速云 閱讀：157 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹“Flutter將整個(gè)App變?yōu)榛疑姆椒ㄊ鞘裁础?，在日常操作中，相信很多人在Flutter將整個(gè)App變?yōu)榛疑姆椒ㄊ鞘裁磫?wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Flutter將整個(gè)App變?yōu)榛疑姆椒ㄊ鞘裁础钡囊苫笥兴鶐椭?！接下?lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

前言

為了讓更多的人永遠(yuǎn)記住12月13日，各大廠都在這一天將應(yīng)用變灰了。

ColorFiltered(       colorFilter:ColorFilter.mode(Colors.grey, BlendMode.color),       child: child,     );

將上面代碼放到全局根widget下，即可設(shè)置全部頁(yè)面顏色變灰

通過(guò)colorFilter可設(shè)置某種顏色過(guò)濾，比如變灰設(shè)置灰色即可，以及顏色混合模式
ColorFiltered 小部件繼承SingleChildRenderObjectWidget，因此會(huì)提供一個(gè)child子布局，這里可以放置想要過(guò)濾顏色的頁(yè)面；

最終我們就合成一張這樣帶濾鏡效果

追蹤源碼

我我們持續(xù)追蹤源碼到 RenderImage 類中，可以看到最終也是創(chuàng)建了一個(gè) 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));
  }
}

設(shè)置前

Row(       children: <Widget>[         Expanded(           child: Image.asset('images/1.png'),         ),         Expanded(             child: ColorFiltered(           colorFilter: ColorFilter.mode(Colors.pink[200], BlendMode.modulate),           child: Image.asset('images/1.png'),         ))       ],     )

到此，關(guān)于“Flutter將整個(gè)App變?yōu)榛疑姆椒ㄊ鞘裁础钡膶W(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！