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

Question

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

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

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

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)}),
        ],
      ),
    );
  }
}

输出