Flutter 性能优化3

适用于多次数据变化

既然有了FutureBuilder 一次性的数据变化更新视图,那就有多次,那就来看看StreamBuilder吧

import 'dart:async';

import 'package:flutter/material.dart';

class StatePage extends StatefulWidget {
  @override
  StatePageState createState() => new StatePageState();
}

class StatePageState extends State {
  StreamController streamController = new StreamController();
  int index = 0;

  @override
  Widget build(BuildContext context) {
    print('test StatePageState build');
    return Scaffold(
        appBar: AppBar(
          title: Text('statPage', style: TextStyle(fontSize: 16)),
          centerTitle: true,
        ),
        body: Align(
          child: Column(
            children: [
              StreamBuilder(
                stream: streamController.stream,
                initialData: index,
                builder: (context, snapshot) {
                  print('test FutureBuilder builder');
                  return Text("this number:${snapshot.data}");
                },
              ),
              RaisedButton(
                child: Text('add $index'),
                onPressed: countChange,
              ),
              RaisedButton(
                child: Text('add2'),
                onPressed: add,
              ),
            ],
          ),
        ));
  }

  void countChange() {
    streamController.add(++index);
  }

  void add() {
    setState(() {
      index += 10;
    });
  }

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

StreamBuilder继承了StreamBuilderBase,StreamBuilderBase又继承了StatefulWidget,所以StreamBuilder中的builder中的视图丢给了一个StatefulWidget,在这个StatefulWidget中接收外面传进来的一个Stream,用于监听数据变化更新,可以看_StreamBuilderBaseState中_subscribe代码

 void _subscribe() {
    if (widget.stream != null) {
      _subscription = widget.stream.listen((T data) {
        setState(() {
          _summary = widget.afterData(_summary, data);
        });
      }, onError: (Object error) {
        setState(() {
          _summary = widget.afterError(_summary, error);
        });
      }, onDone: () {
        setState(() {
          _summary = widget.afterDone(_summary);
        });
      });
      _summary = widget.afterConnected(_summary);
    }
  }

当第一个RaisedButton 点击执行countChange更新stream的值后,_StreamBuilderBaseState中_subscribe方法中widget.stream.listen 会监听到数据变化,执行setState更新当前StatefulWidget,也就是会调用我们定义的StreamBuilder中builder方法

但是当我们自己setState的时候,StreamBuilder中的builder方法同样会被执行,因为这个小部件在我们自己build中,但是这个时候取的snapshot.data并变化,因为snapshot.data取的是stream中的值,这个stream的值并没有发生改变

你可能感兴趣的:(Flutter 性能优化3)