如何在Flutter中的标签之间发送数据？ [英] How to send data between tabs in Flutter?

问题描述

我有一个Flutter应用，其中包含2个标签：一个标签用于管理和接收连续的数据流，另一个标签显示输入的数据。

I've got a Flutter app with 2 tabs: one that manages and receives a continuous flow of data, the other tab displays the data as it comes in.

如何将数据从第一个标签传递到第二个标签？我看到的大多数帖子都是关于在父母与子女之间传递数据，而不是在子女与子女之间传递数据。

How do I pass the data from the first tab to the second? Most of the post I see are about passing data between parent and child, not child to child.

我是否会使用 GlobalKey ？有更好的选择吗？

Would I use GlobalKey? is there a better option?

这是主要的构建功能：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('some text'),
      bottom: TabBar(
        tabs: tabs,
        controller: _tabController,
      ),
    ),
    body: TabBarView(
      controller: _tabController,
      children: [
        InputManagment(),
        InfiniteListView(),
      ],
    ),
  );
}

推荐答案

在这种情况下，建议使用 InheritedWidget 。

In this case, it is recommended to use InheritedWidget.

InheritedWidget 的文档非常全面，其中包括来自Flutter团队的视频。

首先，您可能想创建一个类包含您要共享的数据。

First of all, you probably want to create a class that holds the data you want to share.

import 'dart:async';

class MyInheritedWidgetData {
  var sharedData;
  int someCount;
  String someMessage;

  final StreamController _streamController = StreamController.broadcast();

  Stream get stream => _streamController.stream;

  Sink get sink => _streamController.sink;
}

我刚刚向此类添加了一些变量。您可以随便用它填充它。

现在，您还希望拥有一个保存该数据类的 InheritedWidget 。

I just added a bunch of variables to this class. You can populate it with whatever you want.
Now, you also want to have an InheritedWidget that holds this data class.

class MyInheritedWidget extends InheritedWidget {
  final MyInheritedWidgetData data;

  MyInheritedWidget({
    Key key,
    @required Widget child,
  })  : assert(child != null),
        data = MyInheritedWidgetData(),
        super(key: key, child: child);

  static MyInheritedWidgetData of(BuildContext context) => (context.inheritFromWidgetOfExactType(MyInheritedWidget) as MyInheritedWidget).data;

  @override
  bool updateShouldNotify(MyInheritedWidget old) => false;
}

您需要放置此 MyInheritedWidget 在小部件树顶部或至少在您所说的父小部件上方。以下应该说明必要的窗口小部件层次结构。

You need to place this MyInheritedWidget at the top of your widget tree or at least above parent widget you talked about. The following is supposed to illustrate the necessary widget hierarchy.

MyInheritedWidget
 TabBarView
   InputManagment
   InfiniteListView
// in your build function this would be `body: MyInheritedWidget(child: TabBarView(...))`

现在，您只需在任何子小部件中使用 MyInheritedWidget.of（context）即可访问数据类。

Now, you can simply access your data class by using MyInheritedWidget.of(context) in any of your child widgets.

您可能要考虑使用流来连续发送和收听数据流。但是，这也只是数据类的一部分。为了给您一个想法，我在示例数据类中包含了stream变量。您可以使用 MyInheritedWidget.of（context）.sink.add（..）添加数据，并将流提供给 StreamBuilder 使用 MyInheritedWidget.of（context ）.stream 。

You might want to consider using streams to send and listen to the "flow of data" continuously. However, that would also simply be part of the data class. To give you an idea, I included the stream variable in the example data class. You would add data using MyInheritedWidget.of(context).sink.add(..) and supply your stream to a StreamBuilder using MyInheritedWidget.of(context).stream.

这些都是说明在小部件之间共享数据所需的示例。您可以阅读文档以获得更多信息和更高级的使用案例

These are all just examples to explain what is needed to share data between widgets. You can read through the documentation for more information and more advanced use cases.

这篇关于如何在Flutter中的标签之间发送数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！