Flutter的最佳实践：mixins 与 基础类

在我们开发多屏app的时候，我们更倾向于复用一些类的代码去完成一些功能，让代码能够“高复用”，比如：全局错误提示、页面的公共视图部分的复用、响应式编程（Bloc）里面的依赖逻辑等。使用抽象类abstract基本上就能完成这些功能，但是问题来了，如果页面上的公共部分我不想用到所有页面，只想在特定的页面上用，那该怎么办呢? 比如AppBar, 部分页面不需要公共的，而需要自定义，因为一个class类只能是一个类的子类，而我们需要更灵活的类的组合，这就是我们为什么需要mixin。

mixins 与 基础类：介绍

Mixins 让我们在脱离父类子类关系约束的条件下给类添加一些“新功能”，允许我们在同一个类中有一个父级类和多个mixin组件。然而，因为它不是我们类的父类，所以mixins不允许有任何构造函数声明。你可以阅读更多相关与mixin的文章 What are mixins?，或者查看官方文档 documentation;
mixin到底是怎么用的？让我们先举一个例子，新建一个abstract class Person：

abstract class Person {
  void think() {
    print("Hmm, I wonder what I can do today");
  }
}

我们可以用extend关键字把这个类作为父类来使用，比如：

class Mike extends Person {}

然后，我们初始化这个类，并且调用父类的方法 think()：

void main() {
  var mike = Mike();
  mike.think(); // prints: "Hmm, I wonder what I can do today"
}

但是我们要这么给Mike添加一些其他“新功能”呢？比如Mike是一位 coder ，他有coder的一些特性，但不是所有人都有，该怎么办呢？ mixin就能解决这个问题。

首先，我们需要创建一个mixin类并添加一我们需要的新的方法：

mixin Coder {
  void code() {
    print("Coding intensifies");
  }
}

使用关键字with,我们能将这个“新功能”添加给Mike:

class Mike extends Person with Coder {}

并且，与父类一样，我们可以调用在Coder中创建的所有函数：

void main() {
  var mike = Mike();
  mike.code(); // prints: "Coding intensifies"
}

现在，每一个使用 mixin coder的类都拥有coder的方法，然而这带来了一个问题：这意味着，如果我们有一个带有子级Squirrel的父类Animal，那么我们也可以拥有一个可以code（）方法的Squirrel！为了防止这种情况，我们可以使用关键字on将mixin的使用“锁定”到一个类以及从该类继承的所有类：

mixin Coder on Person{
  void code() {
    print("Coding intensifies");
  }
}

这相当于为我们提供了一个强大的工具：现在我们可以覆盖重写在Person类中设置的方法用来添加或扩展其功能。

mixin Coder on Person{
  //...

  @override
  void think() {
    super.think();
    print("I'm going to code today!");
  }
}

调用super.think（）可确保我们仍然可以调用Person中定义的代码，上面的代码扩展了Mike类的think()方法将会输出：

Hmm, I wonder what I can do today
I'm going to code today!

通过掌握基类abstract和mixin的概念，我们可以将它们灵活的应用于Flutter app中。

mixins 与 基础类：一个实际的常用例子

先试着想一下这种情况我们在flutter app中应该怎么做：
在app中我们有两个页面是这样的：

我们的app有几个屏幕如上面显示的那样。我们想共用每个屏幕的AppBar和background，我们可以使用mixin解决问题。

在这种情况下，我们都定义了屏幕标题，我们将创建一个基类，该基类具有一种提供屏幕名称的方法，该基类称为BasePage。我们也将仅在StatefulWidgets中应用mixins，因为我们的类将维护并更改其状态。这样，我们创建了两个用于页面的类：BasePage和BaseState <BasePage>分别继承StatefulWidget和State <StatefulWidget>。

abstract class BasePage extends StatefulWidget {
  BasePage({Key key}) : super(key: key);
}

// TODO: Page为命名泛型 继承 BasePage,    BaseState作为抽象基类，也会被子类继承，所以传入泛型限制参数类型
abstract class BaseState<Page extends BasePage> extends State<Page> {
  String screenName();
}

我们现在创建一个自定义mixin BasicPageMixin，在其中定义页面的背景和标题名称。

// TODO: BasicPage 是一个mixin,作用于BaseState和其基类, 抽取渲染页面公共部分
mixin BasicPage<Page extends BasePage> on BaseState<Page> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(screenName()),
        ),
        body: Container(
          child: body(),
          color: Colors.amber,
        ));
  }

  Widget body();
}

由于body（）方法没有实例，因此使用此mixin的每个类都必须实现它，以确保我们不会忘记在页面中添加body（）。

在屏幕上面我们看到了FloatingActionButton，但是我们不是每个屏幕都需要展示它，该怎么办呢？我们可以声明一个新方法fab()，默认的渲染输出一个空的Container。如果继承的子类需要它，那么子类可以通过@override重写fab()来添加一个FloatingActionButton。

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(screenName()),
        ),
        body: Container(
          child: body(),
          color: Colors.amber,
        ));
        floatingActionButton: fab(),
  }
   
  // NOTE: 这里没有在基类中初始化是因为渲染wedget 尽量写在子组件state中, 更好的状态管理,更好的性能
  // TODO: body()子类必须实现
  Widget body();
  // TODO: fab()子类可选实现
  Widget fab() => Container();
}

