Flutter 错误：TabBarView 没有 TabController

Question

我想在我的颤振页面中添加一些标签，但没有一个只有标签的页面。

简而言之，我有一些输入字段，在它们下面我想放置我的标签。

我不断收到此错误：TabBarView 没有 TabController。 我已经将状态类与 TickerProviderStateMixin 一起提供给控制器工作，但我无法弄清楚为什么它说没有找到 tabcontroller，当它存在时。

问题是我已经有一个选项卡控制器，这是代码：

class ProductBody extends StatefulWidget {
  @override
  _ProductBodyState createState() => _ProductBodyState();
}
class _ProductBodyState extends State<ProductBody> with TickerProviderStateMixin{
  TabController _controller;

  @override
  void initState() {
   
    _controller = new TabController(length: 2, vsync: this);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 20.0, left: 20.0, right: 20.0),
      child: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          children: <Widget>[
            Align(
              alignment: Alignment.centerLeft,
              child: Text(
                "Select category:",
                style: TextStyle(
                  color: Colors.green,
                  fontWeight: FontWeight.bold,
                  fontSize: 16,
                ),
              ),
            ),
         
            Container(
              decoration: new BoxDecoration(color: Theme.of(context).primaryColor),
              child: new TabBar(
                controller: _controller,
                tabs: [
                   Tab(
                    icon: const Icon(Icons.home),
                    text: 'Address',
                  ),
                  Tab(
                    icon: const Icon(Icons.my_location),
                    text: 'Location',
                  ),
                ],
              ),
            ),
             Container(
              height: 80.0,
              child: new TabBarView(
                controller: _controller,
                children: <Widget>[
                  new Card(
                    child: new ListTile(
                      leading: const Icon(Icons.home),
                      title: new TextField(
                        decoration: const InputDecoration(hintText: 'Search for address...'),
                      ),
                    ),
                  ),
                  new Card(
                    child: new ListTile(
                      leading: const Icon(Icons.location_on),
                      title: new Text('Latitude: 48.09342\nLongitude: 11.23403'),
                      trailing: new IconButton(icon: const Icon(Icons.my_location), onPressed: () {}),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

使用SingleTickerProviderStateMixin 。 您只有一个控制器。

我通过你的代码飞镖没有任何问题，它工作正常。 检查您的其他代码。

只需打开https://dartpad.dartlang.org/flutter并粘贴这些代码。

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: ProductBody(),
        ),
      ),
    );
  }
}

class ProductBody extends StatefulWidget {
  @override
  _ProductBodyState createState() => _ProductBodyState();
}
class _ProductBodyState extends State<ProductBody> with TickerProviderStateMixin{
  TabController _controller;

  @override
  void initState() {
   
    _controller = new TabController(length: 2, vsync: this);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 20.0, left: 20.0, right: 20.0),
      child: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          children: <Widget>[
            Align(
              alignment: Alignment.centerLeft,
              child: Text(
                "Select category:",
                style: TextStyle(
                  color: Colors.green,
                  fontWeight: FontWeight.bold,
                  fontSize: 16,
                ),
              ),
            ),
         
            Container(
              decoration: new BoxDecoration(color: Theme.of(context).primaryColor),
              child: new TabBar(
                controller: _controller,
                tabs: [
                   Tab(
                    icon: const Icon(Icons.home),
                    text: 'Address',
                  ),
                  Tab(
                    icon: const Icon(Icons.my_location),
                    text: 'Location',
                  ),
                ],
              ),
            ),
             Container(
              height: 80.0,
              child: new TabBarView(
                controller: _controller,
                children: <Widget>[
                  new Card(
                    child: new ListTile(
                      leading: const Icon(Icons.home),
                      title: new TextField(
                        decoration: const InputDecoration(hintText: 'Search for address...'),
                      ),
                    ),
                  ),
                  new Card(
                    child: new ListTile(
                      leading: const Icon(Icons.location_on),
                      title: new Text('Latitude: 48.09342\nLongitude: 11.23403'),
                      trailing: new IconButton(icon: const Icon(Icons.my_location), onPressed: () {}),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

您可以使用底部导航选项卡。 标签栏将出现在页面底部，就像默认标签栏一样工作

https://medium.com/@uncoded_decimal/creating-bottom-navigation-tabs-using-flutter-2286681450d4