Flutter 中 streams 是什么？有几种 streams？有什么场景用到它？

发布于 1周前 作者 nodeper 来自 Flutter

Flutter 中 Streams 是什么？有几种 Streams？有什么场景用到它？

什么是 Stream？

在 Flutter 中，Stream 是一种异步数据流的抽象，用于处理一系列异步事件。与 Future 类似，Stream 也是 Dart 中处理异步操作的重要工具，但它可以产生多个值，而不仅仅是单个值。Stream 表示一个可以在时间上推送一系列事件（数据）的异步序列。这些事件可以是数据、错误或流的完成信号。Stream 允许你以异步的方式处理和响应这些事件。

Stream 的类型

在 Dart 中，Stream 主要有两种订阅模式：

  1. 单订阅流（Single-subscription Stream）：

    • 只能有一个监听器（Listener）。
    • 适用于只需要一次性处理事件的场景，例如从一个数据源获取数据。
    • 一旦流被消费，无法再次监听。

  2. 多订阅流（Broadcast Stream）：

    • 可以有多个监听器。
    • 适用于需要多个组件共享相同数据源的场景，例如 WebSocket 消息、传感器数据等。
    • 每个监听器都可以独立接收数据。

Stream 的常用场景

Stream 可以应用于多个场景，以下是一些常见的用例：

  • 实时数据更新：例如，实时聊天应用程序中，通过 WebSocket 接收新消息，使用 Stream 处理消息更新。
  • 用户输入处理：监听用户输入（如文本框中的输入），在用户输入时实时更新搜索结果或验证输入。
  • 定时器和动画：使用 Stream 创建定时器，定时推送数据（如每秒钟更新一次）用于动画或游戏逻辑。
  • 传感器数据：在移动应用中，使用传感器（如 GPS、加速度计）生成的数据流来处理位置或运动状态的变化。
  • 数据库查询：在与数据库交互时，可以使用 Stream 处理查询结果，允许实时更新 UI。

使用 Stream 的示例

以下是一个简单的使用 Stream 的例子，演示如何在 Flutter 中监听一个流并更新 UI：

import 'package:flutter/material.dart';
import 'dart:async';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stream Demo'),
        ),
        body: StreamDemo(),
      ),
    );
  }
}

class StreamDemo extends StatefulWidget {
  @override
  _StreamDemoState createState() => _StreamDemoState();
}

class _StreamDemoState extends State<StreamDemo> {
  // 创建一个控制器来管理我们的 Stream
  final StreamController<String> _controller = StreamController<String>();

  @override
  void dispose() {
    // 清理资源，关闭 StreamController
    _controller.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 使用 StreamBuilder 来监听 Stream 并更新 UI
        StreamBuilder<String>(
          stream: _controller.stream,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Text(
                'Received: ${snapshot.data}',
                style: TextStyle(fontSize: 24),
              );
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return Text('Waiting for data...');
            }
          },
        ),
        ElevatedButton(
          onPressed: () {
            // 向 Stream 中添加数据
            _controller.add('Hello, Stream!');
          },
          child: Text('Send Data'),
        ),
      ],
    );
  }
}

总结

在 Flutter 中，Stream 是一种处理异步数据流的强大工具，适用于需要处理多个值或事件的场景。通过理解 Stream 的类型和使用场景，开发者可以有效地处理异步数据更新和用户交互，构建更加流畅和响应的应用程序。


更多关于Flutter 中 streams 是什么？有几种 streams？有什么场景用到它？的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter 中 streams 是什么？有几种 streams？有什么场景用到它？的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，streams 是一种用于处理异步数据流的重要机制。它们允许你在数据变化时自动通知监听者，非常适合处理实时数据更新或事件驱动的应用场景。Flutter中的streams主要通过Dart语言的Stream和Sink接口实现。

Streams的类型

Flutter（基于Dart）中主要有两种类型的streams：

  1. Single Subscription Streams (Stream<T>):

    • 这种流只能被一个监听者订阅一次。如果尝试再次订阅，通常会抛出异常。
    • 常见的实现有Future.asStream()，它将一个Future转换为一个只包含单个元素的流。

  2. Broadcast Streams (BroadcastStream<T>):

    • 这种流可以被多个监听者同时订阅，非常适合需要共享数据流的场景。
    • 常见的实现有StreamController，它允许你创建和控制一个可广播的流。

Streams的实现和使用

创建一个简单的Stream

你可以使用StreamController来创建一个可控制的流，无论是单订阅还是广播类型。以下是一个简单的广播流的例子：

import 'dart:async';

void main() async {
  // 创建一个StreamController，用于控制流的发送
  final controller = StreamController<int>.broadcast();

  // 订阅流
  controller.stream.listen((event) {
    print('Received event: $event');
  });

  // 向流中添加数据
  controller.add(1);
  controller.add(2);

  // 关闭流
  await controller.close();
}

使用Future作为Stream

Future可以被转换为一个流，这样你就可以使用流的监听机制来处理异步结果：

import 'dart:async';

void main() async {
  // 一个模拟异步操作的Future
  Future<int> future = Future.delayed(Duration(seconds: 1), () => 42);

  // 将Future转换为Stream
  Stream<int> stream = future.asStream();

  // 订阅流并处理结果
  await stream.forEach((event) {
    print('Future result: $event');
  });
}

Streams的应用场景

Streams在Flutter中有许多应用场景，包括但不限于：

  1. 实时数据更新：例如，从网络API获取实时数据并更新UI。
  2. 事件监听：例如，监听按钮点击事件或其他用户交互事件。
  3. 状态管理：在复杂的应用中，使用流来管理应用状态，如Bloc模式或RxDart库中的实现。
  4. 动画和过渡：在动画中，使用流来驱动动画帧的更新。

示例：结合Flutter UI使用Stream

以下是一个简单的Flutter示例，展示如何使用StreamController来更新UI：

import 'package:flutter/material.dart';
import 'dart:async';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StreamExample(),
    );
  }
}

class StreamExample extends StatefulWidget {
  @override
  _StreamExampleState createState() => _StreamExampleState();
}

class _StreamExampleState extends State<StreamExample> {
  final controller = StreamController<String>.broadcast();

  @override
  void initState() {
    super.initState();
    // 模拟数据流
    Timer.periodic(Duration(seconds: 1), (timer) {
      controller.add('Hello, Flutter!');
    });

    // 监听数据流并更新UI
    controller.stream.listen((event) {
      setState(() {
        _message = event;
      });
    });
  }

  String _message = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Stream Example')),
      body: Center(
        child: Text(_message),
      ),
    );
  }

  @override
  void dispose() {
    controller.close();
    super.dispose();
  }
}

在这个示例中，我们创建了一个StreamController来定期发送消息，并在Flutter的UI中显示这些消息。通过setState方法，我们确保每次新消息到达时，UI都会更新。

回到顶部