如何在 flutter 中添加 Tabs Top side 和 Bottom side

Question

顶部选项卡仅显示主页，它们通过滚动或点击显示 3 个不同的页面，底部选项卡用于整个应用程序，例如菜单。

当我编写代码时，我得到如下图所示的视图，但我无法点击或重定向页面。

导航代码我只给了顶部或底部标签，而不是两个标签。

homePage.dart

  class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {

  TabController tabController;
  //TabController bottomController;
  Icon searchBtn = new Icon(Icons.search);
  Widget appBarTitle = new Text('Invoices');

  @override
  void initState(){
    super.initState();
    tabController = new TabController(vsync: this, length: 3);
    //bottomController = new TabController(vsync: this, length: 4);
  }

  @override
  void dispose(){
    tabController.dispose();
    //bottomController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      color: Colors.purpleAccent,
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: 3,
      child:Scaffold(
        appBar: new AppBar(
          centerTitle: false,
          title: appBarTitle,
          backgroundColor: Color(0xFF832685),
          actions: <Widget>[
            new IconButton(
              icon: searchBtn,
              onPressed: (){
                setState(() {
                  if(this.searchBtn.icon == Icons.search){
                    this.searchBtn = new Icon(Icons.close);
                    this.appBarTitle = new TextField(
                      style: new TextStyle(
                        color: Colors.white,
                      ),
                      decoration: new InputDecoration(
                        //fillColor: Colors.white,
                        border: InputBorder.none,
                        // focusedBorder: OutlineInputBorder(
                        //   borderRadius: BorderRadius.all(Radius.circular(5.0)),
                        //   borderSide: BorderSide(color: Colors.white)),
                        filled: true,
                        prefixIcon: new Icon(Icons.search,
                        color: Colors.white),
                        hintText: "Search...",
                        hintStyle: new TextStyle(color: Colors.white),
                      ),
                    );
                  }
                  else{
                    this.searchBtn = new Icon(Icons.search);
                    this.appBarTitle = new Text('Invoices');
                  }
                });
              },
            )
          ],
          bottom: new TabBar(
            indicatorColor: Color(0xFF832685),
            controller: tabController,
            tabs: <Tab>[
              new Tab(text: 'Unpaid'.toUpperCase(),),
              new Tab(text: 'Draft'.toUpperCase(),),
              new Tab(text: 'All'.toUpperCase(),),
            ],
          ),
        ),
        //bottomNavigationBar: BottomNavBar(),
        //bottomNavigationBar: _BottomBar(),

        // bottomNavigationBar: new TabBar(
        //     indicatorColor: Color(0xFF832685),
        //     labelColor: Color(0xFF832685),
        //     //controller: bottomController,
        //     tabs: <Tab>[
        //       new Tab(icon: new Icon(Icons.home),text: 'Home',),
        //       new Tab(icon: new Icon(Icons.home),text: 'Home',),
        //       new Tab(icon: new Icon(Icons.home),text: 'Home',),
        //       new Tab(icon: new Icon(Icons.home),text: 'Home',),
        //     ],
        // ),

        body: new TabBarView(
          controller: tabController,
          children: <Widget>[
            new first.UnpaidInvoicePage(),
            new second.PaidInvoicePage(),
            new third.AllInvoicePage(),
          ],
        ),
        //body: Container(),

          floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          tooltip: 'New Invoice',
          backgroundColor: Color(0xFF832685),
          onPressed: (){
            //Navigator.of(context).pushNamed('NewInvoicePage');
            Navigator.push(context, MaterialPageRoute(builder: (context) => NewInvoicePage()));
          },
        ),
        ),
      ),
      );   
  }
}

谢谢！

Answer 1

试试这个

import 'package:flutter/material.dart';

void main() => runApp(HomeScreen());

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenPage createState() => _HomeScreenPage();
}

class _HomeScreenPage extends State<HomeScreen>
    with SingleTickerProviderStateMixin {
  TabController tabController;

  String title = "Home";

  @override
  void initState() {
    super.initState();
    tabController = new TabController(length: 3, vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        theme: ThemeData(
            primarySwatch: Colors.purple,
            brightness: Brightness.light,
            accentColor: Colors.red),
        darkTheme: ThemeData(
          brightness: Brightness.dark,
        ),
        home: new Scaffold(
          appBar: AppBar(
            title: Text(title),
            centerTitle: true,
          ),
          body: TabBarView(
            children: <Widget>[
              FirstTab(),
              MyBody("Page Two"),
              MyBody("Page Three")
            ],
// if you want yo disable swiping in tab the use below code
//            physics: NeverScrollableScrollPhysics(),
            controller: tabController,
          ),
          bottomNavigationBar: Material(
            color: Colors.purple,
            child: TabBar(
              onTap: (indedx) {
                if (indedx == 0) {
                  setState(() {
                    title = "Home";
                  });
                } else if (indedx == 1) {
                  setState(() {
                    title = "Tab Two";
                  });
                } else if (indedx == 2) {
                  setState(() {
                    title = "Tab Three";
                  });
                }
              },
              indicatorColor: Colors.blue,
              unselectedLabelColor: Colors.grey,
              tabs: <Widget>[
                Tab(
                  icon: Icon(Icons.favorite_border),
                  text: "ONE",
                ),
                Tab(
                  icon: Icon(Icons.favorite),
                  text: "TWO",
                ),
                Tab(
                  icon: Icon(Icons.add_box),
                  text: "THREE",
                ),
              ],
              controller: tabController,
            ),
          ),
        ));
  }
}

