Flutter StreamBuilder Widget使用详解

Flutter的StreamBuilder Widget也是一种非常有用的异步数据加载控件,它与FutureBuilder类似,但是更适用于需要不断更新的异步数据,例如实时聊天、传感器数据等。

StreamBuilder的基本使用方法是,在Widget树中使用StreamBuilder Widget,将异步操作的Stream作为参数传递进去,并在builder函数中构建UI组件。当Stream操作更新数据时,builder函数会被调用,返回一个新的Widget,用于展示更新后的异步数据。

下面我们来看一个例子:

Stream<String> _loadData() async* {
  // 模拟一个持续不断的异步操作,比如实时从服务器获取数据
  while (true) {
    await Future.delayed(Duration(seconds: 2));
    yield "Hello, World!";
  }
}

Widget build(BuildContext context) {
  return StreamBuilder<String>(
    stream: _loadData(), // 异步操作的Stream
    builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
      // snapshot中包含了异步操作的结果
      if (snapshot.connectionState == ConnectionState.waiting) {
        // 正在加载中
        return CircularProgressIndicator();
      } else if (snapshot.hasError) {
        // 加载出错
        return Text("Error: ${snapshot.error}");
      } else {
        // 加载成功
        return Text(snapshot.data);
      }
    },
  );
}

上面的代码中,我们定义了一个名为_loadData的异步操作,用于模拟持续不断的从服务器获取数据的操作。在build函数中,我们使用了StreamBuilder Widget,并将异步操作的Stream作为参数传递进去。在builder函数中,我们根据异步操作的结果构建UI组件,如果正在加载中,则返回一个CircularProgressIndicator组件,如果加载出错,则返回一个包含错误信息的Text组件,如果加载成功,则返回一个展示异步数据的Text组件。

除了上面的三种状态外,AsyncSnapshot还提供了一种叫做hasData的状态,用于判断异步操作是否已经更新并且成功,并且返回了一个非空的数据。如果是这种状态,则可以直接使用snapshot.data访问异步数据。

除了builder函数,StreamBuilder还提供了一个initialData参数,用于设置Stream操作的初始值,以及一个stream参数,用于设置Stream操作。如果stream参数不为空,则会覆盖传入StreamBuilder的Stream操作。

StreamBuilder Widget是Flutter中非常重要的一种异步数据加载控件,掌握它的使用方法可以方便开发者在应用程序中快速地处理持续不断的异步数据。

powered by Gitbook© 2023 编外计划 | 最后修改: 2023-11-24 03:36:59

results matching ""

    No results matching ""