如何在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

尝试一下：

import 'package:flutter/material.dart';

class TabExample extends StatefulWidget {
  @override
  _TabExampleState createState() => _TabExampleState();
}

class _TabExampleState extends State<TabExample> {
  var tabIndex = 0;

  @override
  Widget build(BuildContext context) {
    var childList = [
      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),
    ];

    return DefaultTabController(
      length: 4,
      initialIndex: tabIndex,
      child: Scaffold(
        appBar: AppBar(),
        body: childList[tabIndex],
        bottomNavigationBar: TabBar(
          onTap: (index) {
            setState(() {
              tabIndex = index;
            });
          },
          labelColor: Colors.black,
          tabs: <Widget>[
            Tab(text: 'Green'),
            Tab(text: 'Red'),
            Tab(text: 'Yellow'),
            Tab(text: 'Cyan'),
          ],
        ),
      ),
    );
  }
}

Answer 2

通过使用DefaultTabController.from(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将具有选项卡控制器。