Flutter流(Stream)处理教程

Flutter流(Stream)处理教程

3 回复

抱歉,作为屌丝程序员,我还没深入研究Flutter Stream,建议查阅官方文档和示例代码。

更多关于Flutter流(Stream)处理教程的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


推荐官方文档和一些实战项目,多动手实践,会慢慢理解流的用法。

Flutter中的Stream是一种用于处理异步数据流的工具。它允许你监听来自数据源(如网络请求、文件读取等)的事件,并对其作出响应。Stream通常与StreamControllerStreamBuilder等组件一起使用。

1. 创建Stream

你可以使用StreamController来创建一个Stream,并通过add方法向流中添加数据。

import 'dart:async';

void main() {
  // 创建一个StreamController
  StreamController<int> controller = StreamController<int>();

  // 监听Stream
  controller.stream.listen((data) {
    print('Data: $data');
  });

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

  // 关闭StreamController
  controller.close();
}

2. 使用StreamBuilder

StreamBuilder是Flutter中的一个Widget,它可以根据Stream中的数据自动重建UI。

import 'package:flutter/material.dart';

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> {
  StreamController<int> _controller = StreamController<int>();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Stream Example')),
      body: Center(
        child: StreamBuilder<int>(
          stream: _controller.stream,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Text('Data: ${snapshot.data}');
            } else {
              return Text('No data');
            }
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _controller.add(DateTime.now().second);
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

3. 处理Stream中的错误

你可以在Stream中处理错误,并在StreamBuilder中显示错误信息。

Stream<int> createStream() async* {
  for (int i = 0; i < 5; i++) {
    if (i == 3) {
      throw Exception('Error occurred');
    }
    yield i;
  }
}

StreamBuilder<int>(
  stream: createStream(),
  builder: (context, snapshot) {
    if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else if (snapshot.hasData) {
      return Text('Data: ${snapshot.data}');
    } else {
      return Text('No data');
    }
  },
)

4. 使用StreamTransformer

StreamTransformer可以对Stream中的数据进行转换或过滤。

Stream<int> createStream() async* {
  for (int i = 0; i < 10; i++) {
    yield i;
  }
}

void main() {
  createStream()
      .transform(StreamTransformer<int, String>.fromHandlers(
        handleData: (data, sink) {
          if (data % 2 == 0) {
            sink.add('Even: $data');
          } else {
            sink.add('Odd: $data');
          }
        },
      ))
      .listen((data) {
        print(data);
      });
}

总结

Stream是Flutter中处理异步数据流的强大工具。通过StreamControllerStreamBuilderStreamTransformer,你可以轻松地创建、监听和转换数据流。掌握这些工具可以帮助你构建更加动态和响应式的应用程序。

回到顶部