Flutter Provider and Streams [翻译]

2,500 阅读2分钟

原文:medium.com/flutterpub/…

不是全部翻译,因为这个老外废话比较多

正文开始

除了StreamBuilder之外,还有没有其他办法收听实时数据?

最近,Flutter团队在Google I / O 2019上宣布了一个名为Provider的状态管理软件包。

使用方式,添加如下依赖到你的pubspec.yaml文件

provider: ^2.0.0+1

在以前,我们是这样使用StreamBuilder来监听数据的:

StreamBuilder(
  stream: //YOUR STREAM, 
  builder: (BuildContext context, AsyncSnapshot snapshot){ 
  return //YOUR CHILD; 
})

如果换做provider的话,是这样的:

StreamProvider<LocationModelNormal>.value(
    initialData: LocationModelNormal.initialData(),
    stream: locationStreamInstance.specificLocation(_secondWonder),
    child: SecondStreamWidget(),
),

使用步骤:

1. 使用StreamProvider的时候,我们需要指定我们监听的对象类型

上面例子的LocationModelNormal代码如下:

class LocationModelNormal {
  final String name;

  final String url;

  final GeoPoint coordinates;

  final String videoURL;

  LocationModelNormal({
    this.name,
    this.url,
    this.coordinates,
    this.videoURL,
  });

  factory LocationModelNormal.fromMap(Map<String, dynamic> data) {
    return LocationModelNormal(
      name: data['name'] ?? '',
      url: data['url'] ?? '',
      coordinates: data['location'] ?? null,
      videoURL: data['link'] ?? '',
    );
  }

  factory LocationModelNormal.initialData() {
    return LocationModelNormal(
      coordinates: null,
      name: '',
      videoURL: '',
      url:'',
    );
  }
}

2. 然后,我们提供initialData

在我们的例子中,我们传递的是LocationModelNormal.initialData()(代码在上面)

3. 最后,我们提供child widget

完成了,和StreamBuilder很相似

如何访问数据

现在我们写好了StreamProvider,我们需要在child中显示我们提供的数据,获取数据的方式:

var data = Provider.of<LocationModelNormal>(context);

在这个示例里,我们学习到如果想要在stream里获取我们想要的数据,使用Provider.of<Type>(context)

在我们的例子里,Type = LocationModelNormal

如果需要提供更多的值,可以使用MultiProvider

MultiProvider(
  providers: [
    Provider<Foo>.value(value: foo),
    Provider<Bar>.value(value: bar),
    Provider<Baz>.value(value: baz),
  ],
  child: someWidget,
)

本文结束


题外话:这些状态管理,其实没什么区别,都是用context.ancestorWidgetOfExactType(type);类似的方法去查找上层的节点中的数据,现在网上的这些bloc、provide等等,都是这样,自己写一个也很容易,可以看我之前的文章:教你如何实现Flutter的BLoC框架

欢迎加入Flutter开发群457664582,点击加入,大家一起学习讨论