Flutter：（如何）我可以拥有每个依赖于 Provider 的小部件的 PageView 吗？答案

【问题标题】：Flutter: (How) Can I have a PageView of widgets that each rely on Provider?Flutter：（如何）我可以拥有每个依赖于 Provider 的小部件的 PageView 吗？
【发布时间】：2019-10-02 08:54:28
【问题描述】：

我正在尝试使用 Providers 和 MobX "Stores" 设计我的应用程序，但无法找到在可能包含在 PageView 中的小部件中使用提供者/商店的正确方法。

我有一个 StatelessWidget“PlayerPage”，它显示来自“PlayerStore”的单个可观察“Player”对象的数据，该对象在 PlayerPage 中使用 Provider.of 提供。

在我的应用程序的某些部分，只有一个 PlayerPage，但在其他部分，几个 PlayerPage 包含在一个提供玩家列表的 PageView 中（来自“TeamStore”）。

由于 PageView 一次构建了几个 PlayerPages，并且我有一个 PlayerStore 一次包含一个 Player，所以这不起作用。

我想出了一个半解决方法，在 PageView 的“onPageChanged”而不是“itemBuilder”中设置 PlayerStore 的播放器，但随后我收到 MobX 消息，显示“在 Observer@(number) 的构建器函数中未检测到可观察对象”（我假设未显示内置的 PlayerPages）以及跳转到页面时的其他一些问题，我认为必须有更好的方法来处理所有这些......

谁能告诉我哪里出了问题（无论是 PageViews 还是对 Provider/MobX 有更深的误解）？

class PlayerPage extends StatelessWidget {

  const PlayerPage({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {

    PlayerStore playerStore = Provider.of<PlayerStore>(context);

    return Column(
      children: <Widget>[
        Observer(
          builder: (_) =>
              SinglePlayerStatsDisplay(
                playerStore: playerStore,
              ),
        ),
        Observer(
          builder: (_) =>
              PlayerStatControls(
                playerStore: playerStore,
              ),
        ),
      ],
    );
  }
}

...

class PlayersPageViewState extends State<PlayersPageView> {

  @override
  void initState() {
    super.initState();

    _pageController = PageController(initialPage: widget.startingIndex);
    widget.playerStore
    .setPlayer(widget.teamStore.players[widget.startingIndex]);
  }

  ...

    body: PageView.builder(
            itemBuilder: (BuildContext context, int index) => PlayerPage(),
            itemCount: widget.teamStore.players.length,
            onPageChanged: (index) => widget.playerStore.setPlayer(widget.teamStore.players[index]),
            controller: _pageController,
          )

    ...
}

...

abstract class _PlayerStore implements Store {
  @observable
  Player player;

  @action
  setPlayer(Player newPlayer) => player = newPlayer;

  ...
}

【问题讨论】：

标签： dependency-injection flutter mobx

【解决方案1】：

问题是您正在使用Observer，但没有观察到任何东西。

Observer(
  builder: (_) =>
      SinglePlayerStatsDisplay(
        playerStore: playerStore,
      ),
),

虽然playerStore 是可观察的，但您按原样传递它。在这种情况下，Observer 根本不需要，可以删除。

Observer 仅用于以下情况：

Observer(
  builder: (_) => Text(playerStore.foo.toString()),
),

【讨论】：

好的，谢谢，我想我过度使用了观察者，因为我不确定我需要它们的确切位置。删除了这些，现在以低得多的速度收到“未检测到可观察物”警告”（我确信还有另一个不必要的观察者或两个要删除其他地方）。关于 PageView，这是一种处理事情的好方法（有一个带有商店提供者的小部件并在 onPageChanged 中设置商店？使用带有 ObservableList 玩家的 TeamStore 和带有单个玩家的 PlayerStore 是否有意义？另外，感谢您制作 Provider 库！
@Eddie 我没有发现任何问题。虽然 provider.of 从 PlayerPage 可以移动到 SinglePlayerStatsDisplay
我在类似情况下需要帮助。有人可以看看这个吗？在此先感谢...stackoverflow.com/questions/67923192/…