如何为不同的屏幕显示不同的tabBars？

问题描述 投票：0回答：1

所以在我的应用程序中，有三个屏幕可以使用底栏进行导航，现在对于三个屏幕中的每一个我想显示不同的导航标签栏但是相同的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...
dart flutter flutter-layout
1个回答
-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

我希望我帮助过你。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.