Question

因此，在我的应用中，有三个屏幕可以使用底部栏进行导航，现在对于我要显示的三个屏幕中的每个屏幕，导航标签栏，但具有相同的appBar ，我试图使用包含底部栏元素的列表索引，然后为每个索引返回一个tabBar小部件，但最终出现错误 MyAppState是SingleTickerProviderStateMixin，但是创建了多个代码。 ，我不知道它是什么！

我真的需要解决此问题，请指导我使用溶胶或建议是否还有其他方法可以实现此目的。

main.dart

import 'package:flutter/material.dart'; import 'journal/view/journal_lists.dart'; import 'todo/view/master_list.dart'; import 'mood_checker/view/mood.dart'; import 'journal/view/journal.dart'; Color primary = Color(0xFF3366FF); void main() { runApp(MaterialApp( debugShowCheckedModeBanner: false, title: 'Mentor101', home: MyApp(), theme: ThemeData( primaryColor: primary, fontFamily: 'Poppins', textTheme: TextTheme( headline: TextStyle( fontSize: 36, fontWeight: FontWeight.w600, color: Colors.white), )), )); } class MyApp extends StatefulWidget { MyApp({Key key}) : super(key: key); @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin { //for bottom tab int currentIndex = 0; final _screens = [Journal(), MasterList(), MoodChecker()]; // for Tab Bar TabController todoTabCon; TabController moodTabCon; TabController journalTabCon; @override void initState() { super.initState(); todoTabCon = TabController(vsync: this, length: 3); moodTabCon = TabController(vsync: this, length: 2); journalTabCon = TabController(vsync: this, length: 2); } @override void dispose() { todoTabCon.dispose(); moodTabCon.dispose(); journalTabCon.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: myAppBar(context, 'ProApp'), drawer: mainDrawer(context), body: mainBody(), bottomNavigationBar: myBottomBar(), ); } // ---------------------------------APP BAR STARTS-------------------------------// Widget myAppBar(BuildContext context, String title) { return AppBar( centerTitle: true, title: Text( title, style: Theme.of(context).textTheme.headline, ), backgroundColor: Theme.of(context).primaryColor, bottom: getTabBar(), ); } // ---------------------------------APP BAR ENDS-------------------------------// // The problematic code // to get a tabBar for different screens Widget getTabBar() { switch (currentIndex) { case 0: return journalTabBar(); break; case 1: return todoTabBar(); break; case 2: return moodTabBar(); break; default: } } //------------------------Tab Bars--------------------------// Widget todoTabBar() { return TabBar( controller: todoTabCon, tabs: <Widget>[ Tab(child: Text('MasterList')), Tab(child: Text('DailyList')), Tab(child: Text('MonthlyList')), ], ); } Widget moodTabBar() { return TabBar( controller: moodTabCon, tabs: <Widget>[ Tab(child: Text('Checker')), Tab(child: Text('Review')), ], ); } Widget journalTabBar() { return TabBar( controller: journalTabCon, tabs: <Widget>[ Tab(child: Text('Journal')), Tab(child: Text('Entries List')), ], ); } // ------------------------------Bottom BAR STARTS-------------------------------// Widget myBottomBar() { return BottomNavigationBar( type: BottomNavigationBarType.fixed, fixedColor: primary, currentIndex: currentIndex, onTap: _onitemTapped, items: <BottomNavigationBarItem>[ BottomNavigationBarItem(icon: Icon(Icons.book), title: Text('Journal')), BottomNavigationBarItem( icon: Icon(Icons.view_list), title: Text('Todos')), BottomNavigationBarItem(icon: Icon(Icons.mood), title: Text('Chart')), ], ); } void _onitemTapped(int index) { setState(() { currentIndex = index; }); } //Body starts---------- Widget mainBody() { return _screens.elementAt(currentIndex); } // Body Ends---------

错误（由于StackOverflow正文长度限制（3000字），必须从底部切出一些部分

I/flutter (20666): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ I/flutter (20666): The following assertion was thrown building Builder: I/flutter (20666): _MyAppState is a SingleTickerProviderStateMixin but multiple tickers were created. I/flutter (20666): A SingleTickerProviderStateMixin can only be used as a TickerProvider once. If a State is used for I/flutter (20666): multiple AnimationController objects, or if it is passed to other objects and those objects might I/flutter (20666): use it more than one time in total, then instead of mixing in a SingleTickerProviderStateMixin, use I/flutter (20666): a regular TickerProviderStateMixin. I/flutter (20666): I/flutter (20666): When the exception was thrown, this was the stack: I/flutter (20666): #0 __MyAppState&State&SingleTickerProviderStateMixin.createTicker.<anonymous closure> (package:flutter/src/widgets/ticker_provider.dart:85:7) I/flutter (20666): #1 __MyAppState&State&SingleTickerProviderStateMixin.createTicker (package:flutter/src/widgets/ticker_provider.dart:92:6) I/flutter (20666): #2 new AnimationController (package:flutter/src/animation/animation_controller.dart:244:21) I/flutter (20666): #3 new TabController (package:flutter/src/material/tab_controller.dart:86:50) I/flutter (20666): #4 _MyAppState.initState (package:pro_app/main.dart:46:18) I/flutter (20666): #5 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3846:58) I/flutter (20666): #6 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5) I/flutter (20666): #7 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14) I/flutter (20666): #8 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12) I/flutter (20666): #9 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14) I/flutter (20666): #10 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14) I/flutter (20666): #11 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12) I/flutter (20666): #12 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16) I/flutter (20666): #13 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5) I/flutter (20666): #14 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5) I/flutter (20666): #15 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5) I/flutter (20666): #16 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14) I/flutter (20666): #17 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12) I/flutter (20666): #18 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14) I/flutter (20666): #19 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14) I/flutter (20666): #20 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12) I/flutter (20666): #21 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14) I/flutter (20666): #22 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14) I/flutter (20666): #23 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12) I/flutter (20666): #24 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14) I/flutter (20666): #25 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14) I/flutter (20666): #26 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12) I/flutter (20666): #27 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14) I/flutter (20666): #28 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14) I/flutter (20666): #29 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12) I/flutter (20666): #30 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16) I/flutter (20666): #31 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5) I/flutter (20666): #32 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5) I/flutter (20666): #33 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11) I/flutter (20666): #34 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5) I/flutter (20666): #35 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14) I/flutter (20666): #36 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12) I/flutter (20666): #37 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16) I/flutter (20666): #38 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5) I/flutter (20666): #39 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5) I/flutter (20666): #40 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5) I/flutter (20666): #41 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14) I/flutter (20666): #42 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12) I/flutter (20666): #43 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16) I/flutter (20666): #44 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5) I/flutter (20666): #45 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5) I/flutter (20666): #46 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11) I/flutter (20666): #47 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5) I/flutter (20666): #48 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14) I/flutter (20666): #49 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12) I/flutter (20666): #50 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14) I/flutter (20666): #51 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14) I/flutter (20666): #52 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12) I/flutter (20666): #53 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16) I/flutter (20666): #54 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5) I/flutter (20666): #55 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5) I/flutter (20666): #56 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5) I/flutter (20666): #57 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14) I/flutter (20666): #58 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12) I/flutter (20666): #59 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14) I/flutter (20666): #60 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14) I/flutter (20666): #61 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12) I/flutter (20666): #62 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16) I/flutter (20666): #63 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5) I/flutter (20666): #64 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5) I/flutter (20666): #65 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11) I/flutter (20666): #66 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5) I/flutter (20666): #67 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14) I/flutter (20666): #68 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12) I/flutter (20666): #69 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16) I/flutter (20666): #70 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5) I/flutter (20666): #71 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5) I/flutter (20666): #72 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5) I/flutter (20666): #73 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14) I/flutter (20666): #74 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12) I/flutter (20666): #75 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14) I/flutter (20666): #76 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14) I/flutter (20666): #77 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12) I/flutter (20666): #78 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16) I/flutter (20666): #79 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5) I/flutter (20666): #80 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5) I/flutter (20666): #81 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5) I/flutter (20666): #82 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14) I/flutter (20666): #83 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12) I/flutter (20666): #84 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16) I/flutter (20666): #85 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5) I/flutter (20666): #86 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3716:5) I/flutter (20666): #87 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11) I/flutter (20666): #88 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3711:5) I/flutter (20666): #89 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2956:14) I/flutter (20666): #90 Element.updateChild (package:flutter/src/widgets/framework.dart:2759:12) I/flutter (20666): #91 ComponentElement.performRebuild...

Answer 1

创建标签的正确方法之一是在 main.dart 中指定路线，如下所示：

void main() {
  runApp(new MaterialApp(
    debugShowCheckedModeBanner: false,
    home: new Home(),
    routes: <String, WidgetBuilder>{
    "/tabs": (BuildContext context) => new Tabs(),//add your route

现在，您需要使用相应的Class Tabs（）创建 tabs.dart 文件，如下所示：

import 'package:YOURPROYECT/FOLDER/file.dart' as first; //here is your 1st tab
import 'package:YOURPROYECT/FOLDER/file.dart' as second;//and your second
//you can add more tabs, as third  or fouth, see UI/UX what they recommend.


class Tabs extends StatefulWidget {
  @override
  MyTabsState createState() => new MyTabsState();
}

class MyTabsState extends State<Tabs> with SingleTickerProviderStateMixin {
  TabController controller;

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      bottomNavigationBar: new Material(
        color: color_appbar,
        child: new TabBar(
          controller: controller,
          tabs: <Tab>[
            new Tab(icon: new Icon(Icons.home,)),
            new Tab(icon: new Icon(Icons.search)),
            new Tab(icon: new Icon(Icons.notifications)),

          ]
        )
      ),
      body: new TabBarView(
        controller: controller,
        children: <Widget>[
          new first.Home(),
          new second.Search(),
          new fourth.Notifications(),
          new FutureBuilder(


//you can continous with you code

您必须为每个标签创建一个文件，并带有相应的类，例如对于 Search（）类，您可以这样开始。

import 'package:YOURPROYECT/Estilo.dart';
import 'package:flutter/material.dart';

class Search extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Search"),
    //you can continous

希望我能对您有所帮助。

Flutter如何为不同的屏幕显示不同的tabBar？

1 个答案: