Flutter ：（如何）我能否擁有每個都依賴於Provider的小部件的PageView？

Question

我正在嘗試使用Providers和MobX“ Stores”設計我的應用程序 ， 但無法找出在PageView中可能包含的小部件中使用Providers / Stores的正確方法。

我有一個StatelessWidget“ PlayerPage”，它顯示來自PlayerPlayer內提供有Provider.of的“ PlayerStore”中單個可觀察的“ Player”對象的數據。

在我的應用程序的某些部分中，只有一個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;

  ...
}

Answer 1

問題是您正在使用Observer ，但是什么也沒觀察到。

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

雖然playerStore是可觀察的，但您playerStore 原樣傳遞它。 在這種情況下，根本不需要Observer ，可以將其刪除。

Observer只需要像這樣的事情：

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