flutter streambuilder

Flutter中的StreamBuilder是一个非常有用的组件，它允许开发者根据流（Stream）的数据动态地构建用户界面。StreamBuilder是Flutter框架中响应式编程的一个重要组成部分，它能够实时地响应数据流的变化，并更新UI。

基础概念

Stream: 在Flutter中，Stream是一个异步的数据序列，它可以发出多个值，这些值可以是连续的，也可以是离散的。Stream可以发出三种类型的事件：数据事件（data）、错误事件（error）和完成事件（done）。

StreamBuilder: StreamBuilder是一个Widget，它监听一个Stream，并在Stream发出新数据时重新构建其子树。StreamBuilder通过调用stream属性指定的Stream来获取数据，并使用builder属性指定的函数来构建UI。

优势

实时更新: StreamBuilder能够实时响应数据流的变化，使得UI能够及时地反映数据的最新状态。
高效性: StreamBuilder只在必要时重建UI，避免了不必要的重绘，提高了应用的性能。
简洁性: 使用StreamBuilder可以简化代码结构，使得逻辑更加清晰。

类型

StreamBuilder可以监听不同类型的Stream，例如：

Single-subscription Stream: 只能被订阅一次。
Broadcast Stream: 可以被多个监听者同时订阅。

应用场景

实时聊天应用: 监听消息流来实时更新聊天界面。
股票行情应用: 实时更新股票价格。
传感器数据: 如心率监测，实时显示传感器读数。
后台任务进度: 显示长时间运行任务的进度。

示例代码

以下是一个简单的StreamBuilder示例，它创建了一个每秒增加的计数器：

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

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

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

class CounterStream extends StatefulWidget {
  @override
  _CounterStreamState createState() => _CounterStreamState();
}

class _CounterStreamState extends State<CounterStream> {
  final StreamController<int> _controller = StreamController<int>();
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    _startTimer();
  }

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

  void _startTimer() {
    Timer.periodic(Duration(seconds: 1), (Timer timer) {
      setState(() {
        _counter++;
      });
      _controller.add(_counter);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: StreamBuilder<int>(
        stream: _controller.stream,
        initialData: _counter,
        builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
          if (snapshot.hasData) {
            return Text('Counter: ${snapshot.data}');
          } else if (snapshot.hasError) {
            return Text('Error: ${snapshot.error}');
          }
          return CircularProgressIndicator();
        },
      ),
    );
  }
}