RefreshIndicator内的StreamBuilder多次渲染子小部件，如何避免? [英] StreamBuilder inside RefreshIndicator render child widget many times, how to avoid it?

问题描述

当我将StreamBuilder放在RefreshIndicator中时，它通过滚动动作多次渲染小部件.我想避免很多事情，因为 StreamBuilder 中的图表会进行多次动画处理.

When I put StreamBuilder in RefreshIndicator, it render widgets many times with scroll actions. I want to avoid many it because Charts inside StreamBuilder animate many times.

我在以下环境中进行了测试.

I tested with following environment.

$ flutter doctor -v
[✓] Flutter (Channel stable, v1.2.1, on Mac OS X 10.13.6 17G5019, locale en-JP)
    • Flutter version 1.2.1 at /Users/matsue/work/flutter/flutter_macos_v1.0.0-stable
    • Framework revision 8661d8aecd (4 weeks ago), 2019-02-14 19:19:53 -0800
    • Engine revision 3757390fa4
    • Dart version 2.1.2 (build 2.1.2-dev.0.0 0a7dcf17eb)

@override
Widget build(BuildContext context) {
  return Container(
    color: Colors.white,
    child: NestedScrollView(
      headerSliverBuilder: (context, innerBoxScrolled) => [
            const SliverAppBar(
              title: Text('Title'),
            ),
          ],
      body: RefreshIndicator(
        onRefresh: () async {
          print('Will refresh');
          await Future<void>.delayed(Duration(seconds: 2));
          print('Did refresh');
        },
        child: StreamBuilder(
          stream: _streamController.stream,
          builder: (context, snapshot) => ListView.builder(
                itemCount: 30,
                itemBuilder: (context, index) {
                  print('Render $index');
                  return Text('index $index');
                },
              ),
        ),
      ),
    ),
  );
}

我想在 RefreshIndicator 内放置一些 StreamBuilder ，而无需多次渲染小部件.

I want to put some StreamBuilder inside RefreshIndicator without widgets rendering many times.

推荐答案

看起来StreamBuilder在流上重新订阅并触发重新渲染.将其与RefreshIndicator交换有助于:

It looks like StreamBuilder re-subscribes on the stream and triggers re-rendering. Swapping it with RefreshIndicator helps:

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: NestedScrollView(
        headerSliverBuilder: (context, innerBoxScrolled) => [
              const SliverAppBar(
                title: Text('Title'),
              ),
            ],
        body: StreamBuilder(
          key: streamBuilderKey,
          stream: _streamController.stream,
          builder: (context, snapshot) {
            print(snapshot.connectionState);
            return RefreshIndicator(
              onRefresh: () async {
                print('Will refresh');
                await Future<void>.delayed(Duration(seconds: 2));
                _streamController.add(null);
                print('Did refresh');
              },
              child: ListView.builder(
                itemCount: 30,
                itemBuilder: (context, index) {
                  print('Render $index');
                  return Text(
                    'index $index',
                    key: Key('$index'),
                  );
                },
              ),
            );
          },
        ),
      ),
    );
  }

这篇关于RefreshIndicator内的StreamBuilder多次渲染子小部件，如何避免?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！