Flutter设计模式（一）- 抽象工厂模式

abstract factory(抽象工厂)模式：提供一些创建相似对象或者属于同一类对象的接口，而不是具体的实例。

模式结构

通过抽象AbstactFactory类，并定义该抽象类的两个必须方法CreateProductA()和CreateProductB()。由继承至该抽象类的实例，实现具体的实现。

StatefulWidget

在Flutter中，StatefulWidget就是一个抽象类，其中，里面定义了一个必要的方法 createState()。

abstract class StatefulWidget extends Widget {
  /// Initializes [key] for subclasses.
  const StatefulWidget({ Key? key }) : super(key: key);

  @override
  StatefulElement createElement() => StatefulElement(this);

  @protected
  @factory
  State createState(); // ignore: no_logic_in_create_state, this is the original sin
}

这就规范了所有的StatefulWidget都会创建一个State。

示例代码

接下来，通过示例来体验这种设计模式。我们将通过单选框的选中和非选中，来切换iOS和Android两种不同风格的组建展示。 实现效果如下图

首先创建三个用于渲染组件的抽象类：IActivityIndicator、ISlider、ISwitch

abstract class IActivityIndicator {
  Widget render();
}

abstract class ISlider {
  Widget render(double value, ValueSetter<double> onChanged);
}

abstract class ISwitch {
  Widget render(bool value, ValueSetter<bool> onChanged);
}

整体页面的抽象类：

abstract class IWidgetFactory {
  String getTitle();
  IActivityIndicator createActivityIndicator();
  ISlider createSlider();
  ISwitch createSwitch();
}

分别创建iOS风格和android风格的Widget实例对象。

class MaterialIWidgetsFactory implements IWidgetFactory {
  @override
  IActivityIndicator createActivityIndicator() {
    // TODO: implement createActivityIndicator
    return AndroidActivityIndicator();
  }

  @override
  ISlider createSlider() {
    // TODO: implement createSlider
    return AndroidSlider();
  }

  @override
  ISwitch createSwitch() {
    // TODO: implement createSwitch
    return AndroidSwitch();
  }

  @override
  String getTitle() {
    // TODO: implement getTitle
    return "Android Widgets";
  }
}

class CupertinoWidgetsFactory implements IWidgetFactory {
  @override
  IActivityIndicator createActivityIndicator() {
    // TODO: implement createActivityIndicator
    return IOSActivityIndicator();
  }

  @override
  ISlider createSlider() {
    // TODO: implement createSlider
    return IOSSlider();
  }

  @override
  ISwitch createSwitch() {
    // TODO: implement createSwitch
    return IOSSwitch();
  }

  @override
  String getTitle() {
    // TODO: implement getTitle
    return "iOS Widgets";
  }
}

class AndroidActivityIndicator implements IActivityIndicator {
  @override
  Widget render() {
    // TODO: implement render
    return CircularProgressIndicator(
      backgroundColor: const Color(0xFFECECEC),
      valueColor: AlwaysStoppedAnimation<Color>(Colors.black.withOpacity(0.65)),
    );
  }
}

class IOSActivityIndicator implements IActivityIndicator {
  @override
  Widget render() {
    // TODO: implement render
    return const CupertinoActivityIndicator();
  }
}

class AndroidSwitch implements ISwitch {
  @override
  Widget render(bool value, ValueSetter<bool> onChanged) {
    // TODO: implement render
    return Switch(value: value, onChanged: onChanged);
  }
}

class IOSSwitch implements ISwitch {
  @override
  Widget render(bool value, ValueSetter<bool> onChanged) {
    // TODO: implement render
    return CupertinoSwitch(value: value, onChanged: onChanged);
  }
}

class AndroidSlider implements ISlider {
  @override
  Widget render(double value, ValueSetter<double> onChanged) {
    // TODO: implement render
    return Slider(value: value, onChanged: onChanged);
  }
}

class IOSSlider implements ISlider {
  @override
  Widget render(double value, ValueSetter<double> onChanged) {
    // TODO: implement render
    return CupertinoSlider(value: value, onChanged: onChanged);
  }
}

在Page中使用时 ，使用抽象类，而不是具体的实例

late IActivityIndicator _activityIndicator;
late ISlider _slider;
late ISwitch _switch;

由于代码的量较多，我就不一一贴出了，如果感兴趣，可以自行下载本文的示例代码 flutter_design_patterns

如果觉得有收获请按如下方式给个 爱心三连：👍：点个赞鼓励一下。🌟：收藏文章，方便回看哦！。💬：评论交流，互相进步！。