为什么缺少的TabController在Flutter中使用TabBar

时间:2019-04-16 08:53:01

标签: flutter flutter-layout

我开始编写TabController _tabController并在initState()中对其进行初始化,使用TabBar中的控制器引入TabController,但是Debug显示:没有用于TabBarView的TabController。

I/flutter ( 4328): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════
I/flutter ( 4328): The following assertion was thrown building MediaQuery(MediaQueryData(size: Size(411.4, 683.4),

I/flutter ( 4328): devicePixelRatio: 2.6, textScaleFactor: 1.0, platformBrightness: Brightness.light, padding:
I/flutter ( 4328): EdgeInsets.zero, viewInsets: EdgeInsets.zero, alwaysUse24HourFormat: false, accessibleNavigation:
I/flutter ( 4328): falsedisableAnimations: falseinvertColors: falseboldText: false)):

I/flutter ( 4328): No TabController for TabBarView.
I/flutter ( 4328): When creating a TabBarView, you must either provide an explicit TabController using the "controller"
I/flutter ( 4328): property, or you must ensure that there is a DefaultTabController above the TabBarView.
I/flutter ( 4328): In this case, there was neither an explicit controller nor a default controller.
class _ScaffoldRouteState extends State<ScaffoldRoute> with SingleTickerProviderStateMixin {

  TabController  _tabController;
  List tabs;

 void initState() {
    super.initState();
    // 创建Controller  
     tabs = ['news','history','picture'];
    _tabController = TabController(length: tabs.length, vsync: this);
  }


  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title:Text('The App By Scaffold'),
        bottom: TabBar(   //生成Tab菜单
            controller: _tabController,
            tabs: tabs.map((e) => Tab(text: e)).toList(),  
        ),
      ),
    );
  }
}

1 个答案:

答案 0 :(得分:0)

我也试过你的代码,它有效。

enter image description here

输出:

enter image description here

日志:

[✓] Flutter (Channel stable, 2.0.1, on macOS 11.2.1 20D75 darwin-x64, locale en)
    • Flutter version 2.0.1 at /Users/user/Developer/flutter
    • Framework revision c5a4b4029c (2 weeks ago), 2021-03-04 09:47:48 -0800
    • Engine revision 40441def69
    • Dart version 2.12.0

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/user/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0.1, Build version 12A7300
    • CocoaPods version 1.10.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      ? https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      ? https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.53.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.20.0

[✓] Connected device (2 available)
    • sdk gphone x86 arm (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
    • Chrome (web)                • chrome        • web-javascript • Google Chrome 89.0.4389.90

• No issues found!

在评论中,您的问题似乎已使用 flutter clean 解决。这将是有效的,因为它摆脱了一些内存问题。该命令实际上通过删除构建目录和一些其他文件来减少示例应用程序的项目大小。您的电脑过去在测试您创建的一些 Flutter 项目时可能会消耗大量内存。

另外,如果您不确定您的代码有什么问题。您可以尝试在 DartPad 中运行它。

在这里,我在那里运行你的代码,它给出了相同的输出:

enter image description here