關於 Flutter app 一鍵置灰的操作設定真的簡單至極 ｜8月更文挑戰

頭疼腦脹的程式碼搬運工發表於2021-08-12
FlutterAPP

這是我參與8月更文挑戰的第5天，活動詳情檢視：8月更文挑戰

廢話開篇：這篇文章對於APP的一鍵置灰功能如何實現說一下個人感受，android不太懂，沒有發言權，問過同學後得知安卓可一鍵設定置灰效果，感覺很方便。iOS下面多說幾句，對於置灰功能實現 1、修改相關類（UIImage、UIWebview、WKWebView、UIColor等）的load方法，利用runtime的方法交換api全域性修改當前類對於色值的要求，實現顏色置灰，但是load方法是要前於main方法的，也就是說在app內部如果將顏色變為正常值除了要再次修改load方法了交換的方法外還需要重新整理整個app，目的是將置灰的顏色變為正常值，這個工程裡存在難度不說而且還很大。下面展示一下flutter下如何進行app一鍵置灰。

一、先看效果

螢幕錄製2021-08-12 上午8.59.18.gif

二、程式碼實現

這裡將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方法，實現內部顏色色值置灰。

image.png

這裡簡單大白話描述一下原理：所謂的物件導向程式設計其實就是程式導向程式設計的集合，只不過把程式導向程式設計的c語言實現方法體提煉出來用方法名去標記它再規劃到某個結構體下，當結構體足夠複雜的時候，它就變成了物件，這樣再去呼叫某個c語言方法就可以統一用這個物件管理了，利用runtime機制是可以為類動態新增、修改、交換方法的，由於分類的load方法也是要執行的，那麼就在裡面進行一些特定的方法交換，將原來正常的色值賦值方法統一轉換為灰度顏色賦值，這樣就起到了統一置灰的目的。當然，對於網頁來說的置灰是需要原生webview去執行js方法的，即修改html檔案下html元素的style.filter屬性，這樣就完成了網頁置灰效果。

好了，文章沒有太多技術含量，純屬個人使用總結，或許有的朋友也會有過類似的思考。寫下來，記錄一下，程式碼拙劣，大神勿噴，如果對大家有幫助，更是深感欣慰。

相關文章