如何使用 TabController

Question

刚学flutter，对TabController的使用很迷茫，按照官网的描述做了，但是出现错误，不知道怎么解决。

我只想在更改选项卡时更改标题并从应用栏引导。

final List<ChangeTitleAndLeading> _data = [
  new ChangeTitleAndLeading(title: "Home", leading: Icon(Icons.home)),
  new ChangeTitleAndLeading(title: "Profile", leading: Icon(Icons.person)),
  new ChangeTitleAndLeading(title: "Friends", leading: Icon(Icons.people))
];

ChangeTitleAndLeading _handler;
TabController _controller;

@override
void initState() {
  super.initState();

  _checkEmailVerification();

  _controller = TabController(vsync: this, length: 3);
  _handler = _data[0];
  _controller.addListener(_handleSelected);
}

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

void _handleSelected() {
  setState(() {
    _handler = _data[_controller.index];
  });
}

return MaterialApp(
  theme: new ThemeData(
    primarySwatch: Colors.teal,
  ),
  home: new Scaffold(
    appBar: new AppBar(
      leading: Icon(Icons.home),
      title: new Text("Home"),
      bottom: new TabBar(
        controller: _controller,
        tabs: _tabs,
      ),
    ),

    body: TabBarView(
      controller: _controller,
      children: _pages,
    ),

    floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          print('Current Index: ${_handler.title}');
        }
    ),

class ChangeTitleAndLeading {
  final String title;
  final Widget leading;

  ChangeTitleAndLeading({
    @required this.title,
    @required this.leading
  }) :
    assert(title != null),
    assert(leading != null);
}

错误日志：

错误日志：I/flutter (19638)：TabBarView 没有 TabController。I/flutter (19638)：创建 TabBarView 时，您必须使用“控制器”I/flutter (19638): 属性提供显式 TabController，或者必须确保 TabBarView 上方有一个 DefaultTabController。I/flutter (19638)：在这种情况下，既没有显式控制器也没有默认控制器。?????????????????????????????????????????????????????? ??????????????????????????????????????????????????????

I/flutter (19638)：引发了另一个异常：TabBar 没有 TabController。

当我改变这样的： leading: Icon(Icons.home),以leading: _handler.leading, 和这样的： title: new Text("Home"),以title: new Text(_handler.title), 总是返回错误_handler.leading或_handler.title为空

图片

Answer 1

尝试这个解决方案：-

\n

不要忘记继承

\n

\n

TickerProviderStateMixin

\n

\n

\n

class HomePage extends StatefulWidget {\n  const HomePage();\n\n  @override\n  _HomePageState createState() => _HomePageState();\n}\n\nclass _HomePageState extends State<HomePage> with TickerProviderStateMixin {\n  late TabController tabController;\n  @override\n  void initState() {\n    super.initState();\n    tabController = TabController(\n      initialIndex: 0,\n      length: 2,\n      vsync: this,\n    );\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    final theme = Theme.of(context);\n\n    return Scaffold(\n      appBar: AppBar(\n        title: Row(\n          children: [\n            Image.asset(\n              \'assets/images/png/logo.png\',\n              height: 60,\n              width: 60,\n            ),\n            Spacer(),\n            Container(\n              width: 400,\n              child: TabBar(\n                labelColor: Color.fromRGBO(4, 2, 46, 1),\n                labelStyle: theme.textTheme.headline1,\n                indicatorColor: Color.fromRGBO(4, 2, 46, 1),\n                unselectedLabelColor: Colors.grey,\n                controller: tabController,\n                tabs: [\n                  Text(\'\xd8\xa7\xd9\x84\xd9\x81\xd8\xa7\xd8\xaa\xd9\x88\xd8\xb1\xd8\xa9\'),\n                  Text(\'\xd8\xaf\xd9\x84\xd9\x8a\xd9\x81\xd8\xb1\xd9\x8a\'),\n                ],\n              ),\n            ),\n          ],\n        ),\n      ),\n      body: Container(\n        child: TabBarView(\n          controller: tabController,\n          children: [\n            Container(\n              color: Colors.red,\n            ),\n            Container(\n              color: Colors.orange,\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n\n  @override\n  void dispose() {\n    tabController.dispose();\n    super.dispose();\n  }\n}\n

\n

Answer 2

问题是您缺少 tabbarcontroller

你的代码应该是：

return MaterialApp(
  theme: new ThemeData(
    primarySwatch: Colors.teal,
  ),
  home: DefaultTabController(
    length: 3,
    child: new Scaffold(
      appBar: new AppBar(
        leading: Icon(Icons.home),
        title: new Text("Home"),
        bottom: new TabBar(
          controller: _controller,
          tabs: _tabs,
        ),
      ),
      body: TabBarView(
        controller: _controller,
        children: _pages,
      )...