Flutter :(如何)我能否拥有每个都依赖提供者的小部件的PageView?

时间:2019-05-15 09:07:39

标签: dependency-injection flutter mobx

我正在尝试使用ProvidersMobX "Stores"设计我的应用程序,但无法找到在PageView中可能包含的小部件中使用提供者/存储的正确方法。

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

在我的应用程序的某些部分中,只有一个PlayerPage,但在其他部分中,PageView中包含多个PlayerPage,其中提供了Player列表(来自“ TeamStore”)。

由于PageView一次只能构建几个PlayerPage,而我一次只有一个PlayerStore包含一个Player,所以这是行不通的。

我想出了一种半解决方法,即在PageView的“ onPageChanged”而不是“ itemBuilder”中设置PlayerStore的Player,但随后我收到了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;

  ...
}

1 个答案:

答案 0 :(得分:1)

问题是您正在使用Observer,但是什么也没观察到。

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

可观察到playerStore时,您按原样传递它。 在这种情况下,Observer完全不需要,可以将其删除。

Observer仅适用于以下情况:

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