class FirstTab extends StatefulWidget {
  @override
  FirstTabState createState() => FirstTabState();
}

class FirstTabState extends State<FirstTab>
    with SingleTickerProviderStateMixin {
  TabController tabController;

  @override
  void initState() {
    super.initState();
    tabController = new TabController(length: 3, vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(kToolbarHeight),
          child: Container(
            height: 50.0,
            child: new TabBar(
              indicatorColor: Colors.blue,
              unselectedLabelColor: Colors.grey,
              labelColor: Colors.blue,
              tabs: [
                Tab(
                  text: "ONE",
                ),
                Tab(
                  text: "TWO",
                ),
                Tab(
                  text: "THREE",
                ),
              ],
            ),
          ),
        ),
        body: TabBarView(
          children: [
            Text("TAB ONE CONTENT"),
            Text("TAB TWO CONTENT"),
            Text("TAB THREE CONTENT"),
          ],
        ),
      ),
    );
  }
}

class MyBody extends StatelessWidget {
  final String title;

  MyBody(this.title);

  final mySnackBar = SnackBar(
    content: Text(
      "Hello There!",
      style: TextStyle(color: Colors.white),
    ),
    duration: Duration(seconds: 3),
    backgroundColor: Colors.blue,
  );

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
              child: Text(title + "  Click me"),
              onPressed: () => {Scaffold.of(context).showSnackBar(mySnackBar)}),
        ],
      ),
    );
  }
}

输出

Answer 2

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin  {
  int tabIndex = 0;
  TabController tabController;

  String title = "Home";

  @override
  void initState() {
    super.initState();
    tabController = new TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {

    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(kToolbarHeight),
          child: Container(
            height: 50.0,
            child: new TabBar(
              indicatorColor: Colors.blue,
              unselectedLabelColor: Colors.grey,
              labelColor: Colors.blue,
              tabs: [
                Tab(
                  text: "Home",
                ),
                Tab(
                  text: "Mail",
                ),
                Tab(
                  text: "Profile",
                ),
              ],
            ),
          ),
        ),
        body: TabBarView(
          children: [
            MyHomeScreen(),
            MailScreen(),
            ProfileScreen(),
          ],
        ),
      ),
    );

  }
}

class MyHomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: NestedTabBar()
      ),
    );
  }
}






class NestedTabBar extends StatefulWidget {
  @override
  _NestedTabBarState createState() => _NestedTabBarState();
}

class _NestedTabBarState extends State<NestedTabBar>  with TickerProviderStateMixin {
  int tabIndex=0;



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.white,
        child: tabIndex ==0 ?BottomTabBarHome() 
        :tabIndex == 1? BottomTabBarMail(): BottomTabBarProfile()
      ),

      bottomNavigationBar: BottomNavigationBar(
        items:  <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home, color: Colors.grey,),
            activeIcon: Icon(Icons.home, color: Colors.blue,),
            title: Text('')
          ),
           BottomNavigationBarItem(
            icon: Icon(Icons.mail, color: Colors.grey,),
            activeIcon: Icon(Icons.mail, color: Colors.blue,),
            title: Text('')
          ),
           BottomNavigationBarItem(
            icon: Icon(Icons.account_circle, color: Colors.grey,),
            activeIcon: Icon(Icons.account_circle, color: Colors.blue,),
            title: Text('')
          )
        ],
        currentIndex: tabIndex,
        selectedItemColor: Colors.blueAccent,
        onTap: (int index){
          setState(() {
            tabIndex = index;
          });
        },
      ),
    );
  }

}

class BottomTabBarHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Bottom Tab Bar Home Screen"),
      ),
    );
  }
}
class BottomTabBarMail extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Bottom Tab Bar Mail Screen"),
      ),
    );
  }
}
class BottomTabBarProfile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Bottom Tab BarM Profile Screen"),
      ),
    );
  }
}

哦！你得到了答案，但我也试过了:)

看：

如何在 flutter 中添加 Tabs Top side 和 Bottom side

How to add Tabs Top side and Bottom side both in flutter

tabs

tabbar

flutter

bottomnavigationview