美文网首页
Flutter 性能优化3

Flutter 性能优化3

作者: 果果人8023 | 来源:发表于2019-07-16 14:50 被阅读0次

    适用于多次数据变化

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

    import 'dart:async';
    
    import 'package:flutter/material.dart';
    
    class StatePage extends StatefulWidget {
      @override
      StatePageState createState() => new StatePageState();
    }
    
    class StatePageState extends State<StatePage> {
      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: <Widget>[
                  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

          本文链接:https://www.haomeiwen.com/subject/nnttlctx.html