原文地址：https://medium.com/flutterpub/exploring-streams-in-flutter-4732e5524dd8
这篇文章主要介绍Flutter中的流是什么以及如何使用。
流是什么
正如Flutter文档上所说的，流提供异步的数据序列，接下来从真实世界中取了解什么是流。
披萨屋的故事
曾几何时，有一个人John非常擅长做pizza，他制作了很多不同种类的披萨，他制作的披萨很好吃，以至于世界各地的人都慕名而来，John有一个小房子用来接受客户的订单然后制作披萨给客户。John有一个女儿Mia来帮助他做生意，John采用了一个非常简单且有效的方式来开展业务。
- Mia从客户手里拿到订单并转给John
- John检查订单看是否有配料以供烘烤
- 客户将在收集室领取披萨，如果没有配料，他们将会被通知“你的披萨无法制作的”。
接下来将列出一些有趣的东西用来有效的理解Stream的概念。
-
烘烤披萨的房子。房子是一个固定的地方，所以只会创建一次，用来接受订单然后烘烤披萨。
-
Mia的唯一责任就是接受命令然后传递给John。
-
John是决策者，他将决定披萨是否可以烘烤，然后将披萨送到收集室。
因此，总的来说，数据按顺序流入流中，然后经过处理，并发送到输出流，接下来我们将上面的故事转换成代码。
Dart中的流
当我们谈论Dart中的流时，我们需要使用Dart提供的async库，该库支持异步编程，并包含创建Streams的所有类和方法。
页面中有四个Button，每一个Button都代表一中披萨种类，如果你点击某一个按钮，就会把订单给Mia，然后Mia将订单转给John，接着John就会制作披萨，然后将披萨放到收集屋，然后客户可以来这里取他的披萨。如果材料没有的话，他可能会收到缺货的消息。
开始写代码
-
创建Flutter项目，如果不知道怎么做，参考这里
-
移除main.dart中的所有代码，然后添加下面的代码：
import 'package:flutter/material.dart';
import 'src/app.dart';
void main() => runApp(new MyApp());
- 此时会出现错误，先不要管，我们接下来会修复它。
- 在lib包下面创建一个src包，接着在src包中创建一个app.dart文件，接着编写下面的代码：
import 'package:flutter/material.dart';
import 'pizza_house.dart';
import 'blocs/provider.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Provider(
child: MaterialApp(
home: new PizzaHouse(),
),
);
}
}
- 在src包下创建pizza_house.dart, 现在先不写任何东西在里面。
- 在src包下创建bloc包，在该包下创建两个文件，分别是bloc.dart和provider.dart, 下面是provider.dart中的代码
import 'package:flutter/material.dart';
import 'bloc.dart';
export 'bloc.dart';
class Provider extends InheritedWidget {
final bloc = Bloc();
Provider({Key key, Widget child}) : super(key: key, child: child);
bool updateShouldNotify(_) => true;
static Bloc of(BuildContext context) {
return (context.inheritFromWidgetOfExactType(Provider) as Provider).bloc;
}
}
该类主要负责在组件中对Bloc的访问。下面是项目结构。
image.png
- 接下来实现bloc.dart,下面就是bloc的完整代码：
import 'dart:async';
class Bloc {
//Our pizza house
final order = StreamController<String>();
//Our collect office
Stream<String> get orderOffice => order.stream.transform(validateOrder);
//Pizza house menu and quantity
static final _pizzaList = {
"Sushi": 2,
"Neapolitan": 3,
"California-style": 4,
"Marinara": 2
};
//Different pizza images
static final _pizzaImages = {
"Sushi": "http://pngimg.com/uploads/pizza/pizza_PNG44077.png",
"Neapolitan": "http://pngimg.com/uploads/pizza/pizza_PNG44078.png",
"California-style": "http://pngimg.com/uploads/pizza/pizza_PNG44081.png",
"Marinara": "http://pngimg.com/uploads/pizza/pizza_PNG44084.png"
};
//Validate if pizza can be baked or not. This is John
final validateOrder =
StreamTransformer<String, String>.fromHandlers(handleData: (order, sink) {
if (_pizzaList[order] != null) {
//pizza is available
if (_pizzaList[order] != 0) {
//pizza can be delivered
sink.add(_pizzaImages[order]);
final quantity = _pizzaList[order];
_pizzaList[order] = quantity-1;
} else {
//out of stock
sink.addError("Out of stock");
}
} else {
//pizza is not in the menu
sink.addError("Pizza not found");
}
});
//This is Mia
void orderItem(String pizza) {
order.sink.add(pizza);
}
}
StreamController
上面的代码主要是用来接收订单，处理订单并且输出。但是有什么方法可以使StreamController成为一个完整的披萨屋，有哪些方法可以用来接收订单，处理订单和输出订单。
image.png
StreamController有两个getter，一个是sink，另一个是stream.sink是Mia在这里接受订单并传递给流，还句话说就是sink会将数据添加到StreamController的流中，现在我们来说一下Stream，它会在做一些处理之后将数据传递给外界。下面的代码就是StreamController的接收器和Stream。
//Our pizza house
final order = StreamController<String>();
//Our collect office
Stream<String> get orderOffice => order.stream.transform(validateOrder);
//This is Mia
void orderItem(String pizza) {
order.sink.add(pizza);
}
接收器有一个add的方法，它将数据添加到流中，这里是顺序添加到流中。orderOffice是一个getter用来在pizza_house.dart中调用，以便将输出提供给客户。
在上面的代码中，你肯定想知道transform的用途，他将调用John处理的订单，然后将处理后的数据传入到流中。John在代码中是validateOrder，validateOrder是StreamTransformer。
//Validate if pizza can be baked or not. This is John
final validateOrder =
StreamTransformer<String, String>.fromHandlers(handleData: (order, sink) {
if (_pizzaList[order] != null) {
//pizza is available
if (_pizzaList[order] != 0) {
//pizza can be delivered
sink.add(_pizzaImages[order]);
final quantity = _pizzaList[order];
_pizzaList[order] = quantity-1;
} else {
//out of stock
sink.addError("Out of stock");
}
} else {
//pizza is not in the menu
sink.addError("Pizza not found");
}
});
StreamTransformer
简单的来说，他将从流中接收传入的订单，并检查订单是否有效。如果订单有效，它将使用sink.add(successOrder)(pizza pizza successfully)方法将输出添加到流中。如果订单无效，它将会添加sink.addError（invalidOrder），告诉客户“您订购的披萨缺货”。
//Pizza house menu and quantity
static final _pizzaList = {
"Sushi": 2,
"Neapolitan": 3,
"California-style": 4,
"Marinara": 2
};
//Different pizza images
static final _pizzaImages = {
"Sushi": "http://pngimg.com/uploads/pizza/pizza_PNG44077.png",
"Neapolitan": "http://pngimg.com/uploads/pizza/pizza_PNG44078.png",
"California-style": "http://pngimg.com/uploads/pizza/pizza_PNG44081.png",
"Marinara": "http://pngimg.com/uploads/pizza/pizza_PNG44084.png"
};
_pizzaList是我们的菜单，它将保存比萨饼的类型以及可以烘烤的总量。 _pizzaImages是一个map，上面有比萨饼屋烤制的不同种类的比萨的图片。
最后我们去实现pizza_house.dart类。
import 'package:flutter/material.dart';
import 'blocs/provider.dart';
class PizzaHouse extends StatelessWidget {
var pizzaName = "";
@override
Widget build(BuildContext context) {
final _bloc = Provider.of(context);
return Scaffold(
appBar: AppBar(
title: Text("Pizza House"),
),
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[menu1(_bloc), menu2(_bloc), orderOffice(_bloc)],
),
),
);
}
menu1(Bloc bloc) {
return Container(
margin: EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
Expanded(
child: RaisedButton(
child: Text("Neapolitan"),
onPressed: () {
bloc.orderItem("Neapolitan");
pizzaName = "Neapolitan";
},
),
),
Container(
margin: EdgeInsets.only(left: 2.0, right: 2.0),
),
Expanded(
child: RaisedButton(
child: Text("California-style"),
onPressed: () {
bloc.orderItem("California-style");
pizzaName = "California-style";
},
),
)
],
),
);
}
menu2(Bloc bloc) {
return Container(
margin: EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
Expanded(
child: RaisedButton(
child: Text("Sushi"),
onPressed: () {
bloc.orderItem("Sushi");
pizzaName = "Sushi";
},
),
),
Container(
margin: EdgeInsets.only(left: 2.0, right: 2.0),
),
Expanded(
child: RaisedButton(
child: Text("Marinara"),
onPressed: () {
bloc.orderItem("Marinara");
pizzaName = "Marinara";
},
),
)
],
),
);
}
orderOffice(Bloc bloc) {
return StreamBuilder(
stream: bloc.orderOffice,
builder: (context, AsyncSnapshot<String> snapshot) {
if (snapshot.hasData) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(
snapshot.data,
fit: BoxFit.fill,
),
Container(
margin: EdgeInsets.only(top: 8.0),
),
Text("Yay! Collect your $pizzaName pizza")
],
);
} else if (snapshot.hasError) {
return Column(
children: <Widget>[
Image.network("http://megatron.co.il/en/wp-content/uploads/sites/2/2017/11/out-of-stock.jpg",
fit: BoxFit.fill),
Text(
snapshot.error,
style: TextStyle(
fontSize: 20.0,
),
),
],
);
}
return Text("No item in collect office");
},
);
}
}
build方法中第一行是声明bloc实例，使用此实例，我们可以下订单并检查collect office总的输出。我们已经将下不同类型的订单的功能添加到了每个button的onPressed方法中，在onPressed方法中我们调用orderItem，然后会调用sink.add方法。为了向客户展示输出的数据，这里我们需要使用StreamBuilder。
StreamBuilder将从orderOffice()方法中监听Stream，如果有任何可用数据，它将根据来自流的数据返回一个widget，StreamBuilder有两个参数，一个是stream，另一个是builder，stream接收一个从bloc中返回的一个流，即orderOffice。StreamBuilder将监听任何进来的新数据，builder有两个参数，context和snapshot，snapshot就像是数据提供者，它将从流中获取数据，以便我们可以处理它并返回要显示的正确组件。正如你看到的那样，我们可以通过hasData来判断是否有数据，从而正确的显示图片或者文字。
在整个应用程序中没有使用过一个StatefulWidget，仍然能够改变应用程序的状态。换句话说，使用Streams能够让应用程序被动反应。当您想要监听数据中的更改并根据数据做出反应时，流非常有用。
网友评论