FLUTTER 实战应用 色彩配置(换肤功能)

这里主要是使用原生框架做全局的状态管理
我的思路是使用管理类管理色彩配置
widget从管理类获取所需的色彩.实现色彩配置
所有常驻内存的widget向管理类递交方法用于色彩配置发生变化的时候被调用
而随界面出现而生成/消失的widget直接获取配置即可

首先创建一个管理类配置色彩

1. 创建一个单例类

class SkinConfig{


  factory SkinConfig() =>_getInstance();
  static SkinConfig get instance => _getInstance();
  static SkinConfig _instance;
  SkinConfig._internal() {

    // 初始化
  }

  static SkinConfig _getInstance() {
    if (_instance == null) {
      _instance = new SkinConfig._internal();

    }
    return _instance;
  }
  }

2. 创建一个属性作为当前色彩类型的标记

//色彩类型
const String skinStyleDay = 'day';
const String skinStyleNight = 'night';
class SkinConfig{

  //配色列表
  static List skinStyleList = [
    skinStyleDay,
    skinStyleNight
  ];

  //配色类型标记 不能为空
  static String _skinStyle = skinStyleDay;
  
...
}

3. 添加根据标记返回对应色彩的方法

class SkinConfig{

...
//主色
  Color mainColor(){

      Color color ;
   switch (_skinStyle) {
      case skinStyleDay : color = Color(0xFFFFBE00);
      break;
      case skinStyleNight : color = Color(0xFF333333);
      break;

}
    return color;
}


//主背景色
  Color mainBGColor(){

    Color color ;
    switch (_skinStyle) {
      case skinStyleDay : color = Color(0xFFF8F8F8);
      break;
      case skinStyleNight : color = Color(0xFF191C29);
      break;

    }
    return color;
  }
...
}

这样,只要改变SkinConfig()单例中的 _skinStyle 属性就可以在mainColor(),mainBGColor()方法中得到对应类型的色彩了

添加配置,本地化存储方法

切换类型,我这里因为只牵涉黑白两版的切花所以使用一个轮换方法就可以,但是这里的方案实际是给多种皮肤配置预留的,需要制定类型的话增加指定参数即可.本地保存的方法我使用的是上一篇博客中介绍的在NSUserdefault中保存一个value的方案

1. 设置切换,保存的方法

class SkinConfig{
...


  //读取已保存的配色
  void readDefaultModel(){
    HardwareIO.instance.readUserDefault(skinStyleKey, (String value){
      if(skinStyleList.contains(value)){
        _skinStyle = value;
      }else{
        _skinStyle = skinStyleDay;
      }
    });
  }
  
//切换色彩配置
  void switchModel(){
    //轮换配色
    int currentIndex = skinStyleList.indexOf(_skinStyle);
    
    int destIndex = 0;
    
    if(currentIndex < skinStyleList.length - 1){
    
      destIndex = currentIndex + 1;
      
    }
    
    _skinStyle = skinStyleList.elementAt(destIndex);

    //保存已选配色类型
    HardwareIO.instance.setUserDefault(skinStyleKey, skinStyleList.elementAt(destIndex),(String result){});

}
...
}

2. 在初始化的时候读取一次已保存的配色

 static SkinConfig _getInstance() {
    if (_instance == null) {
      _instance = new SkinConfig._internal();
      _instance.readDefaultModel();
    }
    return _instance;
  }

这样就完成了色彩配置,存储,获取的完整工具。

通过方法传递在色彩配置发生变动的时候setstate

完成上述色彩管理类的配置之后,在任何一个地方调用获取色彩方法即可获取当前对应的色彩.但是如果色彩发生了变化,而对应的widget没有重新build或者setstate是不会发生变化的.因此我们选择将需要随色彩管理类变动而变动的widget的setstate方法作为变量传递给ColorConfig类,在发生色彩变动时 由ColorConfig进行回调即可.

1. 在ColorConfig类中使用List注册需要回调的n方法

class SkinConfig{
···
  //色彩变动时候需要被调用的方法
  List<Function> changeReceiver = new List();

//注册回调
  void regChangeAction(Function function()){
       changeReceiver.add(function);
       print(changeReceiver.toString());
  }

//反注册回调
  void unRegChangeAction(Function function()){
    changeReceiver.remove(function);
    print(changeReceiver.toString());

  }
//调用回调
  void changeSkinCallBack(){
  
    for(int i = 0 ; i < changeReceiver.length;i++){

      Function function = changeReceiver[i];
      
      function();

    }
  }
···
}

2. 在色彩发生变动的位置调用回调

  //轮换配色
  void switchModel(){
···

     changeSkinCallBack();

}



  //读取已保存的配色
  void readDefaultModel(){
    HardwareIO.instance.readUserDefault(skinStyleKey, (String value){
   ···
      changeSkinCallBack();

    });
  }

这样整个色彩配置管理类就完成了

如何调用

获取对应色彩 ,只需要使用ColorConfig()…color()即可
色彩发生变化时对于所有在内存中驻留,需要被主动通知到的widget则需要

1. 包装setstate方法
2. 将该方法注册到ColorConfig的回调列表中
3. 注意在dispose中进行反注册

class _SelfPageState extends State<SelfPage>{
 Function changeSkinFunction ;

  @override
  void initState() {
    // TODO: implement initState
    //包装setstate方法
    changeSkinFunction =  (){
    setState(() {
    });
    };

//注册该回调
    SkinConfig().regChangeAction(
       changeSkinFunction
    );

    super.initState();
  }

  @override
Widget build(BuildContext context) {
  // TODO: implement build
  return new Scaffold(
    appBar:  new AppBar(
      title: new Text('市场'),
      //配置色彩
      backgroundColor: SkinConfig().mainColor(),
    ),
  );
}

@override
  void dispose() {
    // TODO: implement dispose
    //反注册这个类的回调
  SkinConfig().unRegChangeAction(changeSkinFunction);
    super.dispose();
  }
}