首页 > 解决方案 > 如何在颤动中显示右下角的抽屉图标?

问题描述

我需要在页面底部显示总共 5 个图标(4 个底部导航图标 + 1 个菜单抽屉图标)。我正在使用 BottomNavigationBarItem 来显示四个底部导航图标。在那我需要添加菜单抽屉图标。我只能找到右下角和左下角的答案。请帮助解决这个问题

class HomeScreen extends StatefulWidget{
 final int indexvalue;
  HomeScreen({Key key, @required this.indexvalue}) : super(key: key);
  @override
  State createState() {
    return HomeScreenState();
  }
}

class HomeScreenState extends State<HomeScreen> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  int _selectedPage = 0;
  final _pageOptions = [
   Screen1(),
   WebView1(),
   Home(),
   Leader(),
  ];


  @override
  Widget build(BuildContext context){
    Size size = MediaQuery.of(context).size;
    var val = widget.indexvalue;
    print(widget.indexvalue);
    return MaterialApp(
      title: 'Home',
      home: Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(title: Text('Home'),),
        body: _pageOptions[_selectedPage],
         endDrawer: build_1(),
        bottomNavigationBar: new Theme(
          data: Theme.of(context).copyWith(
              // sets the background color of the `BottomNavigationBar`
              canvasColor: Colors.green,
              // sets the active color of the `BottomNavigationBar` if `Brightness` is light
              primaryColor: Colors.red,
              textTheme: Theme
                  .of(context)
                  .textTheme
                  .copyWith(caption: new TextStyle(color: Colors.yellow))), // sets the inactive color of the `BottomNavigationBar`
          child: new BottomNavigationBar(
            showSelectedLabels: false,   // <-- HERE
            showUnselectedLabels: false,
          currentIndex: _selectedPage,
          onTap: (int index) {
            setState(() {
              _selectedPage = index;
            });

          },
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
            BottomNavigationBarItem(icon: Icon(Icons.photo_library), title: Text('photo_library')),
            BottomNavigationBarItem(icon: Icon(Icons.book), title: Text('book')),
            BottomNavigationBarItem(icon: Icon(Icons.notifications), title: Text('download')),
          ],

          ),
        ),
      )
    );
  }
}

build_1(){
      return   SizedBox(
           //width: size.width,
           child: Drawer(
          child: new ListView(
            children: <Widget>[
              new DrawerHeader(
                child: new Text("Drawer Header"),
                decoration: new BoxDecoration(
                  color: Colors.blue,
                ),
              ),
              new Text("Item 1"),
              new Text("Item 2"),
              new Text("Item 3"),
              new Text("Item 4"),
              new Text("Item 5"),
              new Text("Item 6"),
            ],
          ),
        ),
         );
}

标签: flutter

解决方案


如果您在脚手架中使用:

抽屉:抽屉()使用_scaffoldKey.currentState.openDrawer();

endDrawer:抽屉()使用_scaffoldKey.currentState.openEndDrawer();


推荐阅读