在我们开发多屏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的调用顺序与方法覆盖）；
注：本文原文出自 原文地址；在原文基础上加以补充理解与完善，完善了原文中没有写全的例子代码；
网友评论