Question

假设我有一个包含主页和几个非常相似的子页面的多页面应用程序。这些子页面中的每个子页面都将具有生成相似数据的文本输入。我想从主页显示所有这些数据。

编辑：在下面的代码中，我们可以假设“ BottomHalf”是第二页。

我无法访问主页上子页面的文本控制器。

编辑：让我们假设我要做的就是在BottomHalf中显示_MyHomePageState中的_counter。

我认为它就像调用object.variable一样简单，但我想不是。在寻找答案的过程中，我遇到了Streams，这听起来很有希望，但是我不确定在这种情况下是否太复杂了。我也遇到过Listenables，我似乎无法弄清楚。

所示代码不会更新变量bottomCounterView。

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            SizedBox(height: 150),
            BottomHalf(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class BottomHalf extends StatefulWidget {

  @override
  _BottomHalfState createState() => _BottomHalfState();
}

class _BottomHalfState extends State<BottomHalf> {
  var bottomCounterView;


  bottomCounter() async {
    setState(() => bottomCounterView = _MyHomePageState()._counter);
    print('$bottomCounterView');
    print('${_MyHomePageState()._counter}');
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('I am showing this number from a separate widget'),
        Text('${bottomCounter()}'),
      ],
    );
  }
}

Answer 1

看起来您需要查看一些带有流和反应式编程的示例。请检查一些链接：

Reactive programming in flutter
More about reactive programming in flutter
Real example how it works，但不要忘记获取API密钥

已更新：据我了解，您需要像这样的东西

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

class CounterPage extends StatefulWidget {
  final StreamController<int> _streamController = StreamController<int>();

  CounterPage() {
    _streamController.stream.listen(onData);
  }

  @override
  _CounterPageState createState() => _CounterPageState();

  void onData(int event) {
    print(event);
  }
}

class _CounterPageState extends State<CounterPage> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Stream version of the Counter App')),
      body: Center(
        child: StreamBuilder<int>(
            stream: widget._streamController.stream,
            initialData: _counter,
            builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
              return Text('You hit me: ${snapshot.data} times');
            }),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          widget._streamController.sink.add(++_counter);
        },
      ),
    );
  }
}

但是我认为，这是非常糟糕的做法。请检查blocs（上面的链接），其中包含流和数据的逻辑被封装以及在何处可以更轻松地进行管理。

Answer 2

使用来自@YauhenSampir的良好信息，这使我开始着手，我在Streams / BLoC / Broadcast上找到了这三个教程。完美契合：

第1集-https://www.youtube.com/watch?v=h3TEEGceYsU

第2集-https://www.youtube.com/watch?v=QnAoEV5UraI

第3集-https://www.youtube.com/watch?v=qitQmyDICXc

处理页面之间的数据

2 个答案: