网站和app 等前端产品如何变成灰色

星宇大前端

发布于 2022-12-22 17:00:00

7260

发布于 2022-12-22 17:00:00

文章被收录于专栏：大宇笔记大宇笔记

目前主流产品的前端展示，不外乎h5 pcweb 移动web，Android原生、iOS原生、flutter 等跨平台技术。上次默哀日的时候我还是一个app开发者，也写过类似文章，就不多赘述。

整体思路

无论是什么前端应用，如果项目有好的层次，组件复用的基础组件是相同的，那么这种一夜变灰是特别简单的。 web 和 Flutter 的设计与生俱来，由于层层结构可以统一更改样式。

iOS 和Android 如果自己定义了基础组件，那么也可以是相同原理。

H5 页面

h5 是最简单的，所有的样式都根html 样式下，所以更改html 样式即可。

css 有一个过滤属性filter 只要要设置下灰色 grayscale(100%)

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

Flutter

Flutter 也是在根Wiget 上包裹 ColorFiltered 组件就可以。

@override
Widget build(BuildContext context) {
  return ColorFiltered(
    colorFilter: ColorFilter.mode(Colors.grey, BlendMode.color),
    child: MaterialApp(
      title: 'Flutter 灰色,
      theme: ThemeData(
          primaryColor: Colors.white,
          accentColor: Color(0xFF5DC782),
          backgroundColor: Color(0xFFF2F2F2)),
      routes: Routes.routes,
      initialRoute: Routes.home_page,
      debugShowCheckedModeBanner: false,
    ),
  );
}

Android

一般都会有 BaseActivity ，在 onCreate 声明周期里设置一层灰色滤镜。

Paint paint = new Paint();
ColorMatrix cm = new ColorMatrix();
cm.setSaturation(0);//灰度效果
paint.setColorFilter(new ColorMatrixColorFilter(cm));
getWindow().getDecorView().setLayerType(View.LAYER_TYPE_HARDWARE,paint);