如何更改 Flutter 默认选项卡控制器中的选项卡？

Question

我正在使用 Flutter 默认选项卡控制器来显示选项卡视图。我需要在单击按钮时更改选项卡，我尝试使用 setState 更改选项卡，但失败了。这些是我的代码：

   class _TabPageState extends State<TabPage> implements TabView {
  int tabIndex = 0;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      initialIndex: tabIndex,
      child: Scaffold(
        appBar: AppBar(),
        body: TabBarView(
          physics: NeverScrollableScrollPhysics(),
          children: [
            Container(
              color: Colors.green,
              child: Center(
                child: RaisedButton(
                    child: Text('to Tab 3'),
                    onPressed: () {
                      setState(() {
                        tabIndex = 2;
                      });
                    }),
              ),
            ),
            Container(color: Colors.red),
            Container(color: Colors.yellow),
            Container(color: Colors.cyan),
          ],
        ),
        bottomNavigationBar: TabBar(
          labelColor: Colors.black45,
          tabs: [
            Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('green')),
            Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('red')),
            Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('yellow')),
            Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('cyan')),
          ],
        ),
      ),
    );
  }
}

Answer 1

您可以在没有状态小部件的情况下通过检索控制器DefaultTabController.of(context)然后调用.animateTo(index)它来完成此操作。

class TabPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      initialIndex: tabIndex,
      child: Scaffold(
        appBar: AppBar(),
        body: TabBarView(
          physics: NeverScrollableScrollPhysics(),
          children: [
            Container(
              color: Colors.green,
              child: Center(
                child: GoToThirdTabButton(),
              ),
            ),
            Container(color: Colors.red),
            Container(color: Colors.yellow),
            Container(color: Colors.cyan),
          ],
        ),
        bottomNavigationBar: TabBar(
          labelColor: Colors.black45,
          tabs: [
            Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('green')),
            Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('red')),
            Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('yellow')),
            Padding(padding: const EdgeInsets.only(top: 12, bottom: 12), child: Text('cyan')),
          ],
        ),
      ),
    );
  }
}

class GoToThirdTabButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text('to Tab 3'),
      onPressed: () {
        DefaultTabController.of(context).animateTo(2);
      }
    );
  }
}

该按钮必须是它自己的小部件，因此context它看到的将具有附加的选项卡控制器。