如何在Flutter的Tabbar中动态打开一个tab？

Question

所以基本上我有一个导航到的小部件：

Navigator.of(context).pushNamed(Purchases.route, arguments: {"index": index});

Purchases 小部件只是一个空的小部件，除了使用TabBar, TabBarView, and TabController的两个选项卡之外什么都没有。 这些选项卡用于pending and delivered 。 这个想法是，当我导航到小部件时，正确的选项卡是打开的初始选项卡。

例如：当我在前一个小部件上单击pending时，导航器导航到“购买”小部件，待处理选项卡是打开的初始选项卡。 当我单击上一个小部件上的delivered时，导航器导航到购买小部件，交付的选项卡是打开的初始选项卡。

我传递了要打开的选项卡的索引，并在initState方法中使用它，它可以工作，但只是部分工作。

void initState() {
    super.initState();
    _controller = TabController(length: 2, vsync: this);
    Future.delayed(Duration.zero, () {
      final args = ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>;
      int index = args["index"];
      _controller.animateTo(index);
    });
}

此实现有效，但是该选项卡最初并未真正打开，它仅在打开索引 0 处的选项卡后才具有动画效果。 这是一个糟糕的性能，因为我计划在标签打开时进行 API 调用，如果用户没有打开/关心索引 0 处的标签，那么它是一个无用的 API 调用。

我努力了：

void initState() {
    super.initState();
    final args = ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>;
    int index = args["index"];
    _controller = TabController(length: 2, vsync: this, initialIndex: index);
}

这不起作用，因为上下文不可用并导致错误。

我怎样才能正确地让它工作？ 谢谢你！

Answer 1

所以我做了一点挖掘，发现这是解决方案：

void didChangeDependencies() {
    super.didChangeDependencies();
    final args = ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>;
    int index = args["index"];
    _controller = TabController(length: 2, vsync: this, initialIndex: index);
}

我猜 initState 不是正确的方法。 didChangeDependencies在每次构建后都会被调用，而initState不会。 需要考虑的事情。

Answer 2

为TabController设置一个initialIndex是正确的方法。

为了访问context ，您需要在单独的 function 中调用 API，然后在initState中调用它。

void apiCall(){
  //Call here your API (context accessible).
}

@override
initState((){
  ...
  apiCall();
  ...
});