带有索引堆栈的 Flutter bottomNavigator

Question

关于使用索引堆栈在选项卡之间导航以显示相关页面的问题。我这样做是为了保持页面的滚动/状态。这工作正常。我可以通过单击选项卡更改当前显示的页面 - 也可以在每个页面内导航(每个页面都用它自己的导航器包装)。这是渲染页面的代码。

Widget build(BuildContext context) {
return IndexedStack(
    index: widget.selectedIndex,
    children: List.generate(widget._size, (index) {
  return _buildNavigator(index);
}));

}

Mu 的问题是 IndexedStack 一次构建所有页面。在我的某些页面中，我想从 API 加载数据，我想在第一次构建小部件时执行此操作，并且仅当页面当前可见时才执行此操作。 有没有办法做到这一点？ 在我当前的实现中，所有小部件都同时构建，因此即使对于当前未绘制的页面，也会调用我的所有 API 调用。

不确定我是否在这里遗漏了什么，或者有更好的方法来实现底部导航栏。顺便说一句，我也在使用 Provider 进行状态管理。

Answer 1

你找到解决办法了吗？
我发现了和你一样的问题，我尝试了这个解决方法(我还没有发现任何问题)
这个想法是制作一个新的小部件来控制进行 api 调用的小部件的可见性状态，并在它变得可见时构建它。
在您的 IndexedStack 中，用这样的小部件包装您的 _buildNavigator:

class BaseTabPage extends StatefulWidget {

  final bool isVisible;
  final Widget child;

  BaseTabPage({Key key, this.child, this.isVisible});

  @override
  State<StatefulWidget> createState() => _BaseTabPageState();

}

/*
  This state is to prevent tab pages creation before show them. It'll only add the
  child widget to the widget tree when isVisible is true at least one time
  i.e. if the child widget makes an api call, it'll only do when isVisible is true
  for the first time
 */
class _BaseTabPageState extends State<BaseTabPage> {

  bool alreadyShowed = false;

  @override
  Widget build(BuildContext context) {
    alreadyShowed = widget.isVisible ? true : alreadyShowed;

    return alreadyShowed ? widget.child : Container();
  }
}

例如，在我的代码中，我有类似的内容可以为每个选项卡构建导航器，其中 _selectedIndex是 BottomNavigationBar的选定位置，而 tabPosition是该页在 BottomNavigationBar中的位置

Widget _buildTabPage(int tabPosition) {
    final visibility = _selectedIndex == tabPosition;
    return BaseTabPage(
      isVisible: visibility,
      child: _buildNavigator(tabPosition),
    );
  }

有了这个，我有完全在子小部件中的 api 调用逻辑，底部导航对它们一无所知。
如果您发现它有什么问题，请告诉我，因为我对 flutter 有点陌生。