在我的flutter应用程序中使用StreamBuilder和Navigator,但是首页构建了两次

时间:2019-01-13 02:03:40

标签: dart flutter

伙计们。 我正在使用StreamBuilder处理异步数据。

这里是一个演示,演示第一页上的一个按钮,单击该按钮将导航到第二页。完整代码如下。

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

void main() {
  runApp(
    new MaterialApp(
      title: 'First Page',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new FirstPage(),
    ),
  );
}

class FirstPage extends StatelessWidget {
  final StreamController<String> _streamController = StreamController<String>();

  @override
  Widget build(BuildContext context) {
    print('first page start to build ..................');
    StreamBuilder builder = new StreamBuilder(
        stream: _streamController.stream,
        builder: (context, asyncSnapshot) {
          if (asyncSnapshot.hasData) {
            print('first page data returned ..................');
            return RaisedButton(
              child: Text('go to the second page'),
              onPressed: () {
                print('navigate to second page ..................');
                  Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => SecondPage()),
                );
              },
            );
          } else {
            return Text('waitting to update');
          }
        });
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('First Page'),
      ),
      body: Column(
        children: <Widget>[
          RaisedButton(
            child: Text('update state'),
            onPressed: () {
              _streamController.add('hello world');
            },
          ),
          builder,
        ],
      ),
    );
  }

  dispose() {
    _streamController.close();
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('second page start to build ..................');
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Second Page'),
      ),
      body: Text('this is second page'),
    );
  }
}

以下是操作步骤:

  1. 点击首页上的“更新状态”按钮。
  2. 将显示“转到第二页”按钮。
  3. 单击“转到第二页”按钮将导航到第二页 页面。
  4. 然后单击第二页左上角的按钮以转到 返回首页。

控制台将显示以下内容:

I/flutter ( 3674): first page start to build ..................
Reloaded 1 of 487 libraries in 1,734ms.
I/flutter ( 3674): first page data returned ..................
I/flutter ( 3674): navigate to second page ..................
I/flutter ( 3674): second page start to build ..................
I/flutter ( 3674): first page data returned ..................
I/flutter ( 3674): first page data returned ..................

我的问题是:

  1. 第一页将在第二页构建后再次构建。为什么?
  2. 当我回到第一页时,第一页将再次建立, 正常吗?

请帮助我。

1 个答案:

答案 0 :(得分:2)

这是预期的行为。

构建窗口小部件的次数永远不应改变应用程序的行为,并且最多是性能优化。

如果这导致您遇到任何问题,那么您可能在$ python3 example.py > Retrieving 2 using session <aiohttp.client.ClientSession object at 0x10917bfd0> > Retrieving 1 using session <aiohttp.client.ClientSession object at 0x10917bfd0> OrderedDict([('t1', '{"userId": 1, "id": 1, "title": "delectus aut autem", "completed": false}'), ('t2', '{"userId": 1, "id": 2, "title": "quis ut nam facilis et officia qui", "completed": false}')]) 方法中做错了什么。在这种情况下,您可能需要阅读How to deal with unwanted widget build?