簡體   English   中英

如何在 flutter 中將抽屜鏈接到 tabBar

[英]How to link a drawer to tabBar in flutter

我在 flutter 中創建了這個應用程序,但我不知道如何添加按鈕以在 appBar 中打開側抽屜。除非我將appBar: new TabBar更改為appBar: AppBar ,否則它不起作用

import 'package:Schedule/UI/Home/homePage.dart';
import 'package:flutter/material.dart';
import 'models/global.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   
    return new MaterialApp
    (
      title: 'Schedule',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Schedule',)
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: MaterialApp(
      color: Colors.yellow,
      home: DefaultTabController(
        length: 5,
        child: new Scaffold(
          body: Stack(
          children: <Widget>[
            TabBarView(
              children: [
                new Container(color: Colors.red,),
                new Container(color: Colors.blue,),
                HomePage(),  
                new Container(
                  color: Colors.white,
                ),
                new Container(
                  color: darkGreyColor,
                ),
              ],
            ),
            Container(
              height:150,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(30),
                  bottomRight: Radius.circular(30),
                ),
                 color: Colors.white,
              )
              ),
               Container(
                 margin: EdgeInsets.only(top:130,left: MediaQuery.of(context).size.width*0.43),
                 child: FloatingActionButton(
                  child: Icon(Icons.add ),
                  backgroundColor: redColor,
                  onPressed: null,
                  ),
               ) 
          ],
          ),
          drawer: NavDrawer(),
          appBar: new TabBar(
            tabs: [
              Tab(
                icon: new Icon(Icons.menu),
              ),
              Tab(
                icon: new Icon(Icons.done),
              ),
              Tab(
                icon: new Icon(Icons.home),
              ),
              Tab(
                icon: new Icon(Icons.access_time),
              ),
              Tab(icon: new Icon(Icons.search),)
            ],
            labelColor: Colors.red[900],
            unselectedLabelColor: Colors.black,
            indicatorSize: TabBarIndicatorSize.label,
            indicatorPadding: EdgeInsets.all(5.0),
            indicatorColor: Colors.red[900],
          ),
          backgroundColor: Colors.white,
        ),
      ),
    ),
    );
  }
}
class NavDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
            child: new UserAccountsDrawerHeader(
              accountName:null ,
              accountEmail: null,
              currentAccountPicture: null,
              )
          ),
          ListTile(
            leading: Icon(Icons.verified_user),
            title: Text('Profile'),
            onTap: () => {Navigator.of(context).pop()},
          ),
           ListTile(
            leading: Icon(Icons.notifications),
            title: Text('Notifications'),
            onTap: () => {},
          ),
          ListTile(
            leading: Icon(Icons.settings),
            title: Text('Settings'),
            onTap: () => {Navigator.of(context).pop()},
          ),
          ListTile(
            leading: Icon(Icons.border_color),
            title: Text('Feedback'),
            onTap: () => {Navigator.of(context).pop()},
          ),
          ListTile(
            leading: Icon(Icons.logout),
            title: Text('Logout'),
            onTap: () => {Navigator.of(context).pop()},
          ),
        ],
      ),
    );
  }
}

您可以使用 TabController 通過 _scaffoldKey.currentState.openDrawer() 打開抽屜:

TabController _tabController;
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _categoryList.length, vsync: this);
  }
...

Scaffold(
      key: _scaffoldKey,
...

TabBar(
          controller: _tabController,
          onTap: (index){if(_tabController.index == 0) _scaffoldKey.currentState.openDrawer();}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM