如何在底部导航上方制作 flutter 抽屉

Question

我在 Flutter 项目中有一个简单的抽屉，我想让抽屉在用户滑动/打开时始终位于底部导航栏上方。 我玩弄我的代码，但还没有找到任何解决方案。

 import 'package:flutter/material.dart'; import 'package:testing2/pages/ChannelsPage.dart'; import 'package:testing2/pages/HomePage.dart'; import 'package:testing2/pages/ExplorePage.dart'; import 'package:testing2/fragments/first_fragment.dart'; import 'package:testing2/fragments/second_fragment.dart'; import 'package:testing2/fragments/third_fragment.dart'; import 'package:testing2/Shared/drawer.dart'; class MyHomePage extends StatefulWidget { @override _MyBottomNavigationBarState createState() => _MyBottomNavigationBarState(); } class _MyBottomNavigationBarState extends State<MyHomePage> { final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>(); int _currentSelected = 0; GlobalKey<ScaffoldState> _drawerKey = GlobalKey<ScaffoldState>(); final List<Widget> _children = [ HomePage(), SettingsPage(), ContactPage(), HomePage() ]; void onTappedBar(int index){ index == 3? _drawerKey.currentState.openDrawer(): setState((){ _currentSelected = index; }); } @override Widget build(BuildContext context) { return new Scaffold( key: _drawerKey, drawer: new Drawer( child: ListView( children: <Widget>[ new DrawerHeader( child: new Text('Jonathan'), decoration: new BoxDecoration(color: Colors.orange),), new ListTile( leading: const Icon(Icons.notifications), title: new Text('Notifications'), onTap: (){ Navigator.pop(context); Navigator.push(context, new MaterialPageRoute(builder: (context) => new FirstFragment())); }, ), new ListTile( leading: const Icon(Icons.list), title: new Text('Preferences'), onTap: (){ Navigator.pop(context); Navigator.push(context, new MaterialPageRoute(builder: (context) => new SecondFragment())); }, ), new ListTile( leading: const Icon(Icons.help), title: new Text('Help'), onTap: (){ Navigator.pop(context); Navigator.push(context, new MaterialPageRoute(builder: (context) => new ThirdFragment())); }, ), new ListTile( leading: const Icon(Icons.outlined_flag), title: new Text('Logout'), onTap: (){ Navigator.pop(context); Navigator.push(context, new MaterialPageRoute(builder: (context) => new FirstFragment())); }, ), ], ) ), body:_children[_currentSelected], bottomNavigationBar: BottomNavigationBar( backgroundColor: Colors.blueGrey[900], type: BottomNavigationBarType.fixed, onTap: onTappedBar, currentIndex: _currentSelected, showUnselectedLabels: true, unselectedItemColor: Colors.white, selectedItemColor: Color.fromRGBO(10, 135, 255, 1), items: <BottomNavigationBarItem> [ BottomNavigationBarItem(icon: new Icon(Icons.home), title: new Text('Home')), BottomNavigationBarItem(icon: new Icon(Icons.search), title: new Text('Explore')), BottomNavigationBarItem(icon: new Icon(Icons.device_hub), title: new Text('Channels')), BottomNavigationBarItem(icon: new Icon(Icons.dehaze), title: new Text('More')), ], ), ); } } class Page extends StatelessWidget { const Page({Key key}): super(key: key); @override Widget build(BuildContext context) { return Container(); } }

我按照你告诉我的方式做了，抽屉位于底部导航栏上方，但打开抽屉的第四个图标不再起作用。

Answer 1

您可以通过以下方式执行此操作。

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Scaffold(
        body: Center(
          child: _widgetOptions.elementAt(_selectedIndex),
        ),
        appBar: AppBar(
          title: Text("data"),
        ),
        drawer: Drawer(
          child: Center(
            child: RaisedButton(
              child: Text("Press"),
              onPressed: () {
                Navigator.push(
                    context, MaterialPageRoute(builder: (context) => Hello1()));
              },
            ),
          ),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

class Hello1 extends StatelessWidget {
  const Hello1({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: Text("data"),
        ),
      ),
    );
  }
}

Answer 2

@Aase Zi，您可以在子页面中传递您的 _MyBottomNavigationBarState 键

widget.globalScaffoldKey.currentState.openDrawer();

globalScaffoldKey 是我的变量的名称。