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')),
          ],
        ),
      ),
    );
  }
}

试试这个：

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'),
          ],
        ),
      ),
    );
  }
}

---

通过使用DefaultTabController.ofcontext检索控制器，然后对其调用.animateToindex，可以在没有状态小部件的情况下完成此操作

---

按钮必须是它自己的小部件，这样它看到的上下文将有一个tab控制器连接到它。

我想说的是使用TabController而不是DefaultTabController。在回答的第一行中，您有DefaultTabController.fromcontext而不是DefaultTabController.ofcontext，可能是打字吗？。除非这是新版本的flifter中的语法变化？谢谢，这是一个打字错误。我现在已经修复了它。如果我的defaultTabController适用于列表下方的选项卡视图，并且我希望该页面可以滚动，那么我可以在哪里插入SingleChildScrollView？Bcos当我在脚手架上方插入SCSV时，页面返回为空。如果我的defaultTabController用于列表下方的选项卡视图，并且我希望该页面可滚动，我可以在哪里插入SingleChildScrollView？Bcos当我将SCSV插入脚手架上方时，页面返回为空。

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);
      }
    );
  }
}