关于 Flutter app 一键置灰的操作设置真的简单至极 ｜8月更文挑战

这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

废话开篇：这篇文章对于APP的一键置灰功能如何实现说一下个人感受，android不太懂，没有发言权，问过同学后得知安卓可一键设置置灰效果，感觉很方便。iOS下面多说几句，对于置灰功能实现 1、修改相关类（UIImage、UIWebview、WKWebView、UIColor等）的load方法，利用runtime的方法交换api全局修改当前类对于色值的要求，实现颜色置灰，但是load方法是要前于main方法的，也就是说在app内部如果将颜色变为正常值除了要再次修改load方法了交换的方法外还需要刷新整个app，目的是将置灰的颜色变为正常值，这个工程里存在难度不说而且还很大。下面展示一下flutter下如何进行app一键置灰。

一、先看效果

二、代码实现

这里将main方法里的组件类型变为了 StatefulWidget 类型，最外层用 ColorFiltered 组件包裹一下再设置一下 colorFilter: ColorFilter.mode(Colors.grey, BlendMode.color) 相关属性（里面有很多应用场景）即可完成置灰效果，只要声明一个是否需要置灰的状态属性，在特定时机去修改此状态值就可以修改整体app置灰效果。是不是简单至极？

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  
  @override
  State<StatefulWidget> createState() {
    return new MyAppState();
  }
}

class MyAppState extends State<MyApp> with AutomaticKeepAliveClientMixin {
  bool isGray = true;
  @override
  void initState(){
    //模拟状态变更
    Future.delayed(Duration(milliseconds: 5000),(){
      setState(() {
        isGray = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return isGray ? ColorFiltered(
      //置灰效果设置
      colorFilter: ColorFilter.mode(Colors.grey, BlendMode.color),
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        home: new Scaffold(
          body: new GeneralFloatOnScreenView(child: new BottomTabbarWidget()),
        ),
      ),
    ) : MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: new Scaffold(
        body: new GeneralFloatOnScreenView(child: new BottomTabbarWidget()),
      ),
    );
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}
复制代码

所以，flutter不愧是自定义UI绘制框架，当然可以“我行我素”了。

三、分享一下iOS是如何实现的，来感受下10000点的伤害暴击

1、创建 UIImage、UIWebview、WKWebView、UIColor等分类，修改load方法，实现内部颜色色值置灰。

这里简单大白话描述一下原理：所谓的面向对象编程其实就是面向过程编程的集合，只不过把面向过程编程的c语言实现方法体提炼出来用方法名去标记它再规划到某个结构体下，当结构体足够复杂的时候，它就变成了对象，这样再去调用某个c语言方法就可以统一用这个对象管理了，利用runtime机制是可以为类动态添加、修改、交换方法的，由于分类的load方法也是要执行的，那么就在里面进行一些特定的方法交换，将原来正常的色值赋值方法统一转换为灰度颜色赋值，这样就起到了统一置灰的目的。当然，对于网页来说的置灰是需要原生webview去执行js方法的，即修改html文件下html元素的style.filter属性，这样就完成了网页置灰效果。

好了，文章没有太多技术含量，纯属个人使用总结，或许有的朋友也会有过类似的思考。写下来，记录一下，代码拙劣，大神勿喷，如果对大家有帮助，更是深感欣慰。