我们的mixin 已经创建好了， 我们来通过它新建一个页面：

class MyMixinHomePage extends BasePage {
  MyMixinHomePage({Key key}) : super(key: key);
  @override
  _MyMixinHomePageState createState() => _MyMixinHomePageState();
}

class _MyMixinHomePageState extends BaseState<MyMixinHomePage> with BasicPage{
  @override
  String screenName() => "Home";

  @override
  Widget body() {
    return Center(child: Text("This is a basic usage of a mixin"));
  }
}

有了这个，我们现在只需要声明一个body（）和一个可能在屏幕中使用的fab（）小部件，从而节省了几十行代码。very nice !

组合 mixins

扩展一项新功能，我们的某些页面将请求服务器调用API，并且如果发生错误，我们需要以Snackbar的形式显示错误消息。此外，我们决定使用BLoC（响应式编程）体系结构，在该体系结构中，我们需要在创建每个页面时注入一个新的功能模块（也就是错误提示）。这两个问题将需要执行以下步骤：

注：关于响应式编程的知识请自行查阅，这里可以简单的理解为异步的全局事件监听机制。

• 在我们的BasePage构造函数中注入BLoC功能模块，以至于子类都有BLoC功能
• 在BaseState新建全局状态GlobalKey<ScaffoldState>
• 创建一个新的mixin，使我们可以使用Snackbar在页面中显示BLoC发送的错误消息

我们新建BaseBloc，里面至提供数据的发送方法sink， 和数据的监听方法stream:

abstract class BaseBloc {
  final StreamController<String> _errorSubject = StreamController<String>();

  Sink<String> get errorSink => _errorSubject.sink;

  Stream<String> get errorStream => _errorSubject.stream;
}

因为对于bloc我们暂时没有其他的任何交互 ，我们的HomeBloc紧紧是继承它：

// TODO: 抽象类只能被继承，子类实例化后实现内部方法；
class HomeBloc extends BaseBloc {}

我们通过更改BasePage的构造函数让它初始化包含bloc模块。这将使我们也更改所有对其进行扩展的子类，以将bloc添加到子类构造函数中。 bloc参数用作泛型类型，以便扩展它的每个子类都可以声明正确的bloc的类型。这可以确保在BaseState中调用它时，我们将获得正确的bloc类型，从而允许我们访问bloc其方法。

// TODO: 传入Bloc 命名泛型, 以限制bloc的类型
abstract class BasePage<Bloc extends BaseBloc> extends StatefulWidget {
  Bloc bloc;
  BasePage({Key key, this.bloc}) : super(key: key);
}

之后在BaseState里面，我们声明一个scaffoldKey状态让它用来显示一个展示Snackbar的ScaffoldWidget：

abstract class BaseState<Page extends BasePage> extends State<Page> {
  String screenName();
  GlobalKey<ScaffoldState> scaffoldKey = GlobalKey();
}

mixin的一个很奇特的特性是，如果将它们“链接”到一个类，则它们可以覆盖其方法。这很有用，因为在StatefulWidget中，我们可以在initState方法中侦听bloc发出来的数据流。这样，为了显示错误消息，我们可以创建一个mixin来覆盖initState方法，并提供一些方法让得到的消息显示在Snackbar：

mixin ErrorHandlingMixin<Page extends BasePage> on BaseState<Page> {
  @override
  void initState() {
    super.initState();
    widget.bloc.errorStream
        .listen((error) => showErrorSnackbar(error, scaffoldKey.currentState));
  }

  void showErrorSnackbar(String event, ScaffoldState context) {
    print('scaffoldKey ${scaffoldKey.currentWidget}');
    if (event != null) {
      context.showSnackBar(new SnackBar(content: new Text(event)));
    }
  }
}

最后我们把它在BasicPage添加之后添加在我们的 MyMixinHomePage中：

class MyMixinHomePage extends BasePage<HomeBloc> {
  // TODO: HomeBloc实例化基类 重新赋值给bloc;
  MyMixinHomePage({Key key}) : super(key: key, bloc: HomeBloc());

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends BaseState<MyMixinHomePage> with BasicPage, ErrorHandlingMixin {
  @override
  String screenName() => "Home";

  @override
  Widget fab() => FloatingActionButton(
        child: Icon(Icons.error),
        onPressed: (){
          widget.bloc.errorSink.add('A error message!');
        },
      );

  @override
  Widget body() {
    return Center(
      child: Text("This is a basic usage of a mixinss"),
    );
  }
}

结语

最后我们发现，我们用了两个mixin和基础类abstract class，共用了我们app中的很多代码。

也许我们不需要为应用程序共用基本的UI，但是我们可以使用诸如ErrorHandlingMixin之类的mixin向用户提供错误反馈、全局loading显示、检测用户当前是否登录的显示等！

但是，同时创建基类和mixins是一个需要仔细考虑的过程，否则我们可能会在调用在基类和mixins中声明的一个方法时，编译器不知道选择哪一个（注意mixin的调用顺序与方法覆盖）；

注：本文原文出自 原文地址；在原文基础上加以补充理解与完善，完善了原文中没有写全的例子代码；