如何在颤动中添加标签的顶侧和底侧

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

顶部选项卡仅显示主页,通过滚动或点按可显示3个不同的页面,底部选项卡则显示整个应用程序,例如菜单。

[当我编写代码时,我会看到下面图像的视图,但是我无法点击或重定向页面。

导航代码我只给出了顶部或底部的标签,而没有给出两个标签。

enter image description here

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

谢谢!

flutter tabs bottomnavigationview
1个回答
0
投票

尝试这种方式

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;

  @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 new MaterialApp(
        theme: ThemeData(
            primarySwatch: Colors.purple,
            brightness: Brightness.light,
            accentColor: Colors.red),
        darkTheme: ThemeData(
          brightness: Brightness.dark,
        ),
        home: new Scaffold(
          appBar: AppBar(
            title: Text("Home"),
            centerTitle: true,
            bottom: TabBar(
              indicatorColor: Colors.blue,
              unselectedLabelColor: Colors.grey,
              labelColor: Colors.white,
              isScrollable: false,
              // to customise tab indicator
              indicator: UnderlineTabIndicator(
                  borderSide: BorderSide(width: 5.0, color: Colors.blue),
                  insets: EdgeInsets.symmetric(horizontal: 16.0)),
              tabs: <Widget>[
                Tab(
                  icon: Icon(Icons.favorite_border),
                  child: Text("One"),
                ),
                Tab(
                  icon: Icon(Icons.favorite),
                  child: Text("Two"),
                ),
                Tab(
                  icon: Icon(Icons.add_a_photo),
                  child: Text("Three"),
                )
              ],
              controller: tabController,
            ),
          ),
          body: new TabBarView(
            children: <Widget>[
              new MyBody("Page One"),
              new MyBody("Page Two"),
              new 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(
              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 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)}),
        ],
      ),
    );
  }
}

输出

